buttons and tabs width extended all the way

elitaco
Explorer
79 1 16

Hi, why does the buttons and tabs width extended all the way after i've added the size chart(first pic)? It should have spacing like second pic.

url: elita.com.sg

elitaco_2-1631786409489.png

 

elitaco_1-1631786376035.png

 

 

0 Likes

Hello,
Welcome to the Shopify community!
Please Share your store live url with password (if it password protected) where you want to do modification, so that I will solve your issue here!

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
elitaco
Explorer
79 1 16

hi, i would like to have some spacing between the tabs and product image (see second pic)

url: elita.com.sg

0 Likes

hii, @elitaco 
Please add the size-chart so,
I can solve your issue perfectly.
Thank You.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme,
Hire us | Whatsapp. or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Buy me a coffee ☕ Donate Us
0 Likes

@elitaco 

form#product_form_6882475507904 {
    width: 58%;
    margin: 0 auto;
}
.product__description.rte {
    margin: 0 auto;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
elitaco
Explorer
79 1 16

@oscprofessional hi, it works for desktop, but mobile version is off. It should be extended all the way

elitaco_0-1631844854529.png

 

0 Likes

hii @elitaco 
paste this code on top of the theme.scss file.
For the mobile view.

@media only screen and (max-width: 768px) {
.shopify-payment-button {
    width: 40%;
    margin-left: 30%;
}
button.btn.btn--to-secondary.btn--full.product__add-to-cart-button.shopify-payment-btn.btn--secondary {
    width: 40%;
    margin-left: 30%;
}
}

Thank You.


If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme,
Hire us | Whatsapp. or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Buy me a coffee ☕ Donate Us
0 Likes