Boundless Theme - Add to cart button Alignment

Solved
Highlighted
Tourist
5 0 1

Hi All,

I'm really struggling with the “add to cart” button on the boundless theme.

The name’s of some of my products are causing the “add to cart” button to miss align and looks really mess on all platforms (Mac, iPad & Mobile)

I have also tried to see if I could change the outline border colour of the “add to cart” button but with no results.

Could anyone offer any advice, as I have such limited knowledge of coding and have tried looking on all the discussion boards but not managed to solve the issue.

Thanks,
Jordan

0 Likes
Highlighted
Shopify Partner
3167 696 842

@J_H 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
5 0 1

Hi There,

Thank you for your help it’s really appreciated.

the url is: 

https://modern-2-interiors.myshopify.com/collections/wall-paper

and the default password is: aongay

Thanks,

Jordan

0 Likes
Highlighted
Shopify Partner
3167 696 842

@J_H 

Thanks for the URL but can you please provide a screenshot?

It will be helpful to understand the issues.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
5 0 1

Mobile View.png

iPad View.png

Hi There, 

Apologises for this, the issue only affects the mobile & iPad versions of my site.

I've included two screen shots - so basically the issue I'm having is that when the site is loaded on a smaller screen, Im under the impression that the titles of my products mean that the add to cart button goes out of alignment with the rest of the buttons on that row. 

Preferably, I'm trying to get the buttons to align so that the design is better.

I hope this make sense.

I've tried to show in the screen shots examples of this happening.

Thanks,

Jordan

0 Likes
Highlighted
Shopify Partner
3167 696 842

This is an accepted solution.

@J_H 

Please add the following code at the bottom of your assets/theme.scss.liquid file

@media only screen and (max-width: 989px){
.product-item__title { height: 50px; }
}

 

Hope this helps.

Thanks! 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
5 0 1

That has worked perfectly,

Thank you so much for the time and effort to help me.

It's really appreciated.

Thanks,

Jordan

1 Like