How do I Center Featured Product and Product Page Contents on Mobile in Craft Theme?

Store Design
, ,
1

Hi there, I am needing to center both the featured product and all content for the product page in Shopify’s “Craft” theme.

2

Rule out SEARCH first https://community.shopify.com/search?q=center+feature+craft+theme

3

@btrflybld hello, do you mean like this?

image
image1366×768 196 KB

4

Yes, exactly like that!

5

Hi @btrflybld

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
@media screen and (max-width: 767px) {
  .product__info-container {
    text-align: center;
    margin: 0 auto;
  }

  .product-form__input .price-per-item,
  .price-per-item__container {
    justify-content: center;
  }
}

image
image193×318 11.8 KB

Best regards,
Devcoder :laptop:

6

Hi @btrflybld ,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file

@media (max-width: 768px) {
    .product__info-wrapper.grid__item {
        text-align: center;
    }
    .price-per-item__container {
        justify-content: center;
    }
}
7

This worked perfectly thank you so much!

8

Hi @btrflybld

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts. :white_check_mark:

Best regards,
Devcoder :laptop:

9

@devcoders Can you assist me with making the “Add to Cart” button a smaller width on mobile, similar to how the featured collection “Shop More” button appears?

10

Hi @btrflybld

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
@media (max-width: 749px) {
  .product-form__buttons {
    max-width: 16rem;
    margin: 0 auto;
  }
}

image
image204×368 18.9 KB

11

Unfortunately this did not work

12

Hi @btrflybld

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottow of the file:
@media (max-width: 749px) {
  .product-form__buttons {
    max-width: 16rem!important;
    margin: 0 auto;
  }
}

image
image374×555 51.3 KB

13

@devcoders Thanks so much! That one worked.

14

Hi @btrflybld

Thank you for getting back to me. I’m happy to hear that it worked for you. Should you need any further help, please don’t hesitate to reach out. If you found the post helpful, kindly consider giving it a like.

Best regards,
Devcoder :laptop: