Page with responsive content has fixed width

  • Author
    Posts
  • #132456

    watchroot
    Member

    We have a page on our Maxwell themed web site hosted on wordpress.com that is not working with our theme: https://watchers.ie/secrets-cronyism/

    This page shows a scrollbar, scrolling out to a visibly empty page background (it is a big page but I’ve checked it all) when the content area drops below around 825 pixels. This is ruining the mobile friendliness for this key web site page… all other pages & all blog entries have no problem.

    There is only one fixed width element in the content area (with width= added by WordPress) though we don’t believe that to be the problem because 1) it’s only around half that width, and 2) the page still generates the scrollbar even with that element deleted from the DOM. I’ve searched our page content HTML for embedded styles that would change positioning and found nothing.

    Looking at the computed page size for all the elements in the content doesn’t show anything larger than the screen width. I have to conclude that a hidden, absolutely positioned element… something I can’t see after a long time looking around in the source tree… is appearing outside the content area to make the content 825px wide even when the screen size is smaller.

    Therefore I would like to report a possible problem with the theme as it renders content for this page. Please, we are relying on you to let us know what is causing this page to have that minimum width. This will be a high profile site once we can confirm mobile friendliness on all conditions and I’d be very happy to go on recommending this theme for similar designs.

    The blog I need help with is watchers.ie.

    #132476

    themezee
    Theme Author

    Hi there,

    Thanks so much for using Maxwell.

    The issue is not the theme itself, but some of your inserted content. It seems it was copied from some other source, because it includes a lot of div elements, which can normally not be added within the default Editor of WordPress.

    The responsive layout works fine if you hide the div-elements with this CSS code:

    div.reprint-comment {
        display: none;
    }

    That means some elements in the content break the responsive design. I have also looked at the DOM but have not found the element.

    In order to find it, you can remove all content and then re-add paragraph for paragraph to find out the responsible section.

    A faster, more drastic option would be to just hide all overflowing content with this CSS snippet:

    .type-post, .type-page {
        overflow: hidden;
    }

    You can add it on Customize > CSS.

    Best,
    Thomas

    #132657

    watchroot
    Member

    dear Thomas, the

      drastic

    approach would be to “display: none” the <div> elements in the content area, because these comments are the whole purpose of that page!

    Also you may have observed that the Custom CSS for those div classes only set font properties: they don’t create blocks or set widths or positioning. And there’s nothing about the presence or number of <div> elements that would set a larger width on the containing element unless it were somehow a side effect of the CSS for the Maxwell theme or WordPress itself.

    However we are very happy for your final recommendation, not drastic at all since there is nothing about hiding the overflow beyond the otherwise responsive content, since all it does is hide the unwanted page background that is extended by that unknown side effect. We’ve added the “overflow: hidden” rule with exactly the desired effect… thanks! :)

    #132665

    themezee
    Theme Author

    Hi again,

    The display: none for the <div> elements should only show that the issue is within the content, not the theme. It was not meant as a solution ;)

    Most likely the <div> elements are not the problem, but some content in it. Some elements in there are simply breaking the layout.

    Great to hear that overflow:hidden has worked :)

    Best,
    Thomas

The topic ‘Page with responsive content has fixed width’ is closed to new replies.