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]

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!

[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 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 ?

[JADIS]

when i put the code at the bottom of base.css it don’t work… 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.

[websensepro]

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

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

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

[websensepro]

Ok, add these code,

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

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

}

[JADIS]

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

[websensepro]

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

[syedsumaimaly]

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

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]

thanks its work !!!

[JADIS]

ITS WORKING thanks

[syedsumaimaly]

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