Quark: different hero-images for different screen-sizes

Support Themes & Styling
1

I installed a Quark One-Page Site Skeleton, Maybe this will be our new band website.
In order for the band to be fully represented on the Hero image on both large, horizontally oriented displays and small, vertically oriented displays, a separate image would have to be inserted for small screens.

horizontal
horizontal1530×991 113 KB

vertical
vertical325×611 104 KB

I’ve tried in CSS with the @media tag, but have failed so far. I don’t see which class the background-image belongs to.

Maybe someone can find a solution?

2

I have found the following solution which is sufficient for my needs. Surely it could be done more elegantly.

  1. templates/partials/hero.html.twig
    Delete in line 1:
    {% if hero_image %}style=“background-image: url(‘{{ hero_image.url }}’);”{% endif %}
  2. css/custom.css
    Add:
    section.section.hero {
    background-image: url(‘/0eg/user/pages/01.home/01._hero/eghorizontal.jpg’);
    }
    @media (max-width: 840px) {
    section.section.hero {
    background-image: url(“/0eg/user/pages/01.home/01._hero/egvertical.jpg”);
    }
    }

I still need to get closer to the optimal breakpoint.

3

I have the exact same issue but I’m using modular pages. This post was a huge help!

These are the changes I made to have different hero images for a modular page

I had to edit the hero.html.twig in templates/modules and remove {% set hero_image = page.header.hero_image ? page.media[page.header.hero_image] : page.media.images|first %}

Then the css class for modular is .modular-hero.hero {

2 Likes