[Resolved] Issue with mobile version of website

  • Author
    Posts
  • #3538

    serapkaga
    Participant

    Hi,

    The menu for my website doesn’t reformat to conform to a mobile device. It stays in the desktop menu format. Can you please advise on how to address this?

    #3539

    Andrew Misplon
    Keymaster

    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 πŸ™‚

    #3545

    Andrew Misplon
    Keymaster

    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.

    #3552

    serapkaga
    Participant

    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!

    #3555

    Andrew Misplon
    Keymaster

    Glad to hear you’ve been making progress.

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

    #3566

    serapkaga
    Participant

    It’s orthodynamics.ca

    Thanks!

    #3567

    Andrew Misplon
    Keymaster

    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.

    #3570

    serapkaga
    Participant

    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?

    #3571

    Andrew Misplon
    Keymaster

    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%;
    }
    #3576

    serapkaga
    Participant

    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!

    #3578

    Andrew Misplon
    Keymaster

    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;
        }
    }
    #3582

    serapkaga
    Participant

    It worked perfectly! Thank you so much!

    #3637

    Andrew Misplon
    Keymaster

    Super πŸ™‚ Glad to hear that did the trick.

    #5769

    serapkaga
    Participant

    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!

    #5770

    Andrew Misplon
    Keymaster

    Hi πŸ™‚

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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

Scroll to top