- Posts
When I try to customize my site (Venetian BoldGrid theme) I am getting a lot of overflow outside of the viewable area on mobile. My website shouldn’t make people scroll to see the entire text on the right. How do I fix this?
Hi Ashley-
I took a look at the website you sent privately, and it looks like there’s two main things causing this issue: the background image and the long call-to-action text that doesn’t have any spaces.
In order to fix this, navigate to Customize > Advanced > Custom JS & CSS, and paste the following code into your Custom Theme CSS section:
body.custom-background { background-position: center top !important; } @media (max-width: 991px) { body.custom-background { background-size: cover; max-height: 100vh; } .call-to-action h2 { font-size: 10vw !important; } }This will keep your background image centered, and start scaling down the font-size of your call-to-action text when the screen size won’t fit that text any more.
Thanks for the info, Jesse. The photo seems to have been fixed to fit the screen, but my heading (h2) “AshD_Photography” text is still going beyond the width of the screen. Any tips to fix this?
I’ve already put the following in my Simple CSS section
@media all and (max-width: 800px) {
.hero-header {
font-size: 15px;
}
}and
AshD_Photography
in the html
Hi Ashley-
It looks like you made some significant changes since I checked out the site last time. When I first looked at it, this code should have gotten that large text:
.call-to-action h2 { font-size: 10vw !important; }Now I’m not seeing it any more on your site, so I can’t say why the selector .hero-header isn’t working for you.
- The topic ‘Mobile Customization’ is closed to new replies.
