Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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
9037 2160 2664

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 8 (8)

Moeed
Shopify Partner
6301 1711 2057

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Create high-converting pages - PageFly Page Builder.


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
6301 1711 2057

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Create high-converting pages - PageFly Page Builder.


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
9037 2160 2664

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
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
9037 2160 2664

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
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.