Harmonic mobile version layout problem

  • Unknown's avatar
    maellechevallier · Member ·

    Hello,

    I have a small problem concerning the layout of the Harmonic theme on mobile. As an illustrator, I use my website as a portfolio, so it’s very important that the image on the front page can be seen correctly. It’s completely fine on a computer, but then on the mobile version, the homepage image is strangely cropped horizontally rather than vertically (if that make sense).
    I know it’s supposed to be different because of the preview on the customize mode. I tried different image formats as well but it stays as a weird banner at the top of the homepage.
    Can someone help me with that ?
    Here’s the link : maellechevallier.com

    Thank you!

    Maëlle

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    siobhyb · Member ·

    Hi Maëlle!

    Harmonic is designed to adapt based on the size of the screen it’s being viewed on and, as you’ve experienced, it will crop images so that they fit well on all devices. As such, background images that are purely decorative or abstract work best. Images that can’t handle any kind of cropping aren’t generally recommended.

    That said, you could potentially use some custom CSS to override the default size of your top image on smaller devices.

    In case you’re not familiar with CSS: It’s a coding language that’s used across the web to define the appearance of sites. Here at WordPress.com, it’s possible to add custom CSS to change parts of a theme’s default design.

    Try adding the following to the CSS panel of your site’s Customizer and letting me know it goes:

    @media only screen and (max-width: 1024px) {
    #slide-1 {
        height: auto !important;
    }

    #slide-1 .bcg {
        background-size: contain;
        background-repeat: no-repeat;
    }

    #slide-1 #header-branding {
        padding: 40% 0;
    }
}

    Thanks!

  • Unknown's avatar
    maellechevallier · Member ·

    Hi,

    Thank you for your quick reply! It worked perfectly, the mobile version now displays the image in full.
    Thank you so much for your help!

    Maëlle

  • Unknown's avatar
    siobhyb · Member ·

    You’re most welcome! You know where to find us if extra questions come up, too. :)

  • The topic ‘Harmonic mobile version layout problem’ is closed to new replies.