Style buttons in shortcode for mobile

  • Resolved stianand

    (@stianand)


    5 years, 3 months ago

    I want to add padding to “add to cart” – buttons from shortcode. I have tried this:

    @media (max-width:1024px){
    .woocommerce .product .add_to_cart_button.button {
padding-top: 10px;
padding-bottom: 10px;
}
}

    But it didn’t work. I also want to add padding left and right

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Peter Lawrenson

    (@lorro)

    5 years, 3 months ago

    I analysed this page:
    https://www.gimme.no/produkter/titelist-pro-v1/
    using this tool:
    http://jigsaw.w3.org/css-validator/
    and your css is not in the page. Where did you put it?

    Can you put it at:
    Dashboard > Appearance > Customize > Additional CSS

    Thread Starter stianand

    (@stianand)

    5 years, 3 months ago

    I had put the code in Custom CSS on the actual shortcode via Elementor. I have now moved the code to Dashboard > Appearance > Customize > Additional CSS, but still no luck on changing the mobile buttons.

    Peter Lawrenson

    (@lorro)

    5 years, 3 months ago

    Its not working because elementor is also styling this element and its using a selector that takes precedence.

    The fix is to use !important on your style, so that your style takes precedence over the one from elementor.

    .woocommerce .product .add_to_cart_button.button {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
    Thread Starter stianand

    (@stianand)

    5 years, 3 months ago

    So, when I do this:

    .woocommerce .product .add_to_cart_button.button {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 80px;
padding-right: 80px;
}

    It affects both mobile devices, and desktop. But if I do this ( in addition):

    @media (max-width:1020){
    .woocommerce .product .add_to_cart_button.button {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	padding-left: 50px !important;
	padding-right: 50px !important;
}
}

    It has no effect at all. I just need to add left and right padding to the buttons on mobile devices.

    Peter Lawrenson

    (@lorro)

    5 years, 3 months ago

    You’ll need to add px after the 1020:
    @media (max-width:1020px){

    There could be other issues, so come back if its still not working.

    Thread Starter stianand

    (@stianand)

    5 years, 3 months ago

    Ahh! of course. It’s sorted now

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

The topic ‘Style buttons in shortcode for mobile’ is closed to new replies.