I’ve added the text I wanted, which is about 8 lines thinking it would be too big for the image. However, having ticked on ‘Use FitText’ it fits very nicely on a desktop display. However, when I start to reduce the screen size, going to mobile the parameters in place (margins, padding) has affected the text on the image and the text is not reducing in size. Can someone have a look and let me know if there is a workaround or if something could be done about it. Thanks.
http://ventamsystems.net/wp/ventilation-systems/restaurant-ventilation-systems/
Any assistance at all?
Hi Jonathan,
Unfortunately, we sometimes miss threads and this seems to have been what happened here. Sorry mate. :(
This is happening due to a large amount of vertical padding (340px total – which is very high) that you’re using. You should switch the padding from a static PX to a responsive percentage based unit of measurement for the padding. This will allow for the padding to be responsive.
Alternatively (or in addition), I would (also) suggest changing the contents of this slider to a header and enabling FitText (it’s at the bottom of the hero widget settings).
Hi Alex,
Many thanks for your reply, that’s great! I managed to change the padding to a percentage, however, I’m not sure what to do with the ‘height’ and the ‘heading size’. This is what I’ve put, but I’m not sure if it’s right:
Height 10%
Top and bottom padding 10%
Extra top padding 0px
Side padding 4%
Maximum container width 1280px
Heading size 65px
Use FitText TICKED
Text size BLANK
Secondly, I’ve changed the header to h6 with the following css:
Thanks. All the best, Jon.
h6 style=”text-align: center; font-family: ‘Open Sans’; font-weight: normal; font-size: 28px; line-height: 48px;”
Well, this is the actual CSS style ^
Hi Jonathan,
Ideally, don’t use height. It’s only really to be used in situations where you have to use it.
The heading size is to allow you to set the default font-size for the headers. It’s basically an easier way of setting the header font-size without using CSS like you’ve done.
Hi Alex,
Ok, I’ve removed the height and I tried to set the heading size and remove the font-size from the CSS, but it didn’t work and the text got very small. So I’ve kept the font-size in the CSS and made the heading size blank. Is that ok? Thank you.
Hi Jonathan,
FitText likely felt that the text needed to be that small for whatever reason – likely due to padding present.
Regardless, that’s fine mate – as long as you’re happy with the result.
Hi Alex,
Brill! Thanks a lot.
All the best.