Hiding Section on mobile / desktop stopped working

Store Design
,
1

Hey there.

I got a page on my site which contains two image banners, due to the fact that I had to make 2 separate images for desktop / mobile.

I found this post https://community.shopify.com/topic/1774769 and applied the code at the bottom of my base.css.

I also added a block for hiding the other image on desktop. So my code looks like this:

/* hide section 1 on mobile
@media screen and (max-width:749px){
#shopify-section-template--20721692475720__image_banner_axGzYF{
    display: none;    visibility: hidden;}
}

/* hide section 2 on desktop
@media screen and (min-width:750px){
#shopify-section-template--20721692475720__image_banner_ytBMhR{
    display: none;    visibility: hidden;}
}

The code already worked a couple of days ago!! But today it stopped working.

I already made sure to check whether the id is still correct or not.

I did change the name of the .json from that page tempalte, but I fail to see how that may have caused it to break. The section id is still the same.

Any idea what could be the problem?

URL to my store is www.pmls.at

Password is test123

2

Since I still couldn’t find the reason that caused the code to break, I found another solution instead.

Luckily for me, both images are the same, but the desktop one has the height property “small” while the mobile one has the property “fit to image”.

I removed one banner, kept the one with the small property and added this to the Custom CSS, to sorta “change” the property on mobile:

@media (max-width: 749px) {
  .banner__content {
    height: 100%;
  }
}