Centering Text and View Product Button

unfoldesthetics
Tourist
21 0 2
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! 
 
IMG_0189.jpeg

Replies 9 (9)

theycallmemakka
Shopify Partner
1375 305 334

Can you provide me the link to your store?

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

unfoldesthetics
Tourist
21 0 2

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
Shopify Partner
1375 305 334

The page is showing too many failed attempts.

makkaomakka_0-1698726952549.png

 

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

unfoldesthetics
Tourist
21 0 2

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

theycallmemakka
Shopify Partner
1375 305 334

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

Buy me a Coffee


Enjoy Shopify for $1. Sign up now


For quick response - Message Me


Ping me at: theycallmemakka@gmail.com

unfoldesthetics
Tourist
21 0 2

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.

Screenshot 2023-10-30 at 9.52.27 PM.png

oscprofessional
Shopify Partner
15849 2371 3074

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;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Hi @unfoldesthetics 

Please share your store link 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

unfoldesthetics
Tourist
21 0 2

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.