How can I fix the altered banner height on my website?

Store Design

Topic summary

Banner heights changed sitewide after code edits; goal is to show one banner on desktop and a different banner on mobile, and hide the top button on mobile. The store owner also shared a preview link and password.

Guidance focused on correct hiding behavior using CSS (display:none instead of opacity) and avoiding multiple values in a single id attribute. A reminder was given that Shopify’s theme editor can revert files to previous versions.

Two CSS media query solutions were provided to toggle banner sections by screen width (desktop vs. mobile). One suggested adding CSS into base.css or via a custom CSS app; media queries are screen-size-based rules that switch styles at specified breakpoints.

Result so far: device-specific banners are partially working. However, the “Adapt section height to first image size” setting no longer works due to earlier code changes, causing poor banner fit.

New requests: hide the “Our mission” section on mobile, set a max width for fullscreen, and hide the top button on mobile. Status: ongoing, awaiting further code to restore adaptive banner height and implement the new visibility and sizing rules.

Summarized with AI on February 7. AI used: gpt-5.
1

Hello, i was working on some code on my website and suddenly my banner height changed and i can’t seem to get it back to normal

I wanted to have the second banner for mobile and the first banner for desktop, but the height of all my banners changed over my site can anybody help my overwrite and fix this maybe?

Here is my website link:https://ambientlightingofficial.myshopify.com

Password:lewtwa

2

So 2 things, make my banners adjust to my page size again, make the top button on my site hide on mobile view and make the second banner visible on mobile view only thanks!

3

Hi @Ecolapse I have seen some logic that you applied to the code. This is not the right way to do that. changing the opacity does not hide the element. you need to give the display property value none. that will completely remove the element from the screen. Also, you have given two values to the id attribute it accepts only one.

In Shopify, you always have the option under the file name in the theme editor to go back to the previous version.

Please explain a little bit more about what exactly you want, then I will provide the code for that.

@media only screen and (min-width: 768px){
#shopify-section-template--14385659445332__bcc2f98d-62cb-4b18-adc5-785214c9251b {
    display: none;
}
}
@media only screen and (max-width: 768px){
#shopify-section-template--14385659445332__image_banner{
    display: none;
}
}
4

Add this CSS to show the 1st banner on desktop and 2nd banner on mobile,

@media screen and (min-width: 767px){
#shopify-section-template--14385659445332__bcc2f98d-62cb-4b18-adc5-785214c9251b {
    display: none;
}
}
@media screen and (max-width: 767px){
#shopify-section-template--14385659445332__image_banner {
    display: none;
}
}

You can add it to base.css or use our app to add Custom CSS to theme.

5

The solution that vishwesh sent to me already helped me a little bit! but only the button ‘Adapt section height to first image size’ doesn’t work anymore because i changed some code earlier :C my banner images don’t fit nicely in my pages anymore,

i would also like to hide the our mission part from mobile view, thanks for your answer!

6

i would also like a max width when fullscreen watching could you maybe help me with that to? would really help me out with my first site