Align Icons With Text in Dawn Theme

Solved

Align Icons With Text in Dawn Theme

marcisoft
New Member
6 0 0

Hey, I am facing an issue with aligning the SVG icon from description with the text.

This is how it looks on the website
Snip20250119_18.png

 

 

This is how it looks in the text editor
Snip20250119_20.png

How can I properly align the text and the icon ?

Accepted Solution (1)
EstherBui
Excursionist
275 39 42

This is an accepted solution.

You can replace that code 

.product .rte img {
    margin: 0;
    margin-bottom: -2px;
    height: 18px;
    width: 18px;
}
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

View solution in original post

Replies 11 (11)

EstherBui
Excursionist
275 39 42

Hi, Can you share store URL 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

qasim-devloper
Shopify Partner
177 13 25

Hey @marcisoft this is Qasim a Sr. Shopify developer.

In order to make the vertically alignment against Text then please share the store URL so that I provide you solution code.

Thanks

- Need a Shopify Specialist? Chat on WhatsApp +923289643774

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button!

marcisoft
New Member
6 0 0
qasim-devloper
Shopify Partner
177 13 25

Thank you for sharing the store URL.

It would be easy if you mention on which page this issue is exists. I search on home page but there no issue with that.

- Need a Shopify Specialist? Chat on WhatsApp +923289643774

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button!

marcisoft
New Member
6 0 0
qasim-devloper
Shopify Partner
177 13 25

Please paste this code in the same Product page Cusotm CSS setting.

 

 

.product__description.rte.quick-add-hidden{
    display: flex;
    gap: 8px;
    align-items: center;
}

 

 

If you need more help please let me Know.

Thanks

- Need a Shopify Specialist? Chat on WhatsApp +923289643774

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button!

marcisoft
New Member
6 0 0

Where do I find "the same product page custom css" ? can you please give me the file name?

EstherBui
Excursionist
275 39 42

Hi Marcisoft


- You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

 

.product .rte img {
    margin: 0;
    margin-bottom: -2px;
}

 

Result: 

EstherBui_0-1737289777294.png

 

Best,
Esther

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

marcisoft
New Member
6 0 0

It looks better, but now is there a way to make the text the same size as the icon?
Snip20250119_21.png

EstherBui
Excursionist
275 39 42

This is an accepted solution.

You can replace that code 

.product .rte img {
    margin: 0;
    margin-bottom: -2px;
    height: 18px;
    width: 18px;
}
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

marcisoft
New Member
6 0 0

Works, ty!