Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Div wont wrap, but does sometimes

Div wont wrap, but does sometimes

Problem

Banging my head against the wall with this one. When "@media (max-width: 320px)" the thumbnail reduces in size leaving space for the div below to float to the right next to it. For some reason it won't work, but on occasions when playing with chrome's "inspect element" and turning on/off the attributes it suddenly works. Working with twitter-bootstrap, here is a bootply http://bootply.com/73043

@media ( max-width: 320px ) {
    .thumbnail > a > img {
        width: 40%;
    }
    .pleasewrap {
        float: right;
        display: inline-block;
        position: absolute;
    }
}

Problem courtesy of: Tom Rudge

Solution

Looking at it, I think it's related to how the Media query rule for the 'pleasewrap' class isn't being picked up by the browser. When its de-activated and re-activated in the Chrome inspector, it picks it up, and does what you want.

Try applying the 'inline-block' display rule at a higher, more general (or the highest, non-media specific), level in your template stylesheet and that should do the job!

Solution courtesy of: Pete

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Div wont wrap, but does sometimes

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×