Change and reduce line spacing and text width - Dawn Theme

[Julietteweb]

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!

[Moeed]

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:

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

Best Regards,
Moeed

[Julietteweb]

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]

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

[Julietteweb]

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

[Made4uo-Ribe · 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:

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

[Julietteweb]

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]

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. 

You can simply add margins like this. 

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

Add or replace. 

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!

[Julietteweb]

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.