WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
[resolved] Twenty Thirteen Margin on Mobile Devices (21 posts)

  1. MontyVision
    Member
    Posted 8 months ago #

    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

  2. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    @media query on my child theme's styles?

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

  3. Andrew
    Forum Moderator
    Posted 8 months ago #

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

  4. MontyVision
    Member
    Posted 8 months ago #

    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

  5. Andrew
    Forum Moderator
    Posted 8 months ago #

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

  6. MontyVision
    Member
    Posted 8 months ago #

    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

  7. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    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.

  8. MontyVision
    Member
    Posted 8 months ago #

    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...

  9. Andrew
    Forum Moderator
    Posted 8 months ago #

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

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

  10. MontyVision
    Member
    Posted 8 months ago #

    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

  11. Andrew
    Forum Moderator
    Posted 8 months ago #

    I found it had something to do with the footer.

  12. MontyVision
    Member
    Posted 8 months ago #

    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

  13. Andrew
    Forum Moderator
    Posted 8 months ago #

    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.

  14. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    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;
    }
  15. MontyVision
    Member
    Posted 8 months ago #

    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 :(

  16. MontyVision
    Member
    Posted 8 months ago #

    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

  17. Andrew
    Forum Moderator
    Posted 8 months ago #

    Did you sort out your footer yet?
    Add this to your Child Theme style.css file, at the bottom:

    .site-info,
    .site-footer .widget-area {
     width: auto;
    }
  18. Andrew
    Forum Moderator
    Posted 8 months ago #

    If you're looking to resolve this issue on a mobile size smaller than an iPhone then you need to remove the padding and margins in the footer.

    I'm not sure how much more we can hint that there's something wrong in your footer, so hopefully you can resolve this.

  19. MontyVision
    Member
    Posted 8 months ago #

    Thank you Andrew.
    You're right and sorry I dragged it for so long.

    Guillermo

  20. loudivers
    Member
    Posted 7 months ago #

    Hello, I am having the same problem. Everything was working fine on local server once I uploaded everything and made site live I started having this issue. Here is the site - http://wdlandscapemanagement.com/
    any help would be kindly appreciated!

  21. Andrew
    Forum Moderator
    Posted 7 months ago #

    You're not having the same problem, please continue your thread.

Reply

You must log in to post.

About this Theme

About this Topic