CODEWITHSUNDEEP
htmlcss
Alaa M.
Alaa M.

Reputation: 5273

Css @media tag acting strange

I'm trying some design with the @media tag, on resizing the browser's window.

Normal window:

normal

Resized window:

resized

(3rd story (the one on the right) vanishes, and elements get smaller)

Problem is when I resize it back to the original size, I get:

resized_back_to_original

Code:

@media screen and (max-width: 998px){
    ...
    .person_company{
        float: none !important;
    }
    ...
}

.person_company is these images:

person_company

I didn't post the whole @media code because if I remove the .person_company style, this problem doesn't happen. So i'm assuming it is the one that's causing the issue.

Also, note that before resize, chrome inspect element shows float: right on that element, and when resized, it shows float: none, and when enlarged back it shows float: right. So The @media is acting right I guess. So what is causing the problem?

Upvotes: 1

Views: 78

Answers (2)

Chrillewoodz
Chrillewoodz

Reputation: 28338

This bug occurs when you have !important rules for float and sometimes even display. This is because the !important will remain active even if the screen has been resized back up again. For now there's little to do about it, I usually try to find another way of positioning my elements. It's not like the user will sit and resize the window up and down etc. but if you really are bothered by this bug. Find another way of going about the positioning :)

Upvotes: 0

meduz'
meduz'

Reputation: 618

There's a bug in Chrome that causes position problems when you resize your window. When it occurs, try just to refresh the page (F5) in the buggy position. It should then be displayed normally.

Resizing bug. :)

Maybe you could provide here more details about the size of your window before and after resizing.

Upvotes: 1

Related Questions