How can I properly align text within a button on mobile for Venture theme?

Store Design
1

Apologies for what is certainly a newbie question

I have been playing around to add an “add to cart” button to collection and search result pages, and it seems to have worked, however i am having some trouble making the mobile version look good.

i have added this code to product-card.liquid, which seems to be working fine:

And this in theme.scss.liquid:

.btn–atclwb {> @extend .btn;> width: 70%;> margin-left: 15%;> mergin-right: 15%;> max-width: 100%;> text-decoration: none;> text-align: center;> vertical-align: middle;> background-color: $color-btn-secondary;> > &:hover {> background-color: $color-btn-secondary-hover;> color: $color-btn-secondary-text;> }> > &:active,> &:focus {> background-color: $color-btn-secondary-active;> color: $color-btn-secondary-text;> }> }

I know I am supposed to use @media screen and (max-width: 768px) {.btn–atclwb {}} to set the style for mobile, however playing with the margin properties moves the button box but not the text:

mobile-css.jpeg
mobile-css.jpeg635×198 7.05 KB

I am not sure if I am using the wrong thing when I use margin or margin-left, or if I am making some other mistake

Any help or advice is much appreciated

1 Like
2

@karl15

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

@KetanKumar thank you for your reply – unfortunately my shop is not live now so i am not sure you can see it, but the current url is https://leftwingbooks.myshopify.com/

4

@karl15

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

You can try with this code.

.btn–atclwb{

padding: 10px !important;

}

Hope it help

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly