3

I have three <div> that are next to each other (horizontally). Now I want to change them to following each other (vertically) after this:

@media (max-width: 519px) { // all elements get vertical position }

By default, they will be under each other step by step, But I want to all elements following each other at the same time. Also here is a fiddle, you can change the width of page and you will see in first <div3> will be break down, and if you reduce the width of page more, you will see <div2> will be break down too. While I want to both of them be break down at the same time (responsive - like a grid).

How can I do that?


HTML:

<div class="one">div1</div>
<div class="two">div2</div>
<div class="three">div3</div>

CSS:

.one,.two,.three{
    border: 1px solid;
    float: left;
    margin: 5px;
    width: 25%;
    text-align: center;
    padding: 15px;
}

@media (max-width: 519px) { 
    .one,.two,.three{
        border: 1px solid red;
    }
}
2
  • It's probably worth noting that, as per the intended use for classes, it may better suit your needs to have one class to encapsulate the three divs' stacking functionality, rather than listing all three classes in the CSS. From there you might want to use IDs to add aspects to the individual elements if necessary (or even a unique second class to each if you want the styles to apply elsewhere as well).
    – brads3290
    Oct 19, 2015 at 11:21
  • @BradSullivan Thanks for the note. Actually this fiddle is just a test. But yeah, you are right, In this case using one class is more readable and easier.
    – Shafizadeh
    Oct 19, 2015 at 11:23

4 Answers 4

4

Presumably you mean that below 520px you'd like them to be stacked vertically, but otherwise side-by-side? I would do this instead of floating. (It should be noted that you have to remove float: left; in your CSS codes)

div { display: inline-block; }

@media (max-width: 519px) {
    div { display: block; }
}
1
4

You can set width of div equal to width of the window under media query rule.

.one,.two,.three{
    border: 1px solid;
    float: left;
    margin: 5px;
    width: 25%;
    text-align: center;
    padding: 15px;
}

@media (max-width: 519px) {	
    .one,.two,.three{
        border: 1px solid red;
        width:100%; /*Check this*/
    }
}
<div class="one">div1</div>
<div class="two">div2</div>
<div class="three">div3</div>

Check jsFiddle here

2
  • Yeah, this answer is exactly the same with Jeroen Bellemans's answer. But ok, +1.
    – Shafizadeh
    Oct 19, 2015 at 10:46
  • 1
    @Sajad: If you want to develop responsive web pages fast, you can use Bootstrap. Oct 19, 2015 at 11:05
1

Add width: 100% to this:

@media (max-width: 519px) { 
    .one,.two,.three{
        border: 1px solid red;
        width: 100%;
    }
}

That should do the job?

1
  • Thanks, this solution changes the width of elements, but it is a good idea. +1
    – Shafizadeh
    Oct 19, 2015 at 10:41
1

Just turn off floating:

@media (max-width: 519px) { 
    .one,.two,.three{
        border: 1px solid red;
        float: none;
    }
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.