1

What I am trying to achieve is to have a cut-off width, let's say 600px

  • On below 600px screen width, I want the site to look like this (but with same margins on Third):

below 600px

  • On 600px screen width and above, I want the site to look like this (mad image editing skills, yes. Of course, I don't want the text to be stretched like that.):

600px and above

I have got some building blocks already, starting with using flexbox and @media (min-width: 600px), but I would be open to solutions also done with bootstrap 4, for example.

What would be the best way to achieve this?

Here's what I got so far:

html {
color: white;
font-size: 50px;
}

.parent {
background-color: orchid;
display: flex;
flex-wrap: wrap;
flex-direction: row;

}

.child {
margin: 5px;
flex-grow: 1;
flex-shrink: 1;
}


.first {
background-color: blue;
height: 110px;
flex-basis:133px;
flex-grow: 0;
flex-shrink: 1;
}

.second {
background-color: green;
}
.third {
background-color: red;
width:100%;
}

@media (min-width: 600px) {
.parent {
    flex-direction: column;
    height: 120px;
}
.child {
    flex-basis:35px;
    flex-grow: 1;
    flex-shrink: 0;
}
.first {
    flex-grow: 1;
    flex-shrink: 0;
    width: 133px;
    flex-basis:110px !important;
}
.second {
    width: auto;
    height: 50px;
}
.third {
    background-color:darkmagenta;
    width: auto;
    height: 50px;
}
}
<div class="parent">
  <div class="first child">
    <span>First</span>
  </div>

  <div class="second child">
    <span>Second</span>
  </div>

  <div class="third child">
    <span>Third</span>
  </div>
</div>

It otherwise seems to work, but on large screen size, the "Second" and "Third" divs do not want to fill the full space. With width: auto on .second and .third I get too narrow divs

width: auto

and with width: 100%; I get too wide divs:

width: 100%

Niko Föhr
  • 28,336
  • 10
  • 93
  • 96
  • Also looking for the proper title for the problem. My front-end knowledge is not yet on high enough level. – Niko Föhr Oct 18 '20 at 10:35
  • Thanks for the duplicate link! I was quite sure this kind of problem was solved already but I could not find anything with the search words I could formulate. I'll take a look on it! – Niko Föhr Oct 18 '20 at 10:46
  • I checked the material behind the duplicate post link, and tried to utilize the method given in the answer. It seems to be almost working, but there is still an issue with the width setting. Asking for consideration to reopen. – Niko Föhr Oct 18 '20 at 12:15
  • After some digging I found out that using `align-content: flex-start;` on the `.parent` with `width: auto` on `.second` and `.third` seems to do the job (with the newest code on the question). At least in this simplified example. – Niko Föhr Oct 18 '20 at 13:02

0 Answers0