Right side of full-width text blocks 'eaten' on mobile version of website

[hovivian]

Hi, Swift Ideas. I’m having the issue that the full-width text blocks on the mobile version of my website have their right side ‘eaten’. They look like they’re extending beyond the width of the screen. How can I solve this? Thank you.

[Mohammad – SUPPORT]

Hi,
Please attach marked screenshot to indicate the issue.
Thanks
Mohammad

[hovivian]

Attached is a screenshot of the issue. Thanks!

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

@media screen and (min-width: 767px) {
  .wpb_call_text h2{
   font-size: 27px !important;
   width: 96% !important;
   line-height: 35px !important;
   }
}

Thanks
Mohammad

[hovivian]

Thanks for the quick reply! I’ve added this to the theme but it doesn’t work. The issue’s still there and actually it’s the content of the text blocks that has the issue, making the larger texts, smaller texts and button inside all shifting to the right.

[Mohammad – SUPPORT]

Hi,
Please insert this code at Admin -> Theme Options -> Custom CSS. And check after clear the cache.
Thanks
Mohammad

[hovivian]

Sure. I’ve inserted the code to Custom CSS in General Options in Theme Options. I’ve also tried clearing cache in my desktop browser and phone browser and tested the website with Chrome dev tools and phone browser, but the results are the same. What else can I do? Thanks!

[Mohammad – SUPPORT]

Hi,
Please remove my last code and use this new code:-

@media screen and (max-width: 767px) {
  .wpb_call_text h2{
   font-size: 27px !important;
   width: 96% !important;
   line-height: 35px !important;
   }
}

There was one little mistake in code.

Thanks
Mohammad

[hovivian]

Lovely! They’re perfect now after further adjustments. Thank you Swift Ideas.

[Kyle – SUPPORT]

Great! Thanks Mohammad

– Kyle

[aaustin69]

Hi, I am also having this same issue in the full width text box when using my mobile phone (see attached pic). I tried the new code given above but this does not seem to work. In case it helps, I am using ‘Heading 2’ for the title text in the box, and ‘Heading 4’ for the smaller text.

The issue is only happening when I am using an Alt background in the full width text box. With no Alt background there is no problem.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please provide always specific page url with issue to check and resolve.
Thanks
Mohammad

[aaustin69]

This reply has been marked as private.

[aaustin69]

Hi Mohammad,

Please disregard my last post. I was able to resolve the issue. David with your team recently helped me center the testimonials slider text that I was having the same issue with, so I linked the extra class name in the full width text box to the same css code David gave me for the slider. Issue resolved.

[Mohammad – SUPPORT]

Hi,
I am glad that your issues resolved.
Thanks
Mohammad