Solved

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

Posted on 2014-01-16
3
170 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Title # Comments Views Activity
CSS Style on Chrome 1 57
Allow a tab area under the contents 1 37
CSS question 4 56
Dropdown animation to normal dropdown 6 28
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 …
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

734 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