Looking for help adapting an image to resize based on screen size (trying to make it mobile friendly

jassoul
New Member
5 0 0

The code is the header of the collection page on prestige theme.

I'd like to make it so that it resizes based on the window's size

Current code: 

 <div class="PageHeader__ImageWrapper Image--lazyLoad Image--fadeIn {% if section.settings.apply_overlay %}Image--contrast{% endif %}"
               data-optimumx="1.2"
               data-bgset="{{ collection.image | img_url: 'x600' }} 600w, {{ collection.image | img_url: '800x' }} 800w, {{ collection.image | img_url: '1200x' }} 1200w, {{ collection.image | img_url: '1400x' }} 1400w, {{ collection.image | img_url: '1600x' }} 1600w">
          </div>

 

Here is the CSS associated with it:

@supports (--css: variables) {
  .PageHeader__ImageWrapper {
    top: calc(-1 * 0px - 0px * 0);
    top: calc(-1 * var(--announcement-bar-height, 0px) - var(--header-height, 0px) * var(--use-unsticky-header, 0));
    height: calc(100% + 0px + 0px * 0);
    height: calc(100% + var(--announcement-bar-height, 0px) + var(--header-height, 0px) * var(--use-unsticky-header, 0));
  }
}

 

Thank you very much in advance for the help.

0 Likes