Docs

[mat_kinotek]

Hello,
I’m styling the shipping section at check out and I was able to make it look almost good, the problem is that when i use a smaller screen, the fields get out of control (see screenshots).

this is the code i have:
ad example, I had to move ‘p#shipping_postcode_field’ up to several px ( margin-top: -12.66%; ) which causes problem when resizing the screen. Im sure im doing something wrong, what is the correct way?

The check out is here: https://cherrylaser.com/shop/checkout/ (you have to add some product first )
Thanks!

div.woocommerce-shipping-fields {
margin-top: -60px;
}

#shipping_first_name_field, #shipping_last_name_field, p#shipping_company_field, p#shipping_country_field, p#shipping_address_1_field, p#shipping_address_2_field, p#shipping_city_field, p#shipping_state_field, p#shipping_postcode_field {
width: 31.666%;
float: left;
margin-right: 12px;
}

p#shipping_address_2_field {
margin-top: 3.4%;
}

p#shipping_postcode_field {
float: left;
margin-top: -12.66%;
}

[Rue Nel]

Hello There,

Thanks for writing in! To resolve this issue and be able to display correctly on smaller screens, please have your code update and use this instead:

@media(min-width: 980px){
  div.woocommerce-shipping-fields {
    margin-top: -60px;
  }

  #shipping_first_name_field, #shipping_last_name_field, p#shipping_company_field, p#shipping_country_field, p#shipping_address_1_field, p#shipping_address_2_field, p#shipping_city_field, p#shipping_state_field, p#shipping_postcode_field {
    width: 31.666%;
    float: left;
    margin-right: 12px;
  }

  p#shipping_address_2_field {
    margin-top: 3.4%;
  }

  p#shipping_postcode_field {
    float: left;
    margin-top: -12.66%;
  }
}

Please let us know if this works out for you.

[mat_kinotek]

that looks better thanks, but im still having problems with iphone or ipad screens (pls see screenshots):
https://cherrylaser.com/shop/checkout/

[Rue Nel]

Hello There,

Thanks for the updates! It sounds like you might be having an issue with a third party plugin, Checkout Timeline. Regretfully, we cannot provide further support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[Author]

Posts