responsive icon circle widget - Support | Kriesi.at

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
September 21, 2024 at 1:41 pm #1467564

joguitar
Participant

Hi, can you tell me what I did wrong?

with a full screen the icons are small, by reducing it they enlarge until they become small again when I reach the minimum resolution

/* Styles for desktop */
@media only screen and (min-width: 1024px) {
.responsive #top .avia-icon-circles-icon {
2 height: 120px !important;
width: 120px !important;
line-height: 120px !important;
font-size: 75px !important;
margin: -60px
}
}

/* Styles for tablets */
@media only screen and (min-width: 767px)and (max-width: 1023px) {
.responsive #top .avia-icon-circles-icon {
height: 80px !important;
width: 80px !important;
line-height: 80px !important;
font-size: 60px !important;
margin: -40px;
}
}

/* Styles for mobile devices */
@media only screen and (max-width: 766px) {
.responsive #top .avia-icon-circles-icon {
height: 50px !important;
width: 50px !important;
line-height: 50px !important;
font-size: 30px !important;
margin: -25px;
}
}

second question: can I also set the font size of the description within these parameters?
tnx

September 21, 2024 at 6:18 pm #1467575

Rikard
Keymaster

Hey joguitar,

Could you post a link to where we can see the element in question, and try to explain the problem you are having a bit further please?

Best regards,
Rikard

September 21, 2024 at 9:19 pm #1467581

joguitar
Participant

Unfortunately I’m developing it on my computer. I’ll give you a link to see what it does:
initially the icons should be large and then move to medium and become small as the screen becomes smaller.
the text in the description should also change accordingly from large to small
instead the icons are initially small, then increase and then become small again.

September 22, 2024 at 7:52 pm #1467617

Mike
Moderator

Hi,
When I check your css above you have an error, a number “2” next to the “height”

when I remove this and test on my site everything seems to work fine:
desktop:
120px

laptop:
80px

mobile:
50px

Please check your css, if you have further trouble, try disabling your other custom css as you may have a conflict. If this doesn’t help then please put your site online and include a admin login in the Private Content area so we can examine

Best regards,
Mike

September 23, 2024 at 10:59 am #1467651
joguitar
Participant
this code is now working:
```
/* 
 * ICON CIRCLE WIDGET RESPONSIVE SETTING
 * 
 * Stile per desktop
 * */
@media screen and (min-width:  1301px) {
    .responsive #top .avia-icon-circles-icon {
        height: 120px !important;
        width: 120px !important;
        line-height: 110px !important;
        font-size: 85px !important;
            }
}

/* Stile per tablet */
@media screen and (min-width: 1024px) and (max-width: 1300px) {
    .responsive #top .avia-icon-circles-icon {
        height: 90px !important;
        width: 90px !important;
        line-height: 80px !important;
        font-size: 65px !important;
            }
}

/* Stile per cellulari */
@media screen and (max-width: 1023px) {
    .responsive #top .avia-icon-circles-icon {
        height: 60px !important;
        width: 60px !important;
        line-height: 55px !important;
        font-size: 40px !important;
            }
}
```
can I insert setting for the description text font eight?
September 23, 2024 at 2:23 pm #1467667
Rikard
Keymaster
Hi,

Thanks for the update. You can use this selector for the description text:
```
.avia-icon-circles-icon-text-inner .icon-description p
```
Best regards,
Rikard
September 23, 2024 at 3:29 pm #1467673
joguitar
Participant
now is perfect!
```
/* 
 * ICON CIRCLE WIDGET RESPONSIVE SETTING
 * 
 * Stile per desktop
 * */
@media screen and (min-width:  1301px) {
    .responsive #top .avia-icon-circles-icon {
        height: 120px !important;
        width: 120px !important;
        line-height: 110px !important;
        font-size: 85px !important;
            }
	.avia-icon-circles-icon-text-inner .icon-title {font-size: 35px }
	.avia-icon-circles-icon-text-inner .icon-description {font-size: 24px }
}

/* Stile per tablet */
@media screen and (min-width: 1024px) and (max-width: 1300px) {
    .responsive #top .avia-icon-circles-icon {
        height: 90px !important;
        width: 90px !important;
        line-height: 80px !important;
        font-size: 65px !important;
            }
	.avia-icon-circles-icon-text-inner .icon-title {font-size: 24px }
	.avia-icon-circles-icon-text-inner .icon-description {font-size: 18px }
}

/* Stile per cellulari */
@media screen and (max-width: 1023px) {
    .responsive #top .avia-icon-circles-icon {
        height: 60px !important;
        width: 60px !important;
        line-height: 55px !important;
        font-size: 40px !important;
            }
	.avia-icon-circles-icon-text-inner .icon-title {font-size: 18px }
	.avia-icon-circles-icon-text-inner .icon-description {font-size: 12px }
}
```
tnx
September 23, 2024 at 4:05 pm #1467678

Rikard
Keymaster

Hi,

Great, I’m glad to hear that you got things working. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

September 23, 2024 at 4:46 pm #1467683

joguitar
Participant

it’s all working.
you can close the topic!
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘responsive icon circle widget’ is closed to new replies.