Solved

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

Posted on 2014-01-16
3
169 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

808 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