Change Sizing of Banner on mobile vs desktop - dawn theme

Store Design
,
1

Hi I would like to change the size of my banner on the mobile version. To give an example, this is how I want it to look on desktop.

desktop.png
desktop.png1905×988 578 KB

But on mobile I want the banner to be much smaller like so:

mobile.png
mobile.png320×686 173 KB

Thanks!

2

If you need to upload mobile images in the background, you may need to configure an upload function.

3

Hello @SamTheMaker

Could you please share your store url ( with pass if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

4

Hey sure, my url is yumeanime.co and the password is animegang

5

Hello @SamTheMaker

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your section-image-banner.css file and paste the following code below:

@media screen and (max-width: 749px){
  .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 20rem;
  }
}

Let us know how it works for you.
Best regards,
GemPages Support Team

6

Hey that worked! How do I make the shop now button smaller on mobile too now? Thanks!