Checkoutpage – How can I move content to the left?

Hi Kameraten

Are you trying to create more room for the grey text?

Also, posting a link to your website could help.

Yep, more room for the grey text.

Here is my website:
https://www.smart-kit.no/

And on checkout-page:
https://www.smart-kit.no/checkout (have to add something to cart)

https://www.smart-kit.no/utstyrspakke/triathlon-utstyr/

Enter “KJ?P” then my picture will show.

I would use a child theme, if you don’t already have one.

Then, in your child theme’s style.css file, you could put something like this:

form.checkout .shop_table tfoot th {
  width: 70%;
}

This code causes the left-hand column to be less wide, allowing the right-hand column to be wider. You can play with the % until it looks good to you.

For smaller screens (like mobile phones), you might want to also ad something like this:

@media screen and (max-width: 800px) {
  form.checkout .shop_table tfoot th {
    width: 40%;
  }
}

The first line of that code means that it will only apply to screens under 800px. In this case, the left-hand column will be even less wide, allowng the right-hand column to be even wider. You can play with the px make this code active for a different screen size.

PS – I am not a CSS expert, I just play around with it until it seems to work.

Thank you very much, Brother. It worked perfectly.