Address Fields with Additional CSS
-
I use the following code to organize the address fields. However, it’s causing an incorrect appearance on mobile. If I delete the “margin-top: -89px;” it is OK on mobile but it displayed incorrectly on the desktop side. For both views, custom css was working fine before the update, but it brokes after the update. How can I fix?
Appearance → Customize → Additional CSS:
ul li.meta-author {
display: none;
}
#billing_country_field {
display: none;
}
.woocommerce .includes_tax .amount {
display: none;
}
//CSS Basi
.fullwidth_custom{width: 100% !important;}
#billing_first_name_field{width: 48%;float:left;}
#billing_last_name_field{width: 48%;float:right;}
#billing_city_field{width: 48%;float: left;}
#billing_state_field{width: 48%;float: right;margin-top: -89px;}
#billing_phone_field{width: 48%;float: left;}
#billing_email_field{width: 48%;float: right;margin-top: -89px;}
//CSS Sonu
Attachments:
You must be
logged in to view attached files.
Hello,
The Custom CSS area has the Mobile and Desktop CSS areas which will help you to apply some code to the mobile or desktop only. It means that you can use the above code for Desktop only, and for mobile, you could change it a little bit, thus it will work well for both devices.
https://prnt.sc/hZ03nkQ2zcg6
https://prnt.sc/W3I0_-5bScL1
Kind Regards
But when I click “Appearance → Customize → Additional CSS:” there is only one field called “Additional CSS”. I don’t see any dedicated space for mobile and desktop.
Attachments:
You must be
logged in to view attached files.
Hello,
You should use our areas for the custom CSS code, you can find them in Theme Settings -> Custom CSS.
Thanks for your patience. Hopefully, you are doing well.
Kind Regards