Add space between ' add to cart' button and image

Solved
Tourist
8 0 0

I'm after some help adding space between 'add to cart' button and image on my website please! The code I'm using for the button is:

</div>
<form method="post" action="/cart/add">
<input min="1" type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input type="submit" value="Add to cart" class="btn" />
</form>

 

Screenshot 2019-10-16 at 18.14.20 - Edited.png

 

I'm also wondering if there is a way to edit the spacing on my product page as one of my product names is longer than the others which has affected the position of the 'add to cart' button. Not sure if this can be fixed though?

Screenshot 2019-10-16 at 18.19.13 - Edited.png

0 Likes

could you share me your store url

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Tourist
8 0 0

thestylised.com

the issue is with the mobile view

0 Likes

@media only screen and (max-width: 749px)
{
li.grid__item.grid__item--featured-collections.small--one-half.medium-up--one-quarter {
margin-bottom: 10px;
}

}

 

 

copy and past in css file

 

 

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

1 Like
Tourist
8 0 0

Sorry where do I paste it? above the add to cart code? 

 

I'm not great with coding.

0 Likes

Success.

got to assets folder and theme.css  ,past the code

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

1 Like
Tourist
8 0 0

Thanks so much!!

0 Likes
Tourist
8 0 0

Sorry the issue still exists on the collection page.

 

Is there somewhere I can post that code to fix the spacing on the collection pages?

0 Likes

Success.

no problem here is code :

@media only screen and (max-width: 749px)
{

//new code for collection page:
li.grid__item.grid__item--collection-template.small--one-half.medium-up--one-quarter {
margin-bottom: 10px;
}

}

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Tourist
8 0 0

thanks for that. I'm just not sure where to post it - templates? sections? collection.liquid?

0 Likes