FROM CACHE - en_header

Reducing Space between text

Solved
wallysplants
New Member
3 0 0

Hi!

I am trying to reduce the space between the texts on my homepage. I have no idea what to do. Can someone please help me? Is there a code I can put somewhere? I'm using theme "Pipeline"

 

I attached a photo of my text with red lines showing the space I want to reduce, and I also added a photo from a website with the text spacing I am trying to go for.

 

Thank you!

Screenshot 2023-01-25 at 12.03.16 PM.jpg

Screenshot 2023-01-25 at 12.04.11 PM.jpg

  

Accepted Solution (1)

Accepted Solutions
techlyser_ecom
Shopify Partner
365 87 86

This is an accepted solution.

Please add this code above </body> in theme.liquid

 

layout >> theme.liquid

 

<style>
a.standard__cta.hero__btn.btn--soft {
margin-top: 5px!important;
}
.hero__description.h5--body {
margin-bottom: 0!important;
}
</style>

 

after add the code looks,

techlyser_ecom_0-1674668673573.png

 

Techlyser || Shopify Expert || Helping eCommerce Brands
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 8 (8)
techlyser_ecom
Shopify Partner
365 87 86

@wallysplants 

 

Please give me the store URL

 

Techlyser || Shopify Expert || Helping eCommerce Brands
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
techlyser_ecom
Shopify Partner
365 87 86

@wallysplants 

 

Thanks i will check

 

Techlyser || Shopify Expert || Helping eCommerce Brands
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
techlyser_ecom
Shopify Partner
365 87 86

This is an accepted solution.

Please add this code above </body> in theme.liquid

 

layout >> theme.liquid

 

<style>
a.standard__cta.hero__btn.btn--soft {
margin-top: 5px!important;
}
.hero__description.h5--body {
margin-bottom: 0!important;
}
</style>

 

after add the code looks,

techlyser_ecom_0-1674668673573.png

 

Techlyser || Shopify Expert || Helping eCommerce Brands
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
techlyser_ecom
Shopify Partner
365 87 86

@wallysplants 

 

second image where on store please give me the page URL

Techlyser || Shopify Expert || Helping eCommerce Brands
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
BellamyDustin
New Member
2 0 0

There are a few ways to reduce the space between text in Shopify, depending on where the text is located and how it is being displayed. Here are a few options:

  1. Use CSS to adjust the margin and padding of the text: By targeting the specific elements that contain the text, you can use CSS to adjust the margins and padding to reduce the space between the text.

  2. Adjust the line-height: Using CSS, you can adjust the line-height property of the text to reduce the space between lines.

  3. Use a font with smaller line spacing: Some fonts have built-in line spacing that can be adjusted to reduce the space between lines of text.

  4. Adjust the font size: By decreasing the font size, the space between lines of text will also be reduced.

  5. Use a code editor to edit the theme's liquid file: This is an advanced method which would require to know the structure of the website and the HTML/CSS and Liquid languages.

It is important to note that, you should always test your changes in different browsers and devices to ensure that the text is still readable and the design looks good.

BellamyDustin
New Member
2 0 0

@BellamyDustin wrote:

There are a few ways to reduce the space between text in Shopify, depending on where the text is located and how it is being displayed. Here are a few options:

  1. Use CSS to adjust the margin and padding of the text: By targeting the specific elements that contain the text, you can use CSS to adjust the margins and padding to reduce the space between the text.

  2. Adjust the line-height: Using CSS, you can adjust the line-height property of the text to reduce the space between lines.

  3. Use a font with smaller line spacing: Some fonts have built-in line spacing that can be adjusted to reduce the space between lines of text.

  4. Adjust the font size: By decreasing the font size, the space between lines of text will also be reduced.

  5. Use a code editor to edit the theme's liquid file: This is an advanced method which would require to know the structure of the website and the HTML/CSS and Liquid languages.

It is important to note that, you should always test your changes in different browsers and devices to ensure that the text is still readable and the design looks good.


Have you find this information useful? I also applied same on one of my websites and get success.