Incorrect columns width on mobile

  • Resolved derenc

    (@derenc)


    5 years, 1 month ago

    Hello is there a quick way to display all columns correctly on mobile without styling each one individually? I have a lot of multi column sections on the page and when viewed on mobile they do stack vertically correctly, but the width is way too large going way outside of display left and right and thus not seeing a lot of text in these columns.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter derenc

    (@derenc)

    I solved the problem:

    every column section I set first to Full Width and then back to Wide Width. Now it shows properly.

    All column sections were already set to Wide Width in the first place, but it looks like all columns somehow lost this setting.

    It might be useful if we leave this thread here to help others in case they got the same problem.

    I am just discovering this problem myself on my test site (test.financeoverfifty.com). I built the site with Elementor using the Neve theme. My single post template applies perfectly to the most current post, but all previous posts are going outside the right margin and off screen. The Neve default settings are messing with the template in some way. Can you explain how and where I go to set to Full Width then Wide Width? I’ve tried going into customize settings for Neve, choosing layout, then choosing Container. But the only options are Contained and Full Width

    Thread Starter derenc

    (@derenc)

    Hi wnsham96, my problem was with multi-columns sections and the problem occured on mobile only (only when page is viewed on phone) otherwise my site looked good on computer monitor.

    But I see you have different problems, something is wrong with your sidebar.

    Anyway I was talking about Sections on page (Gutenberg blocks. I’m not using Elementor). You see the sections when editing a page (Home page in my case) – each of those sections can be set independently like this: https://pasteboard.co/IArrKwj.jpg.

    • This reply was modified 5 years, 1 month ago by derenc.
    Thread Starter derenc

    (@derenc)

    Now that I looked again you might have a similar problem with width settings conflicting somewhere. It’s like the container is set to Wide but the sidebar is acting like it was contained.

    The col – widths are in percent + there is a padding of 15px (right and left) for each col.
    But the col – widths should deduct the 30px -> see CSS Box Model. This is definitely a css error in the theme generally.

    eg:
    .col-8 {flex: 0 0 calc(66.66666666667% – 30px);
    max-width: calc(66.66666666667% – 30px);
    }

    • This reply was modified 4 years, 8 months ago by hunters-best.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Incorrect columns width on mobile’ is closed to new replies.