Solved

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

Posted on 2014-01-16
3
164 Views
Last Modified: 2014-01-16
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
Comment
Question by:brucegust
  • 2
3 Comments
 

Author Comment

by:brucegust
ID: 39785550
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
 
LVL 58

Expert Comment

by:Gary
ID: 39785572
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39786030
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Basic CSS issues 24 34
Parse CSS value with RegEx 2 41
Box Model and Styling 12 20
Phone Dialer 5 36
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now