How can I adjust the layout of my Debutify theme product page?

Store Design
, , , ,
1

Hello there.

site: muutukeltaiseksi.com

I would love to get some help on couple of small adjustements on my main products page.

I would like my text box to be more compact. I want to remove the space between the “kyseessä on digitaalinen tuote” and the featured image. Also is there a way to make those links on the same row and symmetrically from both sides?

help1.PNG
help1.PNG1467×868 174 KB

Also I would like to get rid of this space. Or atleast get rid of the line seperating the text, and the product “page”. If there is a way to get rid of the line, then I would also need to move the title and the entire text box closer to pictures and “add to cart” button.

help2.PNG
help2.PNG1439×593 120 KB

Thanks in advance!

2

Hi @Piirretty you can edit your theme.scss.css file and change this padding-top & padding-bottom 60px to 0 px

Avi_choudhary_0-1677177867331.png
Avi_choudhary_0-1677177867331.png1917×996 200 KB

3

Hi @Piirretty ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.scss.css->paste below code at the bottom of the file:

.product-single > .box {
    padding-bottom:10px;
}
#section-template--18001432379667__1075b912-c40a-4e23-8348-2479298a0f38 > .box {
    padding-bottom: 10px
}
#section-template--18001432379667__b78b8a4c-3270-4102-b292-b42c506cba9b > .box{
    padding: unset;
}
#section-template--18001432379667__d68aad78-8c9c-4328-871d-2ec48c2a21ae > .box{
    padding-top:unset;
}

.rte.lead > p:last-child{
    
    display: inline-block;
}
.rte.lead > p:nth-child(13){
    display: inline-block;
    margin-right: 55%
}

Hope my answer will help you.

Best regards,

Victor | PageFly