- This topic has 8 replies, 2 voices, and was last updated 6 years, 8 months ago by .
Integral Pro – responsive text
You must be logged in to reply to this topic.
I cannot work out how to make the h1 text in the Welcome section responsive for mobiles. I have tried some of the css text given in other replies on this forum but nothing has worked. Please help. Thanks, Annie
Hello Annie,
It is already responsive, however the issue may be the amount of text you have or long words which are not breaking to the next line.
Can you send me a link to your website so I can have a look?
Hi – website is wwww.eastcottdrinks.co.uk. It is ‘Eastcott’ which is the problem – I guess too long? I would like it to shrink so that it fits onto one line, on a mobile view. Thanks
Hello Annie,
In your Admin Dashboard go to the Custom CSS field of the Custom Code section in Integral Options panel and enter the following CSS code,
@media (max-width: 767px)
.h1, .h2, .h3, h1, h2, h3, h4 {
word-wrap: none;
}
That should do what you need.
Hi – this didn’t quite work but switching ‘none’ for ‘unset’ seemed to >
@media (max-width: 767px) {.h1, .h2, .h3, h1, h2, h3, h4 {word-wrap: unset;}
I hope this is OK?
Hi Hans – I’ve realised that on very small screens the above solution doesn’t work either. with:
{word-wrap:none;} nothing happened, with {word-wrap:unset;} the words don’t wrap but some of the text disappears
Hello Annie,
In that case you will need to lower the size of the text for smaller screens sizes.
Try,
@media (max-width: 480px) {
.hero h1 {font-size: 3.429rem !important;}
.hero h2 {font-size: 2rem !important;}
}
You can lower the font size to what works for you.
You must be logged in to reply to this topic.