#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2004
    Posts
    996
    Rep Power
    15

    clearing columns in bootstrap


    Hi there,
    I have the following markup and I'm trying to break the 2 divs onto seperate lines when teh screen is 1040px wide, however it's not working.

    PHP Code:
    <div class="row">
    <
    div class="col-md-6 col-sm-12 col-xs-12 cta-btn-red">
            <
    class="btn btn-large btn-red col-xs-12 col-sm-12 col-md-12" href="#">Button1</a>
    </
    div>


    <
    div class="col-md-6 col-xs-12 cta-btn-gold">
            <
    class="btn btn-large btn-gold col-xs-12 col-sm-12 col-md-12" href="#">Button2</a>
    </
    div>

    </
    div
    PHP Code:
    @media only screen and (max-width 1040px) {

    .
    cta-btn-red,.cta-btn-gold,a.btn-red,a.btn-gold{
    display:block;
    float:none;
    clear:both}



    Any ideas why it's not working?

    Thanks
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2018
    Posts
    9
    Rep Power
    0
    I tried this code and it is working perfectly fine.

    I got the two buttons in a separate on smaller screen. Please give more details if it is still not working.


    Regards,

    Pavithra
    <a href="https://spidergems.com">Spidergems Softlabz - The Best Web Design Company in Chennai </a>
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4308
    Are you including the main scrollbar in your viewport width calculation? Try using 1060px instead of 1040px.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo