Solved

CSS Mystery - Sections are styled differently

colleenc
Shopify Partner
91 9 21

Screenshot 2024-04-06 at 2.14.05 PM.jpg

 

I have two sections that I can’t seem to match the styling on. I have been struggling to make changes to the CSS using both CSS in the sections on the home page as well as making global changes via base.css. I just can’t seem to get the styling to match. The two sections are coded differently, and that may be contributing to the issue.

Issues:

Vendor Names are at different opacity

On mobile the two sections render the “Buy Now” button differently

Line heights are different

 

Site: https://scent-lodge.myshopify.com/

Password: hello

 

I think I have been fiddling with this for too long and I am getting frustrated with my results - and I am worried I am going to throw of the styling in other parts of the site. Any help would be gratefully received. 

Accepted Solution (1)

colleenc
Shopify Partner
91 9 21

This is an accepted solution.

I solved the issue by rebuilding one of the sections and modifying the custom css in that section. Everything matches now - but I shouldn’t have needed the custom css modifier. Can’t understand why the two sections were reacting differently to the same css.

View solution in original post

Reply 1 (1)

colleenc
Shopify Partner
91 9 21

This is an accepted solution.

I solved the issue by rebuilding one of the sections and modifying the custom css in that section. Everything matches now - but I shouldn’t have needed the custom css modifier. Can’t understand why the two sections were reacting differently to the same css.