Docs

[mat_kinotek]

Hi,
what is the CSS to align 3 fields on the same row? Here https://cherrylaser.com/?page_id=9 (add something from the shop page here first: https://cherrylaser.com/?page_id=7 ) i need to have ‘First name’ ‘Second name’ and ‘business name’ on the same row, so the check out is more compact.
Thanks!

[Rad]

Hi there,

Thanks for writing in.

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

  	#billing_first_name_field,
  	#billing_last_name_field,
	#billing_company_field{
 		 width: 30.6% !important;
		 float: left !important;
         margin-right: 4%;
  	}
	#billing_company_field {
		 margin-right: 0;
	}

That should do it, cheers!

[mat_kinotek]

Thank you,
I though I could edit the layout of the other fields using your code as well, but i cannot get my head around it-
can you please let me know the CSS to arrange the other fields as well. I need a layout as in the screenshots attached- both
for the ‘billing’ and ‘ship to a different address’ sections.
thanks!

[Christopher]

Hi there,

Please update previous code to :

@media (max-width:767px){
p#billing_phone_field,p#billing_postcode_field,p#billing_phone_field {
    margin-right: 0 !important;
}
#billing_first_name_field, #billing_last_name_field, #billing_company_field, p#billing_company_field, p#billing_email_field, p#billing_phone_field, p#billing_city_field, p#billing_state_field, p#billing_postcode_field {
    width: 30.6% !important;
    float: left !important;
    margin-right: 4%;
}
p#billing_address_1_field, p#billing_address_2_field {
    width: 48%;
    float: left;
    margin-right: 4%;
}
p#billing_address_2_field {
    margin-top: 28px;
    margin-right: 0;
}
}

Hope it helps.

[mat_kinotek]

it doesnt work, i think there is something wrong in the first liens of code? (p#billing_phone_field , …)

@media (max-width:767px){
p#billing_phone_field,p#billing_postcode_field,p#billing_phone_field {
margin-right: 0 !important;
}

[Christopher]

Hi there,

Sorry my mistake, update previous code to :

@media (min-width:767px){
p#billing_phone_field,p#billing_postcode_field,p#billing_phone_field {
    margin-right: 0 !important;
}
#billing_first_name_field, #billing_last_name_field, #billing_company_field, p#billing_company_field, p#billing_email_field, p#billing_phone_field, p#billing_city_field, p#billing_state_field, p#billing_postcode_field {
    width: 30.6% !important;
    float: left !important;
    margin-right: 4%;
}
p#billing_address_1_field, p#billing_address_2_field {
    width: 48%;
    float: left;
    margin-right: 4%;
}
p#billing_address_2_field {
    margin-top: 28px;
    margin-right: 0;
}
}

Hope it helps.

[mat_kinotek]

great thanks it works!
I’m trying to edit the ‘shipping’ field too, what is the CSS for that?
Thanks!

[Christopher]

Hi there,

Please provide us with mockup and let us know how it should look.

Thanks.

[mat_kinotek]

hi please find the screenshot attached (it’s not perfect but hope it gives an idea).
I also need to scale down the drop down menu so that it doesnt fill up the whole page to choose the country (see second screenshot attached)
thanks!

[Paul R]

Hi,

You can copy the code provided above then change the text billing with shipping

Hope that helps.

[mat_kinotek]

I added this code but didn’t work:
any hint?

And, any suggestion on how to make the drop-down menu window of the ‘country’ field smaller?
Thanks!

@media (max-width: 767px) {
p#shipping_phone_field,p#shipping_postcode_field,p#shipping_phone_field {
margin-right: 0 !important;
}
#shipping_first_name_field, #shipping_last_name_field, #shipping_company_field, p#shipping_company_field, p#shipping_email_field, p#shipping_phone_field, p#shipping_city_field, p#shipping_state_field, p#shipping_postcode_field {
width: 30.6% !important;
float: left !important;
margin-right: 4%;
}
p#shipping_address_1_field, p#shipping_address_2_field {
width: 48%;
float: left;
margin-right: 4%;
}
p#shipping_address_2_field {
margin-top: 28px;
margin-right: 0;
}
}

[Rue Nel]

Hello There,

Thanks for the updates. I did a thorough investigation and I could see the custom css on the page. If you happen to remove it, could you please add it back again?

Thank you.

[mat_kinotek]

do you mean the shipping code?
It’s back on the CSS now. But still not working..

[mat_kinotek]

and also, with the code you gave me the layout is good, but I cannot modify the ‘first name’ and ‘last name’ fields anymore. All the other fields work well, but when I try to add a name and last name nothing happens, i cannot click in the field. It looks like the field is locked or something.
I removed your code and these 2 fields came back editable so it’s in the code, but I’m not able to identify where.

To try yourself, add the product on the cart here: http://cherrylaser.com/shop/acrylics-mirror/ and proceed to check out. In the billing section you’ll you cannot add first name and last name.
Thanks!

[Rue Nel]

Hello There,

The country field is covering the name field. To resolve both issues, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

#billing_country_field {
    clear: both !important;
}

Hope this helps. Kindly let us know.

[Author]

Posts