Display responsive div element on mobile using CSS? - css

Question

This code looks good on a desktop PC. I want to make the boxes appear one below the other on a mobile phone. Box2 and box4 (these will contain text) should be full width on mobile. Unfortunately, no matter how I try, it fails, it collapses on mobile. Can you help me to adjust the code?
.box {
width: 10%;
padding: 13px;
height: 200px;
background: blue;
margin-right: 5px;
float: left;
}
.box2 {
width: 30%;
padding: 13px;
height: 200px;
background: green;
margin-right: 5px;
float: left;
}
.box3 {
width: 10%;
padding: 13px;
height: 200px;
background: yellow;
margin-right: 5px;
float: left;
}
.box4 {
width: 30%;
padding: 13px;
height: 200px;
background: red;
margin-right: 0;
float: left;
}
<div class="box">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box2">
kdféajkdéfdéf
</div>
<div class="box3">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box4">
hdhdhgdghd
</div>

Answer 1

The easiest way to do this is to use a media query to apply rules at mobile widths. Then wrap your .box divs in a containing div then use flexbox to change the flex-direction from row to column. In the same query set your .box div widths to the size you want. Kevin Powell has a good introduction to flexbox here
Example below
/* Added this */
.container {
display:flex;
}
.box {
width: 10%;
padding: 13px;
height: 200px;
background: blue;
margin-right: 5px;
float: left;
}
.box2 {
width: 30%;
padding: 13px;
height: 200px;
background: green;
margin-right: 5px;
float: left;
}
.box3 {
width: 10%;
padding: 13px;
height: 200px;
background: yellow;
margin-right: 5px;
float: left;
}
.box4 {
width: 30%;
padding: 13px;
height: 200px;
background: red;
margin-right: 0;
float: left;
}
/* added this */
#media only screen and (max-width: 600px) {
.container {
flex-direction:column;
}
.box2, .box4 {
width:auto;
}
}
<div class='container'>
<div class="box">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box2">
kdféajkdéfdéf
</div>
<div class="box3">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box4">
hdhdhgdghd
</div>
</div>

Answer 2

Take all the four boxes and store them in a container div.
Then use display:flex on the container. By default all the children elements in this case the boxes will remain in row.
But in media query set them to line in column.
The code is below :
/* Add this to style the child elements of the container */
.container {
display:flex;
}
/* This will fix your issue */
#media only screen and (max-width: 600px) {
.container {
flex-direction:column;
}
}
.box {
min-width: 10%;
padding: 13px;
height: 200px;
background: blue;
margin-right: 5px;
float: left;
}
.box2 {
min-width: 30%;
padding: 13px;
height: 200px;
background: green;
margin-right: 5px;
float: left;
}
.box3 {
min-width: 10%;
padding: 13px;
height: 200px;
background: yellow;
margin-right: 5px;
float: left;
}
.box4 {
min-width: 30%;
padding: 13px;
height: 200px;
background: red;
margin-right: 0;
float: left;
}
<div class="container">
<div class="box">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box2">
kdféajkdéfdéf
</div>
<div class="box3">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" style="width: 90px; border: 0!important;" />
</div>
<div class="box4">
hdhdhgdghd
</div>
</div>
This will work the way you wanted.
Try and let me know in the comments

Answer 3

The best way would be to use CSS Grid
You enclose your box in a container grid
And put a media query on columns od this grid
.container {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr;
gap: 10px
}
#media (min-width: 35em) {
/* 560px */
}
#media (min-width: 48em) {
/* 768px */
.container {
grid-template-columns: 20% 80%;
}
}
#media (min-width: 62em) {
/* 992px */
.container {
grid-template-columns: 10% 40% 10% 40%;
}
}
#media (min-width: 92em) {
/* 1312px */
}
.container img {
width: 90px;
max-width: 90%;
}
.box,
.box3 {
text-align: center;
margin: 0;
padding: 0;
}
.box {
padding: 13px;
background: blue;
}
.box2 {
padding: 13px;
background: green;
}
.box3 {
padding: 13px;
background: yellow;
}
.box4 {
padding: 13px;
background: red;
}
<div class="container">
<div class="box">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" />
</div>
<div class="box2">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At exercitationem labore pariatur perferendis quas rem voluptas? Beatae fuga hic ipsam laboriosam mollitia perspiciatis porro quam sapiente vel. Incidunt, iusto, sapiente.</div>
<div>Alias et incidunt magni mollitia nam, nesciunt nulla odit officiis pariatur porro, quas quibusdam ratione, saepe sint suscipit tempora voluptatem? Deserunt fuga hic itaque reiciendis repellat. Consectetur fugit qui voluptas?</div>
<div>Architecto assumenda beatae deserunt dicta distinctio enim est et eveniet expedita fugit id incidunt iusto minima molestiae neque non praesentium repudiandae sit tempora, ut veniam vero voluptas voluptate, voluptates voluptatibus?</div>
<div>Eaque eveniet expedita itaque molestias quisquam reprehenderit tempore voluptatibus. Accusantium at consequatur culpa cumque dignissimos dolore, ducimus eaque ex libero magnam, modi nam natus odit quis quisquam, quo rem voluptates!</div>
<div>Ad alias delectus dicta dolorem nesciunt non odit recusandae sapiente. Accusantium consequuntur corporis debitis eaque earum, esse ex, exercitationem expedita explicabo maiores molestiae nesciunt odit porro quidem rem temporibus tenetur!</div>
<div>Adipisci eveniet exercitationem explicabo labore nam numquam perferendis possimus quasi quidem recusandae, reprehenderit sapiente sunt tempore unde veritatis. Blanditiis maxime, natus quo sit voluptatem voluptatibus? Facere molestias nesciunt obcaecati
totam.</div>
<div>Ab, accusamus alias doloribus non odit suscipit veritatis! Iure magnam numquam quo sequi? Asperiores consectetur dolorem doloremque exercitationem, impedit iure laborum nesciunt nulla officiis porro, praesentium quas vitae. Cupiditate, sequi!</div>
</div>
<div class="box3">
<img alt="" src="https://erteksziget.hu/custom/erteksziget/image/cache/w0h0q80np1/spots/h2a.png" />
</div>
<div class="box4">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam asperiores aspernatur consequatur consequuntur et explicabo fugiat hic iste magnam magni, optio placeat praesentium quae quod recusandae reiciendis, tempora temporibus?</div>
<div>Labore nulla possimus quas quis reiciendis sapiente soluta suscipit tenetur veniam voluptatum. At beatae consequatur earum natus neque placeat sapiente. Consectetur cum, debitis enim harum maiores non pariatur possimus quos?</div>
<div>Aliquam aliquid animi aperiam aut consequatur consequuntur culpa dicta ducimus eaque eligendi error fuga harum, ipsam iste laboriosam maxime mollitia necessitatibus nobis odio odit ratione repellat suscipit tempora vero voluptates?</div>
<div>Accusamus ad, architecto at, beatae consectetur consequatur consequuntur culpa cum cumque delectus dicta doloremque earum eos excepturi facilis impedit in ipsum labore minima quae quas qui quibusdam quidem repellat, vero.</div>
<div>Autem beatae consequuntur delectus, doloribus excepturi incidunt ipsum neque non omnis pariatur recusandae sapiente veritatis? Assumenda commodi corporis debitis illo in modi, molestias neque officia officiis quaerat repellat vitae voluptatum.</div>
<div>Deleniti impedit in laborum sunt. Alias, architecto beatae consectetur deleniti deserunt dicta eius excepturi facilis necessitatibus nesciunt obcaecati omnis porro, provident, quisquam repellat similique sit soluta suscipit tempore vel voluptatibus.</div>
<div>Consequatur ea ex hic, ipsam itaque natus nesciunt non porro quas, quod reprehenderit rerum temporibus ut veritatis voluptas voluptate voluptatibus. Doloribus et quisquam suscipit ullam veniam! Ab aut fuga natus.</div>
<div>Commodi consequatur expedita quae quia voluptatibus! Aliquam animi architecto debitis delectus doloremque error esse est, et hic labore, odio quae quasi, quibusdam quidem repellat reprehenderit sint vel. Aliquid iusto, odio.</div>
<div>Asperiores, atque, aut commodi debitis distinctio dolores eligendi esse iure iusto laudantium molestias, nihil nostrum odit placeat porro quibusdam quis reiciendis reprehenderit sunt ullam. Beatae corporis cupiditate fugiat harum magni?</div>
<div>Amet consequatur cum deserunt ea est et hic, labore modi placeat tempora. Eaque eius facilis iure! Accusantium, asperiores eum explicabo ipsa labore natus neque repudiandae. Eos facilis quasi quidem sint?</div>
</div>
</div>