Move product description below product form narrative theme

Store Design
1

Hi, anyone knows how to move product description below product form also make it centralised? thanks

Screenshot 2021-08-20 122353.png
Screenshot 2021-08-20 122353.png1016×728 123 KB

2

Hi @elitaco ,

you are facing this issue, it would be my pleasure to help you.
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!

3

hi,

url: elita.com.sg
password: clewth

thanks!

4

hello @elitaco

do you want to look like this https://nimb.ws/Seqon3

5

yes, awesome! but how do you remove the space above the variants?

Screenshot 2021-08-20 130333.png
Screenshot 2021-08-20 130333.png959×678 119 KB

6 
.product__content-header {
    padding-bottom: 0;
}
.product__content-main {
    display: block;
}

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

7

hi, may i know what code to use to re-arrange it?

8

@elitaco - I can do it, can you add me as collaborator?

9 
.product__content-header {
    padding-bottom: 0;
}
.product__content-main {
    display: block;
}
.product__form-container {
    width: 100%;
}

please update the code

10

thanks! it works but is there any way to centralise the variants?

11

how to centralise this whole thing in mobile view?

photo_2021-08-20_13-22-58.jpg
photo_2021-08-20_13-22-58.jpg591×1280 46.4 KB

in mobile view

12

hello @elitaco

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

.product-template .product__content-main {
    width: 90%;
    margin: 0 auto;
}
13 
.product-template .product__content-main {
    width: 90%;
    margin: 0 auto;
}
14

hello @elitaco

for center content in mobile

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

@media screen and (max-width: 729px){
  .product-template .vario-all-variant-wrapper{
    text-align: center;
}

.product-template .vario-variants{
      justify-contact:center ;
}
}
15

hi, the code doesn’t work. the page could not load at all when refreshed

16 
.product__content .grid {
    margin: 0;
}

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