Join us for an upcoming Shopify Partner webinar on February 27, 2024. Discover the latest Checkout Extensibility features, and deep dive on improvements to Shopify Functions and Web Pixels. Register now for either the 10am EST or 2pm EST sessions.

CSS Not woking

guptamanikya
New Member
13 0 0

Hello,

 

I am using symmetry theme and in the product.liquid page I have added a new class as shown in the pic.

565656.PNG

After adding this class on product page it is showing like this on the product page

ddss.PNG

after doing some css I made it design like this

465654645.PNG

The css which I used is like this 

11.PNG22.PNG33.PNG

After I paste this code in styles.css.liquid the changes are not reflecting

65445654mo.PNG

May I know why these changes are not reflecting and how do I make them reflect on the product page since I have added a new class what wrong am I doing may I know please provide a solution for it the code which I added in product. liquid is 

   <div class="product_imp_note"> 
        {% if product.metafields.my_fields.product_imp_note != null and product.metafields.my_fields.product_imp_note != "" %}
        <div class="product-single__description product-single-title"> 
          <div class="product_imp_note">
            {{ product.metafields.my_fields.product_imp_note }}
          </div> 
        </div>

The css which I added is 

.product-single__description.product-single-title:before {
    content: "";
    background-image: url(https://cdn.shopify.com/s/files/1/0555/3861/4409/files/desc-logo.png?v=1641454131);
    background-repeat: no-repeat;
    width: 60px;
    height: 25px;
    position: absolute;
    background-size: contain;
    left: 10px;
}
.product-single__description.product-single-title {
    border-top: 1.5px solid #f1f1f1;
    border-bottom: 1.5px solid #f1f1f1;
    display: flex;
    width: 100%;
    padding: 4% 12%;
    align-items: center;
    position: relative;
    margin: 0;
    justify-content: center;
}
.product_imp_note {
    font-family: BigCaslon;
    color: #000;
    font-weight: 500;
    font-size: 14.4px;
}

Please tell me how to reflect the changes I have added a new class why the css is not catching that class.

Replies 5 (5)

oscprofessional
Shopify Partner
15755 2357 3060

@guptamanikya ,

Add the parent classes you have added.

.product_imp_note .product-single__description.product-single-title:before {
    content: "";
    background-image: url(https://cdn.shopify.com/s/files/1/0555/3861/4409/files/desc-logo.png?v=1641454131);
    background-repeat: no-repeat;
    width: 60px;
    height: 25px;
    position: absolute;
    background-size: contain;
    left: 10px;
}
.product_imp_note .product-single__description.product-single-title {
    border-top: 1.5px solid #f1f1f1;
    border-bottom: 1.5px solid #f1f1f1;
    display: flex;
    width: 100%;
    padding: 4% 12%;
    align-items: center;
    position: relative;
    margin: 0;
    justify-content: center;
}
.product_imp_note {
    font-family: BigCaslon;
    color: #000;
    font-weight: 500;
    font-size: 14.4px;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
15755 2357 3060

@guptamanikya ,

Otherwise share me the requirement I will give you the css.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
guptamanikya
New Member
13 0 0

I pasted your code that also did not work and what do u mean by add the parent class

oscprofessional
Shopify Partner
15755 2357 3060

@guptamanikya ,

Share your requirement.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
guptamanikya
New Member
13 0 0

Please check mssg