Heading text not responsive - columns responsiveness when adding padding

Hi!

The heading text isn’t responsive by default, it doesn’t resize on mobile.

Also, I need to make the text/header within a column compressed to appear in the middle of the screen so I added padding to the columns, however it looks bad on mobile. What’s the best approach to make sure things appear fine on mobile?
How do I edit padding just for mobile so that I can have things looking what I want on desktop and then make it look ok on mobile?

Thanks.

Hi there,

Thanks for writing in.

Which heading text, would you mind providing the URL that has this issue? And please provide a screenshot as well.

For the meantime, you may use the cornerstone’s responsibe text feature, or like this https://theme.co/apex/forum/t/shortcodes-responsive-text/174

Thanks!

I’ve added a secure note with the link.

check the sections with orange title “our vision - our impact” see how they look very compressed on mobile and the headlines not responsive. It’s impractical to configure each text and each headline on its own to look fine on mobile, there must be a settings to adjust the size of each element for mobile or the website development time would take forever. What’s the best solution to adjust column, headline and text sizes for different screens?

Hi there,

I see it now, it’s not responsive because you added fixed spaces. You added ah padding of 0em 7em 1em 7em in the column where your Our Impact is. Please note that adding fixed values are not responsive.

Please remove them.

Thanks!

I need to have the text almost in the middle of the screen, if I remove the padding, it expands all over the width of the column/raw. How to compress the text to make it appear in the middle of the screen without adding padding?

Hey @spi,

For your headline, I’d recommend you use the Responsive Text feature.

For the column padding, try experimenting with percentage based value for your right and left paddings. You can also use VW or VH but they are a bit advanced so you need to understand how they work.

8% looks like a nice balance.

Hope that helps.

1 Like

Thanks @christian_y the % has really helped a lot!

Regarding text, the responsive feature is really tedious and hard to make it work. I’m gonna read the VH VW tomorrow and see how it goes.

How to make the row/column/section background image display fully on mobile? check the top hero section bg image, on mobile, it shows part of it only, same problem with bg image for “what we do” and “watch video” columns.

Hi There,

This is orientation issue. Most likely, on smaller screens, the content height is higher because as the screen get smaller, content tend to stack up on top of each other (this is how responsive works by default). With longer content, background image set on the section will try to stretch to cover entire part. That is how background image work. See this thread:

After understanding how background image work, the easiest work around here is to use HIDE DURING BREAKPOINTS under Customize tab. Instead of adding the background image on section, add it on ROW. Then create 2 rows. The first one is hidden on mobile screen and the other is hidden on desktop screen. Use different background image for each ROW. For ROW that is set to show on mobile, use a vertical type of background image that will fit. Something that is longer.

Hope this helps.

Hello There,

The background image will cover the section, row or column. To better understand how the background image works, I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html

Hope this explains it.

The “responsive text” works after being created and then next day it disappears and the headline text becomes unresponsive again. I was reading the VH VW today and I wanted to try them with the headline text but these options aren’t available on there. I only see EM PX…etc.

I don’t like the way if creating 2 rows one for mobile and one for desktop, this is duplicate content, also it’s really time-consuming when you have 20+ pages to create.

Any solution for these problems please? most importantly the headline responsiveness. I see that different page builders have separate settings to edit pages for mobile without having to create duplicate content. I wish this was possible with X/PRO.

Thanks.

Hi There,

The responsive text setting is working on your site but it’s not targeting the correct element. Please update your responsive text selector to .h-responsive h1.

If you want to use vw on your font size, you can wrap it in a calc() CSS function.

e.g.
calc(4vw)

Hope it helps,
Cheers!

1 Like

Actually the responsive text setting isn’t working even if I do what you said. I create a responsive text by clicking on the gear icon and then that responsive text setting disappear in a day or sometimes immediately. Is that a bug ?

Hi There,

I never encounter disappearing responsive text settings and there is no any kind of that bug on our issue tracker. Maybe a plugin is causing it (especially a caching plugin). Please do a test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If that did not work, please provide us login credentials in a secure note so we can take a closer look.

Let us know how it goes,
Cheers!

Hi,

I’ll try doing some experiments to solve this issue. Will come back here in case I can’t find solutions.

Thanks.

Sure thing, let us know if you find anything.

Happy Holidays, Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.