How can I reduce white space in Dawn theme product page?

Solved

How can I reduce white space in Dawn theme product page?

JADIS
Explorer
169 1 19

Good morning,

 

I would like to reduce the white space a little (highlight in blue on the screenshot) in order to bring the writings together while remaining consistent in the layout of the text

JADIS_0-1696342548537.png

 

 

Do you know how to do it please?

 

Theme: Dawn
Website: jadis-shop.com
password:rj

Accepted Solutions (3)
websensepro
Shopify Partner
1053 149 156

This is an accepted solution.

Ok, add these code,

 

@media (min-width:320px) and (max-width:767px) {

p.product__text {margin: 0px !important;margin-bottom: -14px !important;}

}
Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

syedsumaimaly
Trailblazer
147 16 21

This is an accepted solution.

@JADIS  Sorry my bad replace this code with the previous one.

 

{% style %}
@media (min-width:320px) and (max-width:767px){
.product__text {
    margin: 0;
}

.product__title {
    word-break: break-word;
    margin-bottom: 1.5rem;
    margin-top: 0;
}
}
{% endstyle %}

If I managed to help you then, don't forget to Like it and Mark it as Solutions

 

View solution in original post

JADIS
Explorer
169 1 19

This is an accepted solution.

it work only on the edition theme page but when i go on my phone on the site, it's not working (proof in screenshot)

JADIS_1-1696347290833.png

 

View solution in original post

Replies 18 (18)

websensepro
Shopify Partner
1053 149 156

Hi , @JADIS.

 

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

 

@media (min-width:320px) and (max-width:767px) {

p.product__text {margin: 0px;margin-bottom: -14px;}

}

 

Result:

websensepro_0-1696343046131.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
JADIS
Explorer
169 1 19

when i put the code at the bottom of base.css it don't work... how can i do please ?

websensepro
Shopify Partner
1053 149 156

Please find theme.css/style.css and paste the code very bottom.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
JADIS
Explorer
169 1 19

yes i do but it doesnt change anything bro... could you help me please ?

websensepro
Shopify Partner
1053 149 156

This is an accepted solution.

Ok, add these code,

 

@media (min-width:320px) and (max-width:767px) {

p.product__text {margin: 0px !important;margin-bottom: -14px !important;}

}
Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
websensepro
Shopify Partner
1053 149 156

What screen you check in bro dekstop and mobile i will provided you mobile screen code.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
JADIS
Explorer
169 1 19

thanks its work !!!

syedsumaimaly
Trailblazer
147 16 21

Hi @JADIS 

Follow these Steps:

Go to Online Store  Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above </body> tag

 

 

@media (min-width:320px) and (max-width:767px){
.product__text {
    margin: 0;
}

.product__title {
    word-break: break-word;
    margin-bottom: 1.5rem;
    margin-top: 0;
}
}

 

 

RESULT:

syedsumaimaly_0-1696343047300.png

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

 

JADIS
Explorer
169 1 19

i don't have /body on base.css .... so how can i do please ?

syedsumaimaly
Trailblazer
147 16 21

@JADIS You can add this code in theme.css/style.css

 

@media (min-width:320px) and (max-width:767px){
.product__text {
    margin: 0;
}

.product__title {
    word-break: break-word;
    margin-bottom: 1.5rem;
    margin-top: 0;
}
}

 

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

syedsumaimaly
Trailblazer
147 16 21

@JADIS Or you can add this code in theme.liquid file

 

{% style %}
@media (min-width:320px) and (max-width:767px){
.product__text {
    margin: 0;
}

.product__title {
    word-break: break-word;
    margin-bottom: 1.5rem;
    margin-top: 0;
}
}
{% style %}

 

If I managed to help you then, don't forget to Like it and Mark it as Solutions.

JADIS
Explorer
169 1 19

it doesnt work on theme.liquid, there is a red error message 

syedsumaimaly
Trailblazer
147 16 21

@JADIS can you share a screenshot where you put code?

JADIS
Explorer
169 1 19

I tested at the bottom of the file, above /body and under /body and the three don't work

 

JADIS_0-1696346746760.png

 

syedsumaimaly
Trailblazer
147 16 21

This is an accepted solution.

@JADIS  Sorry my bad replace this code with the previous one.

 

{% style %}
@media (min-width:320px) and (max-width:767px){
.product__text {
    margin: 0;
}

.product__title {
    word-break: break-word;
    margin-bottom: 1.5rem;
    margin-top: 0;
}
}
{% endstyle %}

If I managed to help you then, don't forget to Like it and Mark it as Solutions

 

JADIS
Explorer
169 1 19

This is an accepted solution.

it work only on the edition theme page but when i go on my phone on the site, it's not working (proof in screenshot)

JADIS_1-1696347290833.png

 

JADIS
Explorer
169 1 19

ITS WORKING thanks

syedsumaimaly
Trailblazer
147 16 21

@JADIS If I managed to help you then, Please Like it and Mark it as Solutions