Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 25, 2024 at 11:35 am #1440799
    ballindigital

    Hi,

    I’ve created a WooCommerce site:

    Home

    The issue I’m having is that on mobile view, the cart button is very hard to press because the clickable are is so thin.

    Here is a picture showing the actual size.

    View post on imgur.com

    The danger is that customers with fat fingers will find it hard to press the button and may sometimes give up and not buy thinking there’s an error.

    Is there a way to increase the clickable area here?

    Thanks,

    Harvinder

    April 26, 2024 at 3:06 am #1440883
    Ismael

    Hey ballindigital,

    Thank you for the inquiry.

    The cart button appears thin because the padding has been removed with this css code:

    #menu-item-shop .cart_dropdown_link {
    padding: 0;
}

    You can increase it back by adjusting the css code.

    #menu-item-shop .cart_dropdown_link {
    padding: 0 10px;
}

    Best regards,
    Ismael

    April 26, 2024 at 11:13 am #1440939
    ballindigital

    Hi Ismael,

    Thanks for your response,

    The problem is, even with 5px padding, it throws off the menu layout.

    View post on imgur.com

    Is there any way around this?

    Thanks,

    Harvinder

    April 27, 2024 at 5:34 pm #1441067
    Rikard

    Hi,

    Thanks for the update. There is not enough space for all the items to display inline on small screens, how are you looking to align the different items?

    Best regards,
    Rikard

    April 27, 2024 at 5:40 pm #1441071
    ballindigital

    Hi Rikard,

    I wanted them to look like they are but the cart button to be easier to click.

    It’s really hard to click right now,

    Thanks,

    Harvinder

    April 29, 2024 at 7:16 am #1441247
    Ismael

    Hi,

    You can also include this css code to decrease the space between the burger menu and the search icon:

    .responsive #top #header_main > .container .main_menu .av-main-nav > li.av-burger-menu-main.menu-item-avia-special > a {
    padding: 0 0 0 15px;
    margin-right: 0;
}

.responsive #top #menu-item-shop.cart_dropdown {
    margin-left: 0;
}

    There’s no other way to increase the clickable area of the cart icon without increasing its container size.

    Best regards,
    Ismael

    May 1, 2024 at 9:39 pm #1441636
    ballindigital

    Hi,

    This is definitely better,

    Is there a way to make the actual icon bigger as it’s been pushed down.}

    View post on imgur.com

    I’d like it to be the same size as the others.

    I’m hoping all of this css doesn’t conflict with each other..

    Thanks,

    Harvinder

    May 2, 2024 at 5:47 am #1441755
    Ismael

    Hi,

    Thank you for the info.

    We adjusted the code in the Quick CSS field a bit. Please make sure to purge the cache before checking the page.

      #menu-item-shop .cart_dropdown_link {
    padding: 10px;
    font-size: 20px
  }

  .responsive.html_cart_at_menu #top .main_menu .menu>li:last-child {
    padding-right: 0;
    margin-right: 10px;
  }

    Best regards,
    Ismael

    May 2, 2024 at 11:27 am #1441865
    ballindigital

    Hi,

    I’m assuming that you adjusted the CSS yourselves?

    View post on imgur.com

    It’s still aligned with the others symbols?

    I am picky I know..

    Thanks,

    Harvinder

    May 3, 2024 at 4:29 am #1442028
    Ismael

    Hi,

    Sorry about that. We adjusted the css code again. Please make sure to purge the cache before checking.

    Best regards,
    Ismael

    May 3, 2024 at 12:45 pm #1442143
    ballindigital

    Much better – thank you so much!

    May 3, 2024 at 2:49 pm #1442188
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Increase Button Size for Cart’ is closed to new replies.