How to move buttons to align properly

Highlighted
New Member
54 0 0

SO recently i added a bunch of buttons to my product pages but the size chart and the price AND the description isn't perfectly aligned and it bothers me.

any help would be very much appreciated!!!

Screen Shot 2020-06-25 at 7.30.27 PM.png

 

Screen Shot 2020-06-25 at 9.01.45 PM.png

 

 

also another problem i have is my size chart also appears below pictures and i would like it either moved to the left completely but id prefer it gone!

 

my site is in develpopement stage so archive shirt is just a test product, to find it just search on the search bar "archive shirt"

site url: https://coming-era.myshopify.com/admin/themes/103079510184/editor#/products/archivie-shirt 

0 Likes
Highlighted

Hello @comingera 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

#size-chart {
	border: 2px #555 solid;
	background-color: #ffffff;
	max-width: 1200px;
	margin: 15px 125px;
}
@media only screen and (min-width: 990px) {
.product-form__controls-group ~ .product-form__controls-group--submit {
margin-top: 0;
}
.btn.size-chart-open-popup {
float: left;
}
.product-form__controls-group .btn.product-form__cart-submit {
min-height: 40px;
}
.product-form__controls-group .product-form__item {
padding: 0 10px;
}
}

Please share your store URL and reference site URL.

So that I can check and let you know.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
54 0 0

url is in post at end

0 Likes
Highlighted

Hello @comingera 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

#size-chart {
	border: 2px #555 solid;
	background-color: #ffffff;
	max-width: 1200px;
	margin: 15px 125px;
}
@media only screen and (min-width: 990px) {
.product-form__controls-group ~ .product-form__controls-group--submit {
margin-top: 0;
}
.btn.size-chart-open-popup {
float: left;
}
.product-form__controls-group .btn.product-form__cart-submit {
min-height: 40px;
}
.product-form__controls-group .product-form__item {
padding: 0 10px;
}
}

Hope this will work for you.
Thanks!

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
54 0 0

this didn't completely work

 

Screen Shot 2020-06-26 at 10.20.15 AM.png

0 Likes
Highlighted
New Member
54 0 0

also the size chart at bottom is still the same

0 Likes
Highlighted
New Member
54 0 0

also how can i remove this sold out tag OR move down all the buttons so it has room

 

Screen Shot 2020-06-26 at 10.31.36 AM.png

0 Likes
Highlighted

Hello @comingera 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and (min-width: 990px) {
#size-chart {
	max-width: 1200px !important;
	margin: 15px 125px !important;
}
}

@media only screen and (max-width: 989px) {
#size-chart {
	margin: 15px 20px !important;
}
.product-single__description.rte {
padding: 0 20px;
} }

Hope this will work for you.
Thanks!

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
54 0 0

still nope ;/

Screen Shot 2020-06-26 at 11.34.10 AM.png

0 Likes
Highlighted

@comingera,

Add below css

.selector-wrapper.js.product-form__item, .product-form__item {
    padding-left: 0!important;
}
.product-form__item.product-form__item--submit {
    padding-left: 10px!important;
}
.product-single__description.rte {
    width: 100%;
    clear: both;
    margin-top: 30px;
    display: block;
}
.product-single__description.rte p {
    margin-left: 30px;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes