Adjust banner on mobile

  • [email protected]

    (@jensjsconsultdk)


    6 months, 2 weeks ago

    Hi

    On the front page of this site, I have a banner with a photo, but on mobile the photo is not really visible. Do you have a trick to make this work better on mobile?

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Amjad Ali

    (@amjadr360)

    6 months, 1 week ago

    Hi Jens,

    Right now, there’s no built-in option in the Site Editor to control how block looks on mobile.
    However, we can work around this by creating two hero sections—one for desktop and one for mobile—and using a bit of custom CSS to show/hide them depending on screen size.

    What to do

    1. Duplicate your hero section so you have two versions:
      • Give the desktop one the class: hero-desktop (Block → Advanced → Additional CSS class)
      • Give the mobile one the class: hero-mobile (Block → Advanced → Additional CSS class)
      • Adjust the mobile version so it’s cropped and styled how you want it to look on smaller screens.
    2. Add this CSS (Appearance → Editor → Styles → Additional CSS.
    /* Mobile-first: show mobile hero, hide desktop hero */
    .hero-desktop { display: none; }
    .hero-mobile { display: block; }

    /* Switch at tablet/desktop sizes */
    @media (min-width: 781px) {
      .hero-desktop { display: block; }
      .hero-mobile { display: none; }
    }

    That’s it—on phones you’ll see the mobile-optimized hero header.

Viewing 1 replies (of 1 total)

The topic ‘Adjust banner on mobile’ is closed to new replies.