Change the widths of checkout fields?

  • Resolved med015

    (@med015)


    1 year, 8 months ago

    Hi.

    How to change the widths (lengths) of shipping & billing fields ON ALL DEVICES like that:

    1st row: First name (50%) & Second name (50%)

    2nd row: Address (full width)

    3th row: Country (50%) & City (50%)

    4th row: State (50%) & Postcode (50%)

    (This is the default Woocommerce checkout block, but It does not appear to be the same on mobile version…)

    Or:

    1st row: First name (50%) & Second name (50%)

    2nd row: Address (66%) & Postcode (33%)

    3th row: Country (33%) & State (33%) & City (33%)

    I tried to apply some CSS by myself but failed, it wasn’t responsive on all devices. Thank you.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Saif

    (@babylon1999)

    Hello @med015,

    I checked out your checkout page and it looks like the fields are set up the way you want them to be. I’m not sure if you’ve already figured it out or if I misunderstood your request.

    Screencast: https://d.pr/v/dEZe2v

    Let us know if there’s anything else we can do to help.



    Thread Starter med015

    (@med015)

    Hi Saif

    Yes, they look fine on desktop. But on mobile… the fields are in full widths. Take a look:

    https://dog4love.com/wp-content/uploads/2023/03/Checkout.png

    • This reply was modified 1 year, 8 months ago by med015.
    Thread Starter med015

    (@med015)

    Did you tested it on phone screens that are less than 430 in width?

    eg: iphone 11 pro max (414)

    Thread Starter med015

    (@med015)

    I fixed it, I applied some CSS codes, if you have any suggested modifications… then let us now: 

    /* Checkout */@media only screen and (max-width:430px) {#shipping > div:nth-child(1), #billing > div:nth-child(1) {	/* First name */	max-width:50%;	display: inline-block;	padding-right:3px;	float:left;}#shipping > div:nth-child(2), #billing > div:nth-child(2) {	/* Last name*/	max-width:50%;	display: inline-block;	padding-left:3px;	}#shipping > div:nth-child(4), #billing > div:nth-child(4) {	/* Country */	min-width:50%;	max-width:50%;	display: inline-block;	padding-right:3px;	float:left;}#shipping > div:nth-child(5),#billing > div:nth-child(5) {	/* City */	max-width:50%;	display: inline-block;	padding-left:3px;}#shipping > div:nth-child(6),#billing > div:nth-child(6) {	/* State */	max-width:50%;	display: inline-block;	padding-right:3px;	float:left;}#shipping > div:nth-child(7),#billing > div:nth-child(7) {	/* Postcode */	max-width:50%;	display: inline-block;	padding-left:3px;}}

    Roxy

    (@roxannestoltz)

    Hi @med015 ,

    Glad to hear that you managed to get this sorted!

    I will go ahead and mark this as resolved then. Feel free to create a new topic if you need further help ??

    Cheers!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change the widths of checkout fields?’ is closed to new replies.