Ho do i make a round color circle around the icon in mobile penel

This topic has 8 replies, 3 voices, and was last updated 1 year, 5 months ago ago by Tony Rodriguez

  • Avatar: Kazi Sabit
    Kazi Sabit
    Participant
    October 24, 2022 at 12:46

    Ho do i make a round color circle around the icon in mobile panel. Like this 👇

    https://prnt.sc/x1pahvDdaRwm

    7 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 24, 2022 at 13:04

    Hello,

    Custom CSS can be used, for example – https://prnt.sc/Erm4CM8CpqAX

    .et_b_mobile-panel-shop a {
        padding: 9px;
        background-color: red;
        border-radius: 100px;
        color: white;
    }

    Regards

    Avatar: Kazi Sabit
    Kazi Sabit
    Participant
    October 25, 2022 at 17:44

    The circle is egg shaped https://prnt.sc/kfwdIRPBxwpo

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    October 25, 2022 at 22:40

    Add this code also:
    .et_b_mobile-panel-shop .et_b-icon+span {
    display: none !important;
    }
    > https://prnt.sc/1g3XvrnidZMa

    Regards

    Avatar: Kazi Sabit
    Kazi Sabit
    Participant
    October 26, 2022 at 03:04

    If i add this, text is gone. Can i make it round with text? And if i want to make the same thing with the cart button should i just replace shop (with cart)

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    October 26, 2022 at 06:25

    Hello, @Kazi Sabit,

    Unfortunately, this is not possible to make it as round with the content as because it has a small space, let me try to explain it to you, If you set the border-radius to the maximum value as 100% in the very first code that we gave you, it will work like this: https://postimg.cc/Kk4X2xkW because that code will apply on the complete div having that icon and content under it, so because of the small space in the mobile it will not be round, but oval, If you want to check the size then you can try to change the padding value in that code as per your requirements: https://postimg.cc/2bJ5pH64

    And regarding applying that same code on the cart, you have to pick the cart class in the code, and the code will be: https://postimg.cc/LgB3QZ4F https://postimg.cc/rzP4cJbZ

    .et_b_mobile-panel-cart a {
        padding: 9px;
        background-color: red;
        border-radius: 100%;
        color: white;
    }

    Regards 8Themes Team.

    Avatar: Kazi Sabit
    Kazi Sabit
    Participant
    October 26, 2022 at 06:48

    Ok

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    October 26, 2022 at 07:06

    Hello, @Kazi Sabit,

    Thanks for your understanding and for contacting us.
    Feel Free to generate a new topic, for the new issues, we are always here to help you, Thanks for contacting us.

    Have a great day 🙂

    Topic Closed.
    Regards 8Themes Team.

  • Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘Ho do i make a round color circle around the icon in mobile penel’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.