Question

Let’s say I have 2 different CSS files (desktop.css and ipad.css) being applied to the same html page.

I have some pseudo div defined as follows (in desktop.css)

div.someClass{float:left;overflow:hidden;height:100px}

Now at say lower screen size (user resizes browser to iPad size) and iPad.css gets applied.
So my question is, will the effect of properties defined in desktop.css still remain OR is it completely wiped out and only ipad.css properties get applied..

Like in ipad.css, if I want to have overflow:visible (i.e. default overflow value), do I need to explicityly specify that OR if I just define as follows in ipad.css

div.someClass{float:left;height:100px}

it would automatically apply the default overflow:visible value to the div ?

Answer 1

@testndtv; you have to write overflow:visible in your ipad.css because media query only detect the screen resolution & then active the css according to screen resolution. That’s why we can only override our ipad.css property from the activate one.

So, for ipad.css write like this:

div.someClass{float:left;overflow:visible;height:100px}