WordPress.org

Support

Support » Themes and Templates » [Resolved] Twenty Thirteen Margin on Mobile Devices

[Resolved] Twenty Thirteen Margin on Mobile Devices

  • I am having a little issue with the width of my site not being fully responsive and appearing with a weird right margin on mobile devices.
    I have made sure to resize all my elements to fit the iPhone screen for example, and even without any content on the main body of the page, there is a 20px margin to the right of the whole page so it doesn’t fit the whole space properly.

    Can somebody offer any advise?
    I am using a child theme of twenty thirteen.
    This is the site’s name, and specifically the page without any content whatsoever.
    I only have edited the navigation, header and footer widgets.

    http://www.jennshomes.com/properties/in-escrow/

    It is the weirdest thing…Do I need to include a @media query on my child theme’s styles?

    Thank you!

    Guillermo Montero

Viewing 15 replies - 1 through 15 (of 20 total)
  • WPyogi

    @wpyogi

    Forum Moderator

    @media query on my child theme’s styles?

    If you are modifying CSS that’s in a media query, probably.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Don’t put padding (right/ left) on things in combination with a 100% – Try resolving that issue first.

    Thank you WPyogi for just making me feel inferior to you and not helping at all.
    Can anyone else help with this issue?

    I’m sure I’ve done something I shouldn’t have done, but obviously, I am not very experienced and need some help.

    Thank you

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    That wasn’t nice, perhaps I’ll not help afterall.

    I thought his feedback sounded condescending.
    I apologize if it wasn’t intended to be. I read it and it doesn’t offer any solutions. Does it?

    Thank you

    WPyogi

    @wpyogi

    Forum Moderator

    I’m sorry it sounded that way – wasn’t my intention. However, I’d just deleted a duplicate thread of yours (which is specifically against the forum rules) – and answered this one so that it would not stay further down the list.

    Yes sir…I noticed you did. I was trying to create a new thread with a better title to maybe get to the bottom of the issue. Then I tried to delete this thread but it wouldn’t let me and I got stuck with 2 of the same which I know is against the rules. I apologize, once it was done, I couldn’t go back…

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Don’t put padding (right/ left) on things in combination with a 100%

    Sorry, I meant to say “with a 100% width”.

    Yeah, I figured 🙂
    That didn’t work, however. Trying to go through all my code again.
    I don’t understand why this is happening. Specially to a page with no information on it. I was reading that using images with a set width could cause this problem, or that certain short codes would also trigger this mysterious margin, but I have nothing on this page…

    The header, navigation bar and footer all seem to be responsive.
    Something about the entry.content, page.content or site.info classes not respecting the full responsive aspect of my child theme and I still can’t figure it out

    Thank you for the help

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    I found it had something to do with the footer.

    Andrew
    Care to share your findings?
    How can I fix what I did wrong? I messed with the footer widgets because it is the only way to achieve that look on a computer screen. I definitely dont understand the Masonry footer widget deal… Can I include some code using media query to display on smaller devices or should I revert the changes made to the footer and the widgets?
    Thanks again

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    I opened your site in Google Chrome & right clicked on the page (anywhere) and selected “Inspect element”.

    I then started deleting HTML elements in the inspector toolbar. The horizontal scrollbar disappeared at a mobile phone size when I deleted the footer.

    WPyogi

    @wpyogi

    Forum Moderator

    The width here seems to be problematic:

    .site-footer .widget {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        color: #FFFFFF;
        float: left;
        height: 100px;
        margin-right: 20px;
        width: 236px;
    }

    Could it be that my width above is slightly smaller than the widths set up in the widget-area masonry? (Only by 12 px)
    I tried adjusting my widget widths to fit the widths of the class: widget-area masonry but the issue still persists.
    I shouldn’t have to delete the whole footer to be able to display this site at full width on mobile devices.
    Still can’t figure it out 🙁

    After trying some more, it seems to be something in the main body of the page template… I have tried deleting the paddings and margins on all and any element on the body and I still get that empty space on the right of the window.
    I tested it on my contact page with a responsive google map plugin and when I get rid of the margins and paddings, the map appears perfectly centered on the body of my page, but then I still have that empty space to the right. Almost like I can’t control this using simple css.

    Does anybody else have this problem?
    Guillermo

Viewing 15 replies - 1 through 15 (of 20 total)
  • The topic ‘[Resolved] Twenty Thirteen Margin on Mobile Devices’ is closed to new replies.