I’m having a little trouble with some basic styling. I’ve changed the colour of the header title with some basic styling;
[heading subtitle="Lorem ipsum dolor sit amet, consectetur adipisicing elit!"] <span style='color:#27ccc0'>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span> [/heading]
It renders exactly as you'd expect it would on a desktop and any smaller screen all the way to an iPad Mini. Once it hits the phone however the text that has the colour change disappears. I’m at a loss as to why this is happening.
I use different header colours depending on the content so a single global CSS change isn’t really what I’m after. Perhaps using a class might fix this issue rather than inline styling? Not sure how to do that with short codes though. I’m totally lost why the iPhone is reacting this way.
From the address supplied, you can see the issue on the 'Services' page.
Hello! While the code fixed the issue with the header/subtitle mobile issue, it has an unfortunate side effect. You can see what it does with the social icons in the screenshot attached.
If there's no way around it - no worries. I tried wrapping the above code into @media only... but that didn't work either.
I’m having a little trouble with some basic styling. I’ve changed the colour of the header title with some basic styling;
It renders exactly as you'd expect it would on a desktop and any smaller screen all the way to an iPad Mini. Once it hits the phone however the text that has the colour change disappears. I’m at a loss as to why this is happening.
I use different header colours depending on the content so a single global CSS change isn’t really what I’m after. Perhaps using a class might fix this issue rather than inline styling? Not sure how to do that with short codes though. I’m totally lost why the iPhone is reacting this way.
From the address supplied, you can see the issue on the 'Services' page.
Cheers!
I would like to know this also.
Hey Guys!
Just add this into your custom css box to keep the titles displaying correctly on mobile:
body .row .col.section-title span { display: block!important; }Cheers :)
Brilliant! Thank you very much!
Hello! While the code fixed the issue with the header/subtitle mobile issue, it has an unfortunate side effect. You can see what it does with the social icons in the screenshot attached.
If there's no way around it - no worries. I tried wrapping the above code into @media only... but that didn't work either.
Hey again!
Try changing it to this:
body .row .col.section-title.text-align-center span { display: block!important; }:)
BINGO!! Thanks again for your time!