Paragraphs on mobile compressed

Hi @eriksd,

Thank you for reaching out to us.

As checked, you’re currently having these lines of CSS code in your child theme’s style.css.

p {
    padding-left: 150px;
    padding-right: 150px;
}

That’s why you got narrower paragraph on mobile screen.

I’d recommend using the Columns block to have more left/right spaces on particular text on your page/post.

Hope that helps.

Regards,
Kharis

Hi @eriksd,

Thank you for getting back.

You might try using three columns block and insert the text in the second column.

Or, try controlling styles on a specific block by assigning a class name when the block is selected. For example: my-text

https://drive.google.com/file/d/115JHnCUC9cs1FLLHE5Q6O0Sf2t2P6eR_/view?usp=sharing

So we can use CSS media query and apply it to Additional CSS (under Dashboard > Customize). For example:

@media only screen and (min-width: 768px) {
  .my-text {
    padding-left: 150px;
    padding-right: 150px;
  }
}

Hope that helps.

Regards,
Kharis

On mobile the header is shorter that body, I tried to use hide the overflow-x on mobile, but with no success.

Can you provide a screenshot with some annotations showing the exact location of the issue?

Regards,
Kharis

Hi @eriksd,

Thank you for sharing the screenshot.

I checked your homepage and the issue didn’t appear.

Seems likely the top page as seen on your screenshot doesn’t present on your homepage.

Does the issue present only on a particular page? If so, can you link it here?

Regards,
Kharis

Hi @eriksd,

Thank you for extra details along with the link.

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 991px) {

  .content-wrapper > .row {
    margin-left: 0;
    margin-right: 0;
  }
  
}

Hope that helps.

Regards,
Kharis

@eriksd,

Thank you for getting back.

Which web browser are you running? Is it the latest version?

Regards,
Kharis

Hi @eriksd,

Thank you for getting back along with the requested information.

As checked with my web browser’s source code viewer, the suggested CSS code hasn’t ben applied. Perhaps it is due to the cache plugin is blocking the recent changes from appearing in the front end. Please try clearing/flushing cache and run your test. You may also need to flush your web browser’s cache/history as well and restarting it.

Regards,
Kharis

You’re welcome @eriksd!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis