CSS Not being applied for a class on one particular page Showcase theme

Store Design
1

I have finally got the home page the way we want just waiting on the graphics for the banners etc but I had to change the CSS for the featured collection slider so that it was not as high as the default and also reduce the size of the images which I did this by adding the following to the end of the css.

/*** Featured Product Slider /
@media (min-width: 768px){
.product-slider .swiper-container .swiper-wrapper {
margin-top: 20px;
}
}
.product-slider .swiper-container {
overflow: visible
}
.product-slider .product-list {
padding-bottom: 30px;
margin-left: 8px !important;
margin-right: 8px !important;
height: 330px;
}
/** Featured Product Slider Image Width */
.swiper-slide {
width: 16% !important;
}

However I did not realize that I had also changed the size of the images in the collage on the product page so that they also are 16% of the width. So I then tried to apply the css to the home page only. To do this I first added to the tag in the theme.liquid file so I ended up with the following

replacing

This gave me the id of “herb-street” and the class of “page-herb-street” so I then added the following section to the CSS commenting out the appropriate section added above.

#herb-street.page-herb-street {
.swiper-slide {
width: 16% !important;
}
}

However it did not apply the CSS to the homepage and the product images were back to the original size however the product pages because it did not get applied were back as we wanted.

I got the error as shown in the attached snippet where the code had the caution flag and a line through the code and I cannot work out how to fix this.

2

Hi @bytelink ,

Please change code:

#herb-street.page-herb-street {
.swiper-slide {
width: 16% !important;
}
}

=>

.product-slider .swiper-slide {
  width: 16% !important;
}

Hope it helps!

3

Thank you for your suggestion but I still have the same problem.
The 16% is applied to the product page collage as well as the featured collection slider on the product page.
Please see the attached pictures.

4

Hi @bytelink ,

Please change code:

body:not(.template-product) .product-slider .swiper-slide {
  width: 16% !important;
}

It will help you to remove the page product from the code.

Hope it helps!

5

Thank you for the recommendation however I am still getting the same result

6

Hi @bytelink ,

Please send your site and if your site is password protected, please send me the password. I will check it.

7

Sorry I did not see this come In. The site is https://herbstreet.myshopify.com/ and the password herbstreet2021
Ian

8

Hi @bytelink ,

I checked and you still have this code:

Screenshot.png
Screenshot.png1137Ă—509 25 KB

you just need to remove it, everything will work fine.

9

Thankyou. Yes that was the problem.

1 Like