Is it possible to incorporate this design in a way that is responsive?

Question

Is it possible to incorporate this design in a way that is responsive?

Can you share your insights on the best approach to implement this design in a responsive manner? I have a mockup ready for reference, featuring a lovely blue square.

Here's the "mobile" version of the design. When the width is reduced to a point where the blue square can no longer fit without shrinking, it should move below the three other content blocks.

In this scenario, it seems the straightforward solution would be to have the blue block drop below the block immediately to its left. However, the client has specified that this is not the desired layout. How would you tackle this challenge?

html css responsive-design

Answer 1

Answer №1

If you want to style the blue block, consider using a combination of float: right for high-res screens and display: table-footer-group for low-res screens. This way, you can avoid the need to move the blue block or use a hidden clone.

Check out this example: http://codepen.io/anon/pen/Kwdrdy

Here's the basic markup:

<main>
  <aside><div>1</div></aside>
  <section>2</section>
  <section>3</section>
  <section>4</section>
</main>

CSS:

section, aside { 
  margin: 10px 0;
  width: 100%;
  border: 1px #ccc solid 
}

main {
  display: table;
  width: 100%;
}

aside {
  display: table-footer-group;
}

aside div { background: #c2c1dc; width: 30%; margin: 0 auto;  }

@media all and (min-width: 600px) {
   main { display: block; }
   aside { float: right; width: 30%; margin: 0; }
   aside div { width: 100%; }
   aside + section { width: 68%; }
}

Screenshot on viewport < 600px

Screenshot on viewport > 600px

Note : display: table-* is well supported on all browsers, including IE8+

Answer 2

If you want to style the blue block, consider using a combination of float: right for high-res screens and display: table-footer-group for low-res screens. This way, you can avoid the need to move the blue block or use a hidden clone.

Check out this example: http://codepen.io/anon/pen/Kwdrdy

Here's the basic markup:

<main>
  <aside><div>1</div></aside>
  <section>2</section>
  <section>3</section>
  <section>4</section>
</main>

CSS:

section, aside { 
  margin: 10px 0;
  width: 100%;
  border: 1px #ccc solid 
}

main {
  display: table;
  width: 100%;
}

aside {
  display: table-footer-group;
}

aside div { background: #c2c1dc; width: 30%; margin: 0 auto;  }

@media all and (min-width: 600px) {
   main { display: block; }
   aside { float: right; width: 30%; margin: 0; }
   aside div { width: 100%; }
   aside + section { width: 68%; }
}

Screenshot on viewport < 600px

Screenshot on viewport > 600px

Note : display: table-* is well supported on all browsers, including IE8+

Answer 3

Answer №2

Here is a helpful starting point for you, using the order property to arrange elements:

Check out the Demo

HTML:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

CSS

 div {
    background:lightblue;
    height:100px;
    width:100%;
    box-sizing:border-box;
    padding:10px;
    box-sizing:border-box;
    margin:10px;
    overflow:hidden;
}
div:nth-child(2) {
    width:calc(100% - 130px);
}
div:nth-child(1) {
    background:lightgrey;
    float:right;
    width:100px;
    margin:0 10px 0 0;
}
@media screen and (max-width: 500px) {
    body {
        display:flex;
        flex-flow: column;
        text-align:center;
    }
    div, div:nth-of-type(1) {
        margin-left: auto;
        margin-right: auto;
    }
    div:nth-of-type(1) {
        order:4;
        float:none;
    }
    div:nth-of-type(2) {
        order:1;
    }
    div:nth-of-type(3) {
        order:2;
    }
    div:nth-of-type(4) {
        order:3;
    }
}

Answer 4

Here is a helpful starting point for you, using the order property to arrange elements:

Check out the Demo

HTML:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

CSS

 div {
    background:lightblue;
    height:100px;
    width:100%;
    box-sizing:border-box;
    padding:10px;
    box-sizing:border-box;
    margin:10px;
    overflow:hidden;
}
div:nth-child(2) {
    width:calc(100% - 130px);
}
div:nth-child(1) {
    background:lightgrey;
    float:right;
    width:100px;
    margin:0 10px 0 0;
}
@media screen and (max-width: 500px) {
    body {
        display:flex;
        flex-flow: column;
        text-align:center;
    }
    div, div:nth-of-type(1) {
        margin-left: auto;
        margin-right: auto;
    }
    div:nth-of-type(1) {
        order:4;
        float:none;
    }
    div:nth-of-type(2) {
        order:1;
    }
    div:nth-of-type(3) {
        order:2;
    }
    div:nth-of-type(4) {
        order:3;
    }
}

Answer 5

Answer №3

Have you ever tried transforming an old position switch like the one showcased in this Fiddle? It transitions from absolute to relative using a media query.

<div class="content">
    <div class="block block1">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block block3">4</div>
</div>

Here is the accompanying CSS:

.content {
    margin: 0 auto;
    max-width: 800px;
    position: relative;
}
.block {
    box-sizing: border-box;
    border: 1px solid red;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.block1 {
    width: 75%;
}
.block3 {
    width: 25%;
    position: absolute;
    right: 0;
    top: 0;
}
@media all and (max-width: 350px) {
    .block1 {
        width: auto;
    }
    .block3 {
        width: auto;
        position: relative;
}

Answer 6

Have you ever tried transforming an old position switch like the one showcased in this Fiddle? It transitions from absolute to relative using a media query.

<div class="content">
    <div class="block block1">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block block3">4</div>
</div>

Here is the accompanying CSS:

.content {
    margin: 0 auto;
    max-width: 800px;
    position: relative;
}
.block {
    box-sizing: border-box;
    border: 1px solid red;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.block1 {
    width: 75%;
}
.block3 {
    width: 25%;
    position: absolute;
    right: 0;
    top: 0;
}
@media all and (max-width: 350px) {
    .block1 {
        width: auto;
    }
    .block3 {
        width: auto;
        position: relative;
}

Answer 7

Answer №4

If you want to explore the flexbox layout mode, it can be a great option.

(using the HTML elements from @fabrizio)

main {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
aside {
  width: 100px;
  order: 4;
  background: lightblue
}
section {
  width: 100%;
}
section:first-child {
  flex: 1 0px
}
@media screen and (min-width: 700px) {
  aside {
    order: 0
  }
}

/*next rule is for demo only*/
main > * {
  padding: 10px;
  min-height: 100px;
  border: 1px solid #ddd;
  margin: 10px;
}

<main>
  <section>content of section 1</section>
  <aside>content of aside 2</aside>
  <section>content of section 3</section>
  <section>content of section 4</section>
</main>

For a live demo of this layout, check out http://codepen.io/gpetrioli/pen/ZYbmYo

Answer 8

If you want to explore the flexbox layout mode, it can be a great option.

(using the HTML elements from @fabrizio)

main {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
aside {
  width: 100px;
  order: 4;
  background: lightblue
}
section {
  width: 100%;
}
section:first-child {
  flex: 1 0px
}
@media screen and (min-width: 700px) {
  aside {
    order: 0
  }
}

/*next rule is for demo only*/
main > * {
  padding: 10px;
  min-height: 100px;
  border: 1px solid #ddd;
  margin: 10px;
}

<main>
  <section>content of section 1</section>
  <aside>content of aside 2</aside>
  <section>content of section 3</section>
  <section>content of section 4</section>
</main>

For a live demo of this layout, check out http://codepen.io/gpetrioli/pen/ZYbmYo

Is it possible to incorporate this design in a way that is responsive?

Answer №1

Answer №2

Check out the Demo

Answer №3

Answer №4

Similar questions

Create a canvas and include input boxes in an HTML document

Angular JS does not display the bold tag for specific words

The text sliding feature gradually moves further away from the left side with each iteration

Whenever I hover over a dropdown menu item, it suddenly stops functioning and I am forced to click in

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

Downloading multiple files concurrently in Flask

Retrieve several values with a limit of 1 in SQL

Header with absolute positioning doesn't play nice when nudged in Chrome

php code to show data in a single column of a table

What is the term used for a tag that automatically closes itself?

Ways to transfer several files while transferring just one file

Task: Choose MySQL option and Retrieve JSON data

Issues with HTML5 video playback have been reported in both Chrome and Firefox browsers

Can we guarantee that all buttons in a button group are identical?

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

What is the best way to ensure that the input search bar, microphone icon, and two small boxes adapt to different screen

What are the proper steps to ensure images are displayed correctly on mobile devices?

Symbol for infinity does not appear correctly within the span element

Issues arise when Angular animations fail to function properly due to the addition of styles through the [ng

Issue with interactive rows in a table ( Rails Version 4 )