Mobile Layout Woocommerce

  • Hi,
    Just started using your theme for a new woo commerce store. For most of the site it works really well.

    However when its in responsive mode on my phone, the add to basket button under the product overlap each other and looks pretty squished up.

    My Site https://www.petproductsonline.co.uk (its only a test site at the moment).

    Is there any easy way to fix this with some CSS code?

    Many thanks

    Steve

Viewing 4 replies - 1 through 4 (of 4 total)

  • Try this

    .coupon .button {
    margin-bottom: 2px;
}

    Thread Starter stevespi

    (@stevespi)

    Hi,

    Thanks for the code. However didn’t seem to change it.

    It’s on the main shop page where the products are in a grid format.

    Works great on all the other pages on my mobile. Just that page.

    Many thanks

    Steve

    Thread Starter stevespi

    (@stevespi)

    Hi,

    Thanks for the code. However didn’t seem to change it.

    It’s on the main shop page where the products are in a grid format.

    Works great on all the other pages on my mobile. Just that page.

    Many thanks

    Steve

    You need @media to control the smaller viewports. For iPhone5, you can then try:

    .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button {
  font-size: 50%;
  width: 50%;
}

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Mobile Layout Woocommerce’ is closed to new replies.