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

How to customize CSS depending on (tinier) window size?

How to customize CSS depending on (tinier) window size?

Problem

So I've seen that there is a different css called depending on how large the screen is.

Example normal size:

http://i.stack.imgur.com/UVR4k.png

Note the red bar does not have any margin-bottom and the text is custom css (provided in an extra css file, not bootstrap.css)

Example tiny size:

http://i.imgur.com/oReZCRW.png

Note that the css I have added is basically gone.

How can I fix this? I thought it was something with

@media (max-width: 767px)

But after adding this in the extra css file it doesn't get fixed.

This is the CSS I used:

#The red bar
.top .alert {
margin-bottom: 0px;
}
#The text css
.very-big {
color: #20F587;
font-size: 115px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
.title-very-big {
color: #20F587;
font-size: 75px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
.p-very-big {
color: #20F587;
font-size: 15px;
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
font-weight: bold;
}
Problem courtesy of: MrBlackDrag0nfly

Solution

a url to inspect it would be helpful.

that said:

anything in @media (max-width: 767px) will not appear in the bigger version.

max-width styles won't appear on screens bigger than the setting (in your case 767px), and min-width styles won't appear until the screen is at least as big as the setting. so if the desired margin and text styles are only working at a large size, chances are it is because they are in a min-width query somewhere, not a max-width.

sidenote: if possible, it is better (and makes things so much easier) to remove unwanted styles instead of trying to override styles.

edit: i found your site at http://mrblackdragonfly.com/404/

the .top .alert has a margin-bottom:0px;, but it is inside a (min-width: 768px) query. move it out of there and the margin problem should go away.

the same goes for your text style.

Solution courtesy of: jakealbaugh

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

How to customize CSS depending on (tinier) window size?

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×