How to adjust image banner size for mobile on Dawn 2.0 theme?

Store Design
1

When customizing my theme on Dawn 2.0 my image banner has way to much height on mobile. On desktop the length and height or fine, but when on mobile it turns into a 4x4 imagine making it a square. I would like to keep the same width but change the height of the imagine on mobile.

2

Hi @TheUnusualNest ,

Recommend you create another image and image banner section for a mobile device because the screen width of mobile and desktop are different.

3

Hello @TheUnusualNest ,

You can follow these steps:

Go to online Store → Theme → Actions → Edit code

Ref- step 1.png
Ref- step 1.png1434×819 104 KB

Go to Assets → base.css → add the following code at the bottom of page:

@media only screen and (max-width: 767px) {
  .hero__image-wrapper {
    height: 200px;
  }
}

Save and preview.

Hope this can help.

Ali Reviews team.

4

how would I do this? @Dan-From-Ryviu

5

Go to your store admin > Sale channels > Online store > Themes > Customize, click +Add section and add another banner section and add images that you optimize for mobile.

After that, you can add CSS code to make this section appear on mobile only.

6

Thanks, do you happen to know that the code would be to do so?