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

[JADIS]

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

Do you know how to do it please?

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

[websensepro · Accepted solution]

Ok, add these code,

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

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

}

[syedsumaimaly · 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

[websensepro]

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:

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

[JADIS]

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

[websensepro]

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

[JADIS]

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

[websensepro · Accepted solution]

Ok, add these code,

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

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

}

[websensepro]

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

[JADIS]

thanks its work !!!

[syedsumaimaly]

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:

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

[JADIS]

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

[syedsumaimaly]

@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]

@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]

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

[syedsumaimaly]

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

[JADIS]

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

[syedsumaimaly · 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 · 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]

ITS WORKING thanks

[syedsumaimaly]

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