Issue with mobile version of website

Hi serapkaga

Hopefully, you get the notifications for our new topic, apologies for the hassle before.

The challenge for mobile is that your background image is currently set to cover, ideally, it needs to be set to 100%, you’d then need to add no-repeat to the background. The way that you’re expanding the row to accommodate the image isn’t responsive, so once we change the background from cover to 100% your padding stays at 600px no matter the resolution so as the image shrinks, the space the image container takes up will stay the same. Phew, hope you’re still with me. Summary, you’d need to re-look at the way you’re handling that first image.

Have you tried inserting your image directly into the full width stretched row via the Visual Editor vs having it as a background as you currently do? In addition, try removing the span tag. Thanks 🙂

Another option would be to use Meta Slider, create a new slider and insert a single slide. Then, edit the page in question and in the right column meta box called Page Slider, choose your new slider, you can also enable the stretch setting from that meta box. That’ll insert a full-width slider that’s right under the header. Meta Slider handles the responsive work really well so it’s an option worth checking out.

Thanks, I changed it to the meta slider and that worked well.

Just another thing about the font sizes- the desktop version looks good, but the font sizes in the mobile version look huge. Particularly on the homepage, the business name is squished and so are the headings (welcome to…).
Is there any way for the mobile version fonts to be smaller so they fit the screen properly?

Thank you for your help!

Glad to hear you’ve been making progress.

Sorry, I’ve lost your URL, please, could you send it again? Thanks.

It’s orthodynamics.ca

Thanks!

Thanks. Try adding the following to Appearance > Custom CSS:

@media (max-width: 480px) {
    .resp h1 {
        font-size: 37px;
    }
}

@media (max-width: 480px) {
    .resp h2 {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .resp h5 {
        font-size: 22px;
    }
}

Adjust the font sizes as required, those are the existing ones. You can also change 480 to 680 or higher if you want the change to apply sooner.

Hi again!

It worked really well- thanks! I was wondering if there was a similar way of reformatting the main Header (the header-font in Theme Typography) so that the business names fits all on the same line?

Super, glad to hear you’re making progress. Please, try adding the following to Custom CSS:

/* Header */
.site-header .site-branding-container {
    max-width: 40%;
}

.main-navigation {
    max-width: 60%;
}

Hi Andrew,
I added in the custom CSS but it doesn’t appear to have changed anything. On my phone the ‘inc’ is still beneath the company name.
Is there a CSS to change the font size of the mobile heading version but keep the desktop version the same?
Thank you!

Sure 🙂 Try additionally adding the following rule to Custom CSS:

@media (max-width: 480px) {
    .resp .site-header .site-branding h1.site-title {
        font-size: 1.7em;
    }
}

It worked perfectly! Thank you so much!

Super 🙂 Glad to hear that did the trick.

Hi Andrew,

I’m sorry to bother you again, but I have a quick question and wasn’t sure if I should start a new question thread or not.

What is the font that is used in the Puro theme?

Thank you!

Hi 🙂

For Ultra, we used Lato and for Puro we used Helvetica Neue. If you need any further help, please, let me know 🙂