-
Posts
-
Hi, I’m using the Special Heading within a Color Section. It’s set to H3-Heading Style Modern (centered). The title is “Accommodations” and it looks great on desktop. On mobile it only shows “Accommodation” with the s being cut off on the right of the screen and there being space on the left next to the A so the text isn’t actually centered. How can I fix this?
Hey sjahan,
Thanks for the login details. The front end looks to be password protected, but you can set the responsive font sizes under Enfold->General Styling->Typography. Please have a look there first of all.
Best regards,
RikardHi, I tried changing that to a very small font to see if it did anything and it didn’t. I did clear out my cache and try an incognito window, but there wasn’t any difference. I’ve put the front end password below.
Hi,
Thanks for the update. Did you try setting the font size for smaller screen sizes in the element itself? You can set that under Styling->Font Sizes.
Best regards,
RikardI can decrease the font size for the element, but I’d prefer to keep the size as is. The issue is that the text isn’t centered because if the font size stays as is and is too big for the screen shouldn’t it be fully centered and then get cut off on both the left and right?
I decreased the font size to 55px and the word Accommodations fully shows up now, but it’s still not centered. It’s more to the right.
Hi sjahan,
The reason why it does not look centered is because the maximum width of the container/area is 85%, in order to make it behave in a manner you mentioned, the container/area must be set to have width and max-width of 100%, please try to add this CSS code in Quick CSS:
@media only screen and (max-width:479px) { .responsive #top #wrap_all #accommodations .container { width: 100%; max-width: 100%; } }Best regards,
Nikko
- The topic ‘Special Heading on Mobile Not Centered’ is closed to new replies.