What's your biggest current challenge? Have your say in Community Polls along the right column.
Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: CSS Not woking

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
16116 2410 3126

@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 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
oscprofessional
Shopify Partner
16116 2410 3126

@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 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
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
16116 2410 3126

@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 | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
guptamanikya
New Member
13 0 0

Please check mssg