Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 178
  • Last Modified:

Why do my links get bigger when I got to landscape?

I want to keep the size of my links consistent when my mobile user goes from portrait to landscape. I think I've got the settings correct, but I still see the links increase by one or two font sizes and I don't know why.

Here's the page: http://www.brucegust.com/NHBC/mobile/about.php

And here's my relevant stylesheet code:

@media screen and (max-width: 480px) {
a.submenu {
color:#1b1b1b;
font-size: 10px;
font-weight:bold;
text-decoration:none;
}

a.submenu:hover {
color:#000000;
font-size: 10px;
font-weight:bold;
text-decoration:underline;
}
a.submenu:visited {
color:#1b1b1b;
font-size: 10px;
font-weight:bold;
text-decoration:none;
}
}

@media screen and (max-width: 320px) {
a.submenu {
color:#1b1b1b;
font-size: 10px;
font-weight:bold;
text-decoration:none;
}

a.submenu:hover {
color:#000000;
font-size: 10px;
font-weight:bold;
text-decoration:underline;
}
a.submenu:visited {
color:#1b1b1b;
font-size: 10px;
font-weight:bold;
text-decoration:none;
}
}

What am I doing wrong or what I can I do differently?
0
brucegust
Asked:
brucegust
  • 2
1 Solution
 
brucegustPHP DeveloperAuthor Commented:
BTW: The links that I'm referring to are the "About | Missions Statement | Beliefs | Church Staff" stuff you see at the top of the page.
0
 
GaryCommented:
Not seeing any change, except at the 1024px mark.
If a style is consistent throughout your resolutions then just set them before your queries - you don't repeat them for each screen size.
0
 
GaryCommented:
And any screen bigger than 1024px will have no styling since you only have css up to max-width 1024px.
As I said above, set all your default styling first then use media queries to change any little bits that need changing at certain resolutions.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now