Banner Height Dawn version 11.0

Shopify Discussion
,
1

Hi all, Up to Dawn version 9.0 i was able to make my banner full Height on computer and tablets.

I didnt want this for mobile so I found this code and till version 9.0 I just ad the lines and it workes well.

Now I am in version 11 and with the same code i am not able to do the same trick. is there anything wrong with the code or need to ad more lines?

Any advise?

Code is in section-image-banner.css

/* This is changed, remove 183 to 188 for normal behaviour - Quenten */
@media screen and (min-width:750px) {
.banner–adapt,
.banner–adapt_image.banner–mobile-bottom .banner__media:not(.placeholder) {
height: 92vh;
}
}

2

Hey, please provide the store URL.

3

www.offsquareofficial.com

4

Hi @H-e-n-k-B-r-w-r

Try this one, maybe can help you to full height.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
div#Banner-template--18899276857680__image_banner {
    height: 100%;
}
  • And Save.
  • The code that you have, you said you dont like to full width in the mobile. I think you should used the max width. This code only for screen 750px below. The code that you have is not for mobile screen with the min-width.
@media screen and (max-width:750px) {
.banner--adapt,
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
height: 92vh;
}
}​

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Hi Ribe,

Thanks for you help.

see my screenshot , maybe i did something wrong

Henk

Screenshot 2023-08-22 165044hgf.jpg
Screenshot 2023-08-22 165044hgf.jpg2344×1255 267 KB

enk

6

It is working?

7

no sorry, nothing changed

8

Can you try to paste it on the section-image-banner.css.

9

also nothing, can it be that because it is not the active theme it will not work?

10

No its not that,if the 100% is already max then did you try to reuse the code that you have? like change the sizes?

@media screen and (min-width:750px) {
.banner--adapt,
.banner--adapt_image.banner--mobile-bottom .banner__media:not(.placeholder) {
height: 152vh;
}
}
11

no matter what i ty I dont see any changes.