CODEWITHSUNDEEP
css
Vishal Khialani
Vishal Khialani

Reputation: 2587

navigation breaking in mobile and tablet

I am using fixed layouts however when I see my layout in android tablets and phones the layout is breaking for some reason.

Please visit http://www.iamvishal.com/pureecn/

and notice the top navigation "open account, customer support and select language"

In the desktop it looks fine however the top navigation breaks in mobile browsers.

I am suspecting its the margin them.

#main_links_list_1,#main_links_list_2,#main_links_list_3
{

 margin-right: 65px;
 position: relative;
}

Upvotes: 2

Views: 433

Answers (6)

Abu Romaïssae
Abu Romaïssae

Reputation: 3901

Your problem may be cause in the section Professional Solutions the last link is quite long, which breaks the layouts.

Try this in your css file:

#professional_solutions_list {
  max-width: 180px;
  width: 100%;
}

see the following screen to get what I meant (the red line is where your menu should reach, the blue line is where it is actually):

enter image description here

Update

The following state is the default one, with the problem as occurred in tablets, please notice the applied rules:

enter image description here

And this one after adding max-width: 180px, the problem is solved:

enter image description here

I edit the css rules live, using FireBug

EDIT:

Upon your comment, I've checked the website again, please remove:

width: 94%;

from the div with the id: secondary_links

Upvotes: 1

M.Bennett
M.Bennett

Reputation: 1029

Although a responsive layout like zurb would be advisable - the quick fix lies in applying a

min-width: to your page-wrapper element

Upvotes: 0

SuperManSL
SuperManSL

Reputation: 1306

You assumed wrong. YOu need responsive layout and not fixed! I suggest you take a look at zurb foundation v4.

Upvotes: 1

Jason Lydon
Jason Lydon

Reputation: 7180

There are a lot of reasons your site could be off in mobile/tablet.

1 ==> Create a fluid layout for non-desktop
2 ==> Make sure your meta viewport is correct (include retina display and Android dpi)
3 ==> Optimixe your images for mobile
4 ==> beware of position:fixed on older iOs and Android devices. Does not work as expected.

Can you explain a little better what is breaking?

Upvotes: 1

apaul
apaul

Reputation: 16170

Pretty much things are breaking because you have half of your layout "fixed" and the other half "fluid". For example:

div.section {
margin-left: auto;
margin-right: auto;
width: 960px;          /*fixed*/
position: relative;
}

#main_links_container {
    float: left;
    width: 80%;       /*fluid*/
}

Also note that when no width is set for an element, the default is auto.

Open your site on a desktop and try resizing the browser window you will probably see the same issue that you're seeing on mobiles and tablets.

If you really want to avoid media selectors you could try changing this-

html, body, #page {
height: 100%;
}

To something like this-

html, body, #page {
width: 1200px;
margin: 0 auto;
}

Upvotes: 4

Kevin Lynch
Kevin Lynch

Reputation: 24703

Use a media query in your CSS for greater control on mobile devices-

@media screen and (max-width: 767px) {
    #main_links_list_1,#main_links_list_2,#main_links_list_3
    {
    margin-right: 15px; // reduced amount for mobile devices and tablets
    position: relative;
    }
}

Ensure this is BELOW the current CSS otherwise it will get overridden

Upvotes: 2

Related Questions