Checkout: Resizing texts and removing margins in mobile (woocommerce one page checkout plugin)

[educainventions]

The checkout page of the Woocommerce one page checkout plugin is ugly in mobile. Fortunately, you are an awesome support and you are helping me actually a LOT to improve it. Thanks! This is the page: http://www.edinventa.com/checkout/

1. The title is too big and broken into two lines in mobile. So we need to reduce it a little bit and remove all margins and paddings. I have been able to do it in Chrome Inspector, but my CSS skills are horrible. See the screenshot below. One thing I detected is that .entry-title is not set as 100%. It produces that the line is either broken into two lines or non centered.

2. The rest of the texts are quite big. So I want to reduce them to font-size:1rem; and modifying the padding and margins to 0.

How can I modify it in the Global CSS file?

Thanks so much!!

Carlos

[Prasant]

Hello @educainventions,

Thanks for asking.

Please add following CSS under Pro > Theme Options > CSS to make necessary changes in checkout page:

@media only screen and (max-width: 600px) {
    .woocommerce-checkout .entry-title {
    font-size: 150%;
    padding: 0;
}

label {
    font-size: 1rem;
}
}

Let us know how it goes.

Thanks.

[educainventions]

Hi! The title is still too big. Also, how to remove the margins? (I don’t know how to select that specific header with css). The idea is that the title fits in a single line

On the other hand, I’m worried about the label because it affects to the whole site, right? Shouldn’t it affect only to the checkout page?

The page looks as follows in mobile with the css code

[ruenel]

Hello There,

Instead of using percent, you can use 1em or fixed pixel like 18px.

@media only screen and (max-width: 600px) {
  .woocommerce-checkout .entry-title {
      font-size: 1em; 
      padding: 0;
  }

  .woocommerce-checkout label {
      font-size: 1rem;
  }
}

I also included in the code so that only the label on that page will be styled.

Please let us know if this works out for you.

[educainventions]

It’s perfect! Thank uuuuuuuuuu

Carlos

[ruenel]

You are most welcome!