How can I center text and view product button on mobile view?

[unfoldesthetics]

Hello, 

In mobile view, I'd like for the text, rating, price, and view product button to be centered and fit within its product, as it looks like it spills over to the next one. 

I would appreciate any help! 

 

[theycallmemakka]

Can you provide me the link to your store?

[unfoldesthetics]

https://unfoldesthetics.com/collections/online-courses

Password:rejie

I attempted to do something similar to a quick add. But, I wanted to change quick add to view product instead. So I added this coding according to this person's instructions.

https://community.shopify.com/c/shopify-design/changing-all-add-to-cart-buttons-to-view-more/m-p/208...

The issue I'm having is the button is not centered and the texts are all weird.

[theycallmemakka]

The page is showing too many failed attempts.

[unfoldesthetics]

I removed the password temporarily for now so you can see.

[theycallmemakka]

Hi @unfoldesthetics ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>

@media only screen and (max-width: 600px) {
  .card__information.card__heading--price {
    width: 100%!important;
    max-width: 100%!important;
}

.card__information.card__heading--price {
    display: flex!important;
    flex-direction: column!important;
    align-items: center!important;
}

a.card__view-product.button.button--secondary {
    padding: 0px!important;
    text-transform: capitalize;
    margin-top: 5px;
}

#shopify-section-template--20828773384500__e13f5fd6-cad5-4300-8b68-1bb3eeaa3488 .card__heading {
    font-size: 15px!important;
}

.price {
    margin-top: 5px!important;
}

h3#title-template--20828773384500__e13f5fd6-cad5-4300-8b68-1bb3eeaa3488-8599231660340 {
    margin-bottom: 5px!important;
}
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,

Makka

[unfoldesthetics]

Thank you!

Could you please rewrite another code to just recenter the button and fix the texts basically im trying to set it up like this. Could you please have it be like this for both desktop and mobile? I realize the button isn't centered on desktop either.

[oscprofessional]

Hello @unfoldesthetics 

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.card__heading--price {
    align-items: center !important;
}

[Dan-From-Ryviu]

Hi @unfoldesthetics 

Please share your store link 

[unfoldesthetics]

https://unfoldesthetics.com/collections/online-courses

Password:rejie

I attempted to do something similar to a quick add. But, I wanted to change quick add to view product instead. So I added this coding according to this person's instructions.

https://community.shopify.com/c/shopify-design/changing-all-add-to-cart-buttons-to-view-more/m-p/208...

The issue I'm having is the button is not centered and the texts are all weird.