Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 3, 2024 at 5:12 pm #1466150
    joguitar

    Greetings,
    I needed to enlarge the icons of this widget and I found this css that worked.

    
.avia-icon-circles-icon {
    height: 120px !important; 
    width: 120px !important; 
    line-height: 120px !important;
    font-size: 075px !important;
}

    In this way, however I have two problems:
    – the icons are not centered on the circle
    – remain the same size by changing the screen size (desktop, mobile)

    How can this problem be solved?

    is there a section where you can find the css commands to adjust the widget parameters?

    Thank you

    September 4, 2024 at 5:22 am #1466178
    Ismael

    Hey joguitar,

    Thank you for the inquiry.

    To fix the alignment, please replace the css with the following code:

    .responsive #top .avia-icon-circles-icon {
    height: 120px;
    width: 120px;
    line-height: 120px;
    font-size: 75px;
    margin: -60px;
}

    Best regards,
    Ismael

    September 4, 2024 at 10:01 am #1466197
    joguitar

    perfect Ismael, thanks!
    Is it possible to set these parameters for the three resolutions desktop, tablet and mobile?

    September 5, 2024 at 4:42 am #1466272
    Ismael

    Hi,

    Is it possible to set these parameters for the three resolutions desktop, tablet and mobile?

    Yes, that should be possible. Please add the following code and adjust the values as needed.

    /* Styles for tablets */
@media (max-width: 1024px) {
    .responsive #top .avia-icon-circles-icon {
        height: 100px;
        width: 100px;
        line-height: 100px;
        font-size: 60px;
        margin: -50px;
    }
}

/* Styles for mobile devices */
@media (max-width: 768px) {
    .responsive #top .avia-icon-circles-icon {
        height: 80px;
        width: 80px;
        line-height: 80px;
        font-size: 45px;
        margin: -40px;
    }
}

    Best regards,
    Ismael

    September 5, 2024 at 9:12 am #1466294
    joguitar

    Perfect, tnx

    September 5, 2024 at 10:53 am #1466300
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    September 5, 2024 at 10:55 am #1466301
    joguitar

    you can close it,
    thank you

    September 5, 2024 at 4:39 pm #1466321
    Rikard

    Hi,

    Thanks for letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Icon Circle settings and responsive’ is closed to new replies.