space between product & colour description

[Rebeccadukes]

Hi,

I am trying to create more space between the product description/name and the colour code. Please see below. I would appreciate if someone could please explain how to do it.

Thank you.

[theycallmemakka]

Can you please provide me the URL to the store?

[Made4uo-Ribe]

Hi @Rebeccadukes

Would you mind to share your store URL website, with password if its protectd? Thanks!

[Rebeccadukes]

URl is : https://en.jandmdavidson.com/

Password: J&MD2020

Thank you

Rebecca Deuchar
Marketing Executive
J&M Davidson
​3rd Floor, (West)
​Portland House
​4 Great Portland Street
​London
​W1W 8QJ
​https://en.jandmdavidson.com
@jandmdavidsonengland
THIS MESSAGE AND ANY ATTACHMENTS ARE SOLELY FOR THE INTENDED RECIPIENT AND MAY CONTAIN CONFIDENTIAL OR PRIVILEGED INFORMATION. IF YOU ARE NOT THE INTENDED RECIPIENT, ANY DISCLOSURE, COPYING, USE, OR DISTRIBUTION OF THE INFORMATION INCLUDED IN THIS MESSAGE AND ANY ATTACHMENTS IS PROHIBITED. IF YOU HAVE RECEIVED THIS COMMUNICATION IN ERROR, PLEASE NOTIFY US BY REPLYING TO THIS E-MAIL AND IMMEDIATELY AND PERMANENTLY DELETE THIS MESSAGE AND ANY ATTACHMENTS. J&M DAVIDSON LIMITED REGISTERED IN ENGLAND AND WALES NO. 8012789 VAT REGISTRATION NO. GB 158 1445 05

[Anshul_arora]

Hello @Rebeccadukes ,

I understand you are looking to provide some space between Product name and color code in the Product listing page. https://prnt.sc/J8m8CTRFprOF

You can resolve this issue by adding one line code in your .css file.

Please search for the class name → .grid-product_short-description in your store .css file.

Now replace the old code with this -:

.grid-product__short-description {
font-size: calc(var(–typeBaseSize) - 1px);
line-height: 1;
margin-top: 10px;
}

After applying the code, output will look like this → https://prnt.sc/CG8zmu4Zp8PQ

I hope it helps.

Please let me know if you have any query or need any assistance.

Thank you.

[Made4uo-Ribe]

Thank you for the information. Try 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 “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.grid-product__title.grid-product__title--body,
.grid-product__short-description {
    padding: 10px 0px;
}

• And Save.
• Result:
• 

[syedsumaimaly]

**Hi @Rebeccadukes **

Follow these Steps:

Go to Online Store Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above tag

.grid-product__title.grid-product__title--body, .grid-product__short-description {
    padding: 10px 0;
}