仅在媒体屏幕中禁用浮动

Question

I have been trying to disable float:left in media screen only .
But its still taking the float:left .
I have float:left on none media screen.

 @media only screen and (max-width: 600px) { .twitter_page { padding: 0 108px 0 0; margin-left: -3px; float: none; } } .twitter_page { float: left; padding: 0 218px 0 0; /* border: solid; */ margin-right: -109px; margin-left: 54px; } 

 <div class="twitter_page"> <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 350px; height: 400px; padding: 0px; border: none; max-width: 100%; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px;" data-widget-id="profile:AZLily_official" title="Twitterタイムライン"></iframe> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> 

Website Link

Answer 1

Your CSS is parsed from top to bottom. Put the media query at the bottom of your document and you will get what you want.

 .twitter_page { float: left; padding: 0 218px 0 0; /* border: solid; */ margin-right: -109px; margin-left: 54px; } @media only screen and (max-width: 600px) { .twitter_page { padding: 0 108px 0 0; margin-left: -3px; float: none; } } 

 <div class="twitter_page"> <iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 350px; height: 400px; padding: 0px; border: none; max-width: 100%; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px;" data-widget-id="profile:AZLily_official" title="Twitterタイムライン"></iframe> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </div> 

Answer 2

There is nothing wrong with your css but positioning problem. you wrote media css first then normal css, so in this case media css will override by normal css.

Try this

.twitter_page {
    float: left;
    padding: 0 218px 0 0;
    margin-right: -109px;
    margin-left: 54px;
}
@media only screen and (max-width: 600px){
    .twitter_page{
        padding: 0 108px 0 0;
        margin-left: -3px;
        float: none;
    }
}