Jump to content

How to customize form width on mobile

Recommended Posts

Hi everyone,

I'm looking to add some CSS in order to customize the form width on my product page on mobile display only.

I need the desktop form width to be 50%, and the mobile form width to be 100%, but whenever I change the form width display it affects both displays.

If the form width is 100%, it looks great on mobile, but on desktop the 'add to cart' button is way too big & it looks silly.

If the form width is 50%, it looks great on desktop, but on mobile the product variants stack up in an odd order.

Screenshots attached for reference.

Thank you in advance! 🙂

WANT - Mobile 100%form width.png

DONT WANT - Mobile 50% form width.png

WANT - Desktop 50% form width.png

DONT WANT - Desktop 100% form width.png

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

18 hours ago, threadsonline said:

Hi everyone,

I'm looking to add some CSS in order to customize the form width on my product page on mobile display only.

I need the desktop form width to be 50%, and the mobile form width to be 100%, but whenever I change the form width display it affects both displays.

If the form width is 100%, it looks great on mobile, but on desktop the 'add to cart' button is way too big & it looks silly.

If the form width is 50%, it looks great on desktop, but on mobile the product variants stack up in an odd order.

Screenshots attached for reference.

Thank you in advance! 🙂

WANT - Mobile 100%form width.png

DONT WANT - Mobile 50% form width.png

WANT - Desktop 50% form width.png

DONT WANT - Desktop 100% form width.png

What is the website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.