Right padding of page not correct on IPAD

  • Author
  • #1763574


    The above page does not seem to render correctly on ipad. The right padding seems to be off.

    Does anyone know how to fix this?

    The blog I need help with is superiornews.wordpress.com.


    I will be experimenting with academica theme. So put this on hold for now.


    Hi there, Twenty Eleven is a responsive width theme which adjusts for the size of a browser window or device (tablet, phone). To be adjustable, widths are typically done in percentages or a maximum or minimum width is set.

    In your custom CSS, you have set a static width (975px) for the #page div. Change that to max-width: 975px and your issue will be corrected.


    thanks, but I think I made some other changes since you last saw it, and “messed things up” even more. I am trying to make the site look like an eCatholic website which we will be using soon. So I have been making many changes in the CSS. The page is now terrible on the iPad. Part of the changes I made was make the left column larger.

    If you can give me any help I would appreciate it.


    Hi there, you are making changes faster than I can keep up with them. The first thing you want to do is to add the following to #page so that any widgets you reposition will be retained within the main content area.

    position: absolute;

    When you get to a stopping point with your changes, post back here with your remaining issues and I will then work to solve those for you.


    sorry…. :) I think I have isolated the problem and will be working on a few solutions, then will get back with you. How late do you think you will be around?

    Part of the problem was that I had some images in left sidebar that I was using as widget titles (because I am trying to match them to the other website)…but they were not rendering correctly, and I had to push them to 180% to get them to full resolution. I am going to try to use CSS now to match these widget “headers.”

    Your tip above is a good one, and will probably solve some other problems I was experiencing. THANKS!


    Probably off and on another couple of hours. I have some other things to catch up on, but if I’m online, I check the forums from time to time.


    I have done all that I can do… and I need help (please). My goal is to make CSS changes to the wordpress theme that I am using (twenty eleven) so that it looks like our main website which will eventually be on eCatholic. I do not want to give up wordpress. I love many of the features that wordpress offers.

    Here is where I am running into some problems: I will try to rank them in order of difficulty from easiest to most difficult:

    1. I would like to make the nav menu bar at top slightly transparent.
    2. I would like the drop down menu to be on top of the shield not hidden by shield. (the menu up there is not a full menu…a lot more submenu items need to be added)
    3. I would like to make the text on it NOT wrap, but rather resize when rendered on the iPad.
    4. I would like the logo and accompany text to also resize or pretty much stay in place.

    I hope this is not too much. I have worked on this all day and did much of this myself (albeit searching the forums, etc.)


    The LOGO SHIELD moves (is not dynamic).


    I forgot…here is the eCatholic website I have been working on.


    notice the nice shadow border. I couldn’t figure that one out either. so I guess we should add that to the list, too.


    It seems we have another problem. Whenever I update the header image, it screws things up. For some reason it does not like the image to be at 0 px from top but rather be below the menu. The alternative would be to simply have a dark background menu all the way across with no margins and the image right below it. But I will have you look at it.


    For the shadow, add the following to #page.

    box-shadow: 5px 0 15px -5px #000000, -5px 0 15px -5px #000000;

    For the menu, replace #access with the following.

    #access {
        background: none repeat scroll 0 0 #001C2F;
        font-family: open_sansregular,Helvetica,Arial,sans-serif;
        font-size: 100%;
        margin: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 9999;

    I took the width to 100%, set the margins to 0 and changed top to 0

    Also, replace #branding img with the following which shifts the header image down so that all of it shows when the browser window is at full width.

    #branding img {
        margin-top: 43px;
        z-index: 8888;

    With the menu, as you narrow down the browser window and the menu goes to two lines, and more, it starts to cover up the header image. This is because the menu was moved with position: absolute. When that is used, the menu loses its position relationship to all the other elements in the page and floats independently above everything else. Give that each browser renders things slightly differently, this can be a challenge to overcome. The following two media queries will adjust the header image down when the menu goes to two lines and then to 3 lines, but I worked this out on Firefox and there is no guarantee that other browsers will take the menu to two and three lines at the same break points I’ve used. Add these at the very bottom of your CSS below everything else.

    @media screen and (max-width: 885px) {
        #branding img {
            margin-top: 87px;
    @media screen and (max-width: 461px) {
        #branding img {
           margin-top: 130px;

    Good Job, sacredpath! THanks. That fixes a couple of the most troubling issues. How about…

    3. I would like to make the text on it NOT wrap, but rather resize when rendered on the iPad.

    Is that possible?


    Also, two other things (so I guess it makes three):

    1. Is there a way to get rid of the small white line (bkg page showing???) from the top? something looks like it has to be moved up a pixel or two.

    2. Is there a way to decrease margin size on the ipad where blue background is showing so it is a similar size to eCatholic website?

    Previous request:

    3. I would like to make the text on it NOT wrap, but rather resize when rendered on the iPad.

    Once again thanks for your time and support. I have always had a lot of confidence in you.


    1 & 2. This is all getting dicey since there are so many factors that come into play, such as different browser and how they render differently, not to mention that users can make changes to browser preferences that can foil our attempts to control what they see, so you have to keep in mind that the changes we are making may blow up for some users and they may get a messed up view of things.

    Remove the @media rules I had given before and add these instead. The last rule below controls the spacing at left and right. It was 2em. You can adjust as desired.

    @media screen and (max-width: 855px){
    	#branding img{
    @media screen and (max-width: 768px) {
        #access a {
            padding-left: 4px !important;
            padding-right: 4px !important;
        #branding img {
            margin-top: 43px;
    @media screen and (max-width: 705px){
    	#branding img{
    @media screen and (max-width: 368px) {
        #branding img {
            margin-top: 130px;
    body {
        padding-left: 1em;
        padding-right: 1em

    3. The above 768px media query adjusts the left and right padding on the menu items so that they are closer together and at 768px (iPad portrait orientation) and above, it is all on one line – or so we think. Again, it depends on browser preferences and how different browser render things. It may very well look perfect on an iPad, but not on an Android tablet using Chrome.

    From a web designer’s standpoint, this all makes me very uncomfortable since there is so much outside our control with these changes.


    much better. All these preferences, etc. do make it challenging. This is one (and only) advantage that Print media (newspaper and magazines) has over the internet.

    Thanks for your help.


    You are very welcome, and yes the web can be challenging when it comes to formatting and such.


    I noticed that the menu problem is still not fixed. Notice how the menu goes behind the logo.


    Any help would be appreciated.


    You have z-indexes of the same value on several things in the header area.

    1. Remove the z-index from #branding, it is not needed.
    2. Change the z-index on #text-16 to 1
    3. Change the z-index on #access to 2


    sorry, that did not work. I changed no’s 1 and 3. but when I changed #text-16 to any number other than 9999 the logo disappeared.

    any other ideas?


    Hmmm, it worked for me when I posted that, but I tried it again and it isn’t working now. I’ll play with it some more and see what I can come up with.

The topic ‘Right padding of page not correct on IPAD’ is closed to new replies.