How to align product options on product page?

Store Design

Topic summary

Issue: On the Shopify “Studio” theme, product info (title, vendor, price, options) is left-aligned on mobile while the main image is centered; the request is to center product info on mobile only.

Actions taken:

  • Store URL and password shared for review. A screenshot was posted to show the desired centered layout on mobile.
  • Proposed CSS solution (mobile breakpoint at max-width: 749px):
    • Approach 1 (Abdi): Add a new class “center-label__mobile” to product info elements (product__text, product__title, price, product__tax, form__label), then use a media query to apply text-align: center; adjust product-form__input max-width and center quantity with margin: auto.
    • Approach 2 (Ketan, for Studio): In Assets > base.css, add a media query to center .product__info-wrapper and set auto margins for .product-form__input .select, .quantity, and share buttons.

Clarifications: “Mobile devices” are defined as 749px and below; the file to edit in Studio is base.css (not theme.css).

Outcome: The Studio-theme user acknowledged the help; implementation success not explicitly confirmed.

New request: Another user with the “Prestige” theme reported the same issue and shared a password-protected URL; a tailored solution is pending. Status: ongoing.

Summarized with AI on December 24. AI used: gpt-5.
1

Hi,

I’m using the free Shopify theme “Studio” and everything looks great on the product page, except when on mobile devices

The product information (for example: title, vendor, price and variable dropdowns) align to the left beneath the main product image which is centered.

It looks unprofessional.

Can somebody please offer me some code to center the product information, when on mobile devices only?

I hope someone can help me.

Thanks!

2 Likes
2

@storenewb

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.

1 Like
3

Hello @storenewb , please link your store so I can provide you with the CSS solution. Thanks!

4

Good evening KetanKumar,

Thank you for your kind offer to help me. The URL is: https://alambingart.com/products/disco-poodle-wall-art-print

URL password is: happiness

Kind regards

1 Like
5

Hi @storenewb ,

Are you looking for something like this?

Screen Shot 2022-06-16 at 3.56.52 PM.png
Screen Shot 2022-06-16 at 3.56.52 PM.png614×1234 316 KB

1 Like
6

Hi Abdi_Issak,

Yes, that’s perfect, thank you!

This is just for mobile devices isn’t it, not desktop?

Please can you share the code.

Kind regards

7

@storenewb yeah Mobile Devices are 749px and below.

8

You have to go into your product section:

Step 1) for all of the elements that have a class of:

“product__text”, “product__title”, “price”, “product__tax”, “form__label” add to their classlist “center-label__mobile”.

Then add this to the bottom of your theme.css

@media only screen and (max-width: 749px) {
	.center-label__mobile {
		text-align: center;
	}

	.product-form__input {
		max-width: none;
	}
	
	.quantity {
		margin: auto;
	}

}
9

@storenewb

If you have any issues with the solution I sent you, shoot me a private message (on my profile) and I will enter it in for free. Thank You

10

Good evening @KetanKumar (apologies, I replied yesterday but didn’t realize I needed to tag you into my reply).

Thank you for your kind offer to help me. The URL is: https://alambingart.com/products/disco-poodle-wall-art-print

URL password is: happiness

Kind regards

11

@storenewb

thanks can you add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {
.product__info-wrapper {
    text-align: center;
}
.product-form__input .select {
    margin: 0px auto;
}
.product-form__input .quantity {
    margin: 0px auto;
}
.share-button__button, .share-button__fallback button {
    margin: 0px auto;
}
}
3 Likes
12

Thank you for your reply @Abdi_Issak ,

There is not a file “theme.css”, however?

Kind regards

1 Like
13

@KetanKumar

Thank you so much for your help, it is really appreciated!

Kind regards

1 Like
14

I’m Having the same issue on my product page my them is prestige kindly give solution if anyone have

1 Like
15

@Jignesh09

Thank you for reaching out and posting this question!
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.

16

https://phonelux.in/collections/iphone/products/butterfly-glass-case-copy-5

use password phonelux