Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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
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.
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
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)
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:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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?
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!
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.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024