DAWN THEME: Center product details beneath product image

Solved
Soukcouture
New Member
2 0 0

I'm trying to center the product title and pricing details beneath the Featured Products and Collection pages. I've tried as suggested to insert this code on the component-image-with-text.css file under Assets, but nothing happens:

 

@media only screen and (max-width: 749px) {
.image-with-text__text {
     margin: 0 auto !important;
  text-align: center;
}

@media only screen and (max-width: 749px) {
.image-with-text__heading {
  margin: 0 auto !important;  
  text-align: center;
}

  @media only screen and (max-width: 749px) {
.image-with-text__content .button {
  margin: 20px auto !important; 
  text-align: center;
}

 Any ideas? Thank you!

Soukcouture_0-1637558222200.png

 

Accepted Solution (1)

Accepted Solutions
diego_ezfy
Shopify Partner
2299 413 539

This is an accepted solution.

@Soukcouture, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

[class*='collection'] .card-information__wrapper{
    text-align: center !important;
}

[class*='collection'] [class*='card-information'] .price{
    align-items: center !important;
    justify-content: center !important;
}



Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 2 (2)
diego_ezfy
Shopify Partner
2299 413 539

This is an accepted solution.

@Soukcouture, do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

[class*='collection'] .card-information__wrapper{
    text-align: center !important;
}

[class*='collection'] [class*='card-information'] .price{
    align-items: center !important;
    justify-content: center !important;
}



Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Soukcouture
New Member
2 0 0

Amazing! Thank you so much for your fast help!!