[IlirBajramiParticipant]

as i styled the woocommerce login/register page using this css code

.woocommerce .col-1 {
  width: 50%;
  float: left !important;
}

@media screen and (max-width: 768px) {
.woocommerce .col-1,  form.register input, .woocommerce .col-2,  form.login input {
  width: 100% !important;
  float: none !important;
}
} 

, today i realized that the “checkout” page is somehow mixed up. the billing address and the shipping address mix with each other. can we style that a little bit to display as it should? id like the two forms to display a little smaller so they fit into the page next to each other, and of course i want them to be responsive.

thnx

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[IlirBajramiParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

You can try replacing your code with following:

:not(.woocommerce-checkout) .woocommerce .col-1 {
  width: 50%;
  float: left !important;
}

@media screen and (max-width: 768px) {
:not(.woocommerce-checkout) .woocommerce .col-1, :not(.woocommerce-checkout) form.register input, :not(.woocommerce-checkout) .woocommerce .col-2, :not(.woocommerce-checkout) form.login input {
  width: 100% !important;
  float: none !important;
}
} 

The code may not work perfectly in your setup and you might need to update it to work as per your needs. While we love to help our users, we cannot really provide solution to the issues causes by custom CSS or template modifications. As such, you will need to investigate this issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[IlirBajramiParticipant]

ok X,
thanxs for ur tips, u helped me a lot and thanks for motivating me to code it myself and not being lazy 😉 below is the code i used to style the woocommerce pages for everyone else who wants to make these changes:

#customer_login .col-1, #customer_login .col-2 {
  width: 43%;
  float: left !important;
  border-style: solid;
  border-width: 3px;
  border-color: #b7b7b7;
  border-radius: 5px;
  padding: 10px;
  margin: 5px;
  
}

.woocommerce-checkout .col-1, .woocommerce-checkout .col-2 {
  width: 43%;
  float: left !important;
  border-style: solid;
  border-width: 3px;
  border-color: #b7b7b7;
  border-radius: 5px;
  padding: 10px;
  margin: 5px;
  
}

.woocommerce-account .col-1, .woocommerce-account .col-2 {
	
  width: 10%;
  float: left !important;
  border-style: solid;
  border-width: 3px;
  border-color: #b7b7b7;
  border-radius: 5px;
  padding: 5px;
  margin-right: 0;
}

#order_review, #order_review_heading {
	
	width: 100% !important;
	float: left;
	padding-top: 50px;
	
}

#ship-to-different-address{
	
	margin-top: 0;
}

@media screen and (max-width: 768px) {
.woocommerce .col-1, form.register input, .woocommerce .col-2, form.login input {
  width: 100% !important;
  float: none !important;
}
} 

[FriechModerator]

With pleasure! we’re happy to assist you with this, thanks for sharing. Cheers!

[Author]

Posts