Content Off Screen on Mobile

[kjroelke]

Building a custom post single and the content goes offscreen on mobile.

I’m not doing anything really fancy, but can’t figure out what setting is making the responsive layout break.

It’s just a section with a row & column, a header and the “The Content” pre-built dynamic content element.

[ruenel]

Hello KJ Roelke,

Thanks for posting in! You seem to have set a width in your row or column settings. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[kjroelke]

Yes, I would love the help.

It is the “Job Listing” single layout (currently unassigned). The section, row and columns all have the initial width settings (auto, 0px min, no maximum) and the only thing that sort of fixes the issue is turning off flexbox on the column (however, I want flexbox on and flexbox wrap should fix this anyways…).

I’m also using responsive font units in both the layout builder and theme options, so I don’t really understand why this is happening.

[ruenel]

Hello KJ Roelke,

In your column settings, you must disable the “Wrap” option in the Flexbox setting.

You may also need to adjust the Root font size (Pro > Theme Option > Typography) on smaller screens so that the headline will fit in the content area.

Kindly let us know how it goes.

[kjroelke]

1. Why does disabling wrap (literally the thing that I want to happen) fix the wrap issue? I want the headers to wrap appropriately, and turning this feature off doesn’t fix the issue, it only sort of changes it.

2. Because I’m using the dynamic “The Content” element, I don’t have control over how Body/Heading text sizes. I’d like to make the body font for mobile devices at least 14 px (XS devices set to 10px, body font size 1.4rem). There is no way to change heading font sizes.

Also, after messing around with the layout (and leaving the issue unresolved), please revert it back to its unassigned state.

[ruenel]

Hello KJ Roelke,

1.) If you need the headings and the paragraph to wrap, you can set it in the headline element settings:
. With The Content element, it is different because it does not have element setting options. What you can do is to go to column settings and then find the “Customize” tab for you to insert an inline element CSS:

$el.x-col .x-the-content {
  flex-wrap: wrap;
}

Column > Customize settings;

The <h2> is still too big for smaller screens. You may need to change it to h3 or h4.

2.) The dynamic “The Content” element will be using the global font settings from the Pro > Theme Options > Typography > Body and Content setting.

Best Regards.