Re: Change and reduce line spacing and text width - Dawn Theme

Solved

Change and reduce line spacing and text width - Dawn Theme

Julietteweb
Explorer
59 0 10

Hello,

 

I've been looking for a solution to change the space between lines of text on the dawn theme, but the solutions I've tried don't work or only work on the product description.

 

What I'm trying to do is :

- reduce the space between lines

- reduce font size

- increase the space the text occupies on the page width on the mobile version of the site.

I'm trying to do this on an “image with text” section, but I'd also like to be able to do it on almost the entire site.

 

If anyone knows a line of code for this, it would be great.

 

Thanks for taking the time to read!

 

change-reduce-line-spacing-dawn-theme-desktop-1.pngchange-reduce-line-spacing-dawn-theme-desktop-2.pngchange-reduce-line-spacing-dawn-theme-mobile-1.pngchange-reduce-line-spacing-dawn-theme-mobile-2.png

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
8757 2093 2568

This is an accepted solution.

Hi @Julietteweb 

Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
@media only screen and (max-width: 749px){
.image-with-text__content {
    padding-left: 0;
    padding-right: 0;
}
    
div#ImageWithText--template--22195795263753__image_with_text_C8zzwP .image-with-text__text.rte.body {
    padding: 0 1.5rem;
}
    
.image-with-text__text p {
    line-height: normal;
}
    
.image-with-text__content>:first-child:is(.image-with-text__heading) {
    font-size: 1.7rem;
    }
}
</style>

 

And Save. 

Result:

Made4uoRibe_0-1727716876521.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 8 (8)

Moeed
Shopify Partner
5816 1580 1879

Hey @Julietteweb 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

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

<style>
div#ImageWithText--template--22195795263753__image_with_text_fP97KP {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}
</style>

RESULT:

Moeed_0-1727692532210.png

 

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

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Julietteweb
Explorer
59 0 10

Hello @Moeed 

 

It works, but it's not exactly what I'd imagined.

I'd like to know how to reduce the spacing between lines of text across the whole website and reduce the font size.

 

And I'd like the text to take up more space on the mobile version but not on the desktop version.

Moeed
Shopify Partner
5816 1580 1879

Keep the previous code and add this new code above </style>

.image-with-text__text p {
    margin-bottom: 0 !important;
}

 

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

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Julietteweb
Explorer
59 0 10

@Moeed 

 

It did not work as I hoped. Maybe I should create two section one visible only on desktop and the other only on mobile.

 

On the mobile, I really wanted to display the title in large type above the section image, and the text in much smaller, condensed type.

And on the computer, I wanted the title to be larger, the text more condensed with less space between the lines, but the space occupied by the text not too large.

(An example on the screenshots)

 

exemple 2.pngexemple-1.png

 

Made4uo-Ribe
Shopify Partner
8757 2093 2568

This is an accepted solution.

Hi @Julietteweb 

Check this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

 

<style>
@media only screen and (max-width: 749px){
.image-with-text__content {
    padding-left: 0;
    padding-right: 0;
}
    
div#ImageWithText--template--22195795263753__image_with_text_C8zzwP .image-with-text__text.rte.body {
    padding: 0 1.5rem;
}
    
.image-with-text__text p {
    line-height: normal;
}
    
.image-with-text__content>:first-child:is(.image-with-text__heading) {
    font-size: 1.7rem;
    }
}
</style>

 

And Save. 

Result:

Made4uoRibe_0-1727716876521.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Julietteweb
Explorer
59 0 10

Hello @Made4uo-Ribe 

 

The rendering is quite good. Thanks a lot!

 

What line of code can I add to manage the space between paragraphs in the same section of text?
The code has reduced the space between lines, but I'd like to be able to increase the space between paragraphs as I want.

 

And what setting should I use if I want to reduce the space between lines and the font size even further?

Made4uo-Ribe
Shopify Partner
8757 2093 2568

if you like to adjust between paragraph you need add margins top and bottom. 

On this code. Im calling the paragraph on the image with text section. 

Made4uoRibe_0-1727796450354.png

You can simply add margins like this. 

 

.image-with-text__text p {
    line-height: normal;
    margin: 20px 0;
}

 

Add or replace. 

Made4uoRibe_1-1727796698385.png

If you're using the code to reduce space and font, rather than customizing the theme, then adjustments should be made in the code. Would you like me to add comments to the code I provided so you can adjust it yourself?

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
Julietteweb
Explorer
59 0 10

Hello @Made4uo-Ribe 

 

There are several settings related to font size and line spacing that I'd like to make on my site and which I believe should be made directly on the code and not in the theme editor.

I asked a question about this on this link here: https://community.shopify.com/c/shopify-design/adjust-and-reduce-font-size-and-line-spacing-dawn-the...
I've found a lot of information on the internet and so far none of it has worked properly.