The Content element too wide on mobile view

[Raychill]

Created a single layout template for posts. Posts are created in Wordpress 6.9 default Gutenberg blocks. Using “Starter” as the stack in the settings.

On mobile size (breakpoint set at 480px) the Content element is too wide so the text overflows on both sides. Every other viewport size is fine. Every other element on the post is fine and resizes to fit into the mobile view, except “the content” element.

Posts are unreadable on mobile because of the overhang.

The Content element doesn’t have settings in the builder, but even when setting the container element that holds The Content element to a max width or using padding, the Content (the blog post text and anything from Gutenberg) overhangs the screen on both sides.

Not sure what to do to get the post to resize the width smaller for mobile.

Thanks in advance!

[prakash_s]

Hello @Raychill,

Thanks for writing to us.

In order to help you with your concerns, we need to check your settings. I would request please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin-level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[ruenel]

Hello Rachel,

The issue is caused by the Article DIV element with a maximum width of 900 pixels. With the Responsive Element Styling, this must be set to 100% to get your issue resolved.

And then a custom CSS would be needed to make sure that the contents will be contained within the DIV element.

.x-div .x-the-content.entry-content {
  max-width: 100%;
}

Check your post layout now.