Site not centered on tablets.

  • Hi,

    my site uses a modified version of twenty eleven (child theme of course).

    The address is: https://www.webfoodculture.com

    Just recently I’ve started using percent values in my pages, this way they can adapt to tablets (a separate mobile version will follow).

    Problem is: all the pages, when displayed in tablets, are not centered. They have the left margin, not the right one.

    Could you please please help?

    Many many thanks in adv.

    A.

Viewing 7 replies - 1 through 7 (of 7 total)

  • You have following style;

    .one-column #page {
  max-width: 1000px;
  min-width: 800px;
}

    Problem is “min-width: 800px;”. With this, the page won’t get smaller than 800px.
    If you see the page on the tablets smaller than 800px width, such as iPad portrait, it will cut off the right side of the page

    Just remove “min-width: 800px;”

    Thread Starter Anthyx

    (@anthyx)

    Many many thanks Sasori, it works perfectly.

    I have just a minor issue: since this change, when I visit the site using my ipad mini, the “about” button on the top navbar does not work (the one on the bottom navbar works fine).

    I suspect in some way it reacts badly to the two language buttons just below it.

    If you can help me also with this it would be MUCH MUCH appreciated.

    Many thanks again!

    A.

    Hi Anthyx

    #branding .only-search #searchform {
   top: 5px;
   z-index: 1;
}

    Remove “z-index: 1;” unless you have a reason to keep.
    The problem is the Search Form above the main banner. For some reasons the invisible form tag extends down about 170px and it covers over the navigation.
    Removing “z-index: 1;” will bring the Search Form behind the navigation so the menu becomes clickable.

    Hope this helps.

    Thread Starter Anthyx

    (@anthyx)

    Hi Sasori,

    many thanks for your help, it’s invaluable to me.

    Speaking about your last suggestion, I’ve not been able to find the z-index value in my currnt style.css. The actual value is this:

    #branding .only-search #searchform {
    top: -20px;
    right: 0px
    }

    So, what should I do in your opinion?

    Thanks again!

    A.

    Ok, the style I mentioned is actually in the style.css of your parent theme.
    So you want to override it in your own style.css.

    Add this to your style.css

    #branding .only-search #searchform {
      z-index: auto;
}

    Hope this will work

    Thread Starter Anthyx

    (@anthyx)

    Sasori I did something like this:

    #branding .only-search #searchform {
    z-index: auto;
    top: -24px;
    right: 0px
    }

    top and right values place the search rectangle right in the upper right corner.

    Its quite odd, if I place the z-index value AFTER the top and right values it does not work!

    But like this it works perfectly!

    Again, many many thanks for your precious help!

    Ciao

    Antonio

    I’m glad that you found the solution!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Site not centered on tablets.’ is closed to new replies.