How can I add more space between variant selector and payment sections?

Store Design
1

FBE6195A-B643-40C6-9454-902625100F7D.png
FBE6195A-B643-40C6-9454-902625100F7D.png828Ă—1792 196 KB

Hello, I hope all is well.

I would like to add more space in between the variant selector and shop pay installments section.

2

hello @SimoneKhamore

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

3

@SimoneKhamore

please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->paste below code at the bottom of the file.

@media only screen and (max-width:768px){
.variant-wrapper {margin-top: 20px !important;}
}

Thanks!

4

www.simonekhamore.com

1 Like
5

@SimoneKhamore

please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->paste below code at the bottom of the file.

@media only screen and (max-width:768px){
.variant-wrapper {margin-top: 20px !important;}
}

Copy

Thanks!

6

hello @SimoneKhamore

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width:768px){
.variant-wrapper {margin-top: 20px !important;}
}
7

It didn’t do anythig.

8 
@media only screen and (max-width:749px){
.variant-wrapper {margin-top: 20px !important;}
}

Add this code. in theme.scss

9

It didn’t change a thing. This must be difficult. I don’t know what’s going on.

10

It didn’t change a thing. This must be difficult. I don’t know what’s going on.

1 Like
11 
@media only screen and (max-width:749px){
.product-single__form {
    margin-bottom: 30px;
    margin-top: 40px !important;
}
.product__quantity {
    margin-bottom: 40px !important;
}
}

Add this code to theme.scss

12

It’s so weird. Nothing’s happening.

13

@SimoneKhamore

Please add the following code at the bottom of your assets/theme.scss.liquid file.

.product-single__form .variant-wrapper{
margin-top: 20px !important;
}

This should work for desktop and mobile both and remember to put this code in above given CSS file at the bottom.

14
Show More

It worked ! Thank you!

1 Like
15

It worked! Thank you!

16

A487C0FC-F9AB-4EC9-A322-03A2CFB817D8.png
A487C0FC-F9AB-4EC9-A322-03A2CFB817D8.png828Ă—1792 82.4 KB

Hello, I hope all is well.

I have a few questions. First, I would like to make my font under the main menu larger. How do I go about this?

17

hello @SimoneKhamore

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.mobile-nav__sublist .mobile-nav__sublist-link >a {
        font-size: 15px;
}
18

@SimoneKhamore
Add this code in theme.scss

.mobile-nav__sublist .mobile-nav__sublist-link >a {
        font-size: 15px !important;
}
1 Like
19
Show More

Thank You! It worked.

Now, how do I get rid of this About Us text in black?

1C06DED2-92AB-4AAE-86B0-C5616CFCA6A4.jpeg
1C06DED2-92AB-4AAE-86B0-C5616CFCA6A4.jpeg828Ă—1792 68.9 KB

20

hello @SimoneKhamore

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

body#about-us .section-header--title{
    display: none;
}