Hi,
Thank you for the inquiry.
Please try @Guenni007’s solution above or use this css code:
ul {
font-size: 18px; /* Adjust the size as needed */
}
ol {
font-size: 18px; /* Adjust the size as needed */
}
Best regards,
Ismael
to influence the native list-point only – there is no way. Even a list-point color does not exist.
You can only influence the whole list item, it is not possible to influence only the list-style-type.
you do not need to set the color – then it will be inherited from text-block.
Are these red points dots? “disc” – so get rid of color property – and adjust the font-size to your needs.
if you just want to increase the font-size of the list-items select them by the li element and set the font-size property:
#top .avia_textblock > ul > li {
font-size: 18px;
}
Your wording and topic title led me a little astray. If only you had written: Font-size of the list – that would be clearer
Hi,
I would like to change the font size of a bullet point list. how do i accomplish this?
thanks!!
Hi,
Thank you for the update.
Please include this css rule inside the css media query (max-width: 767px) to adjust the font size of the caption content:
#top .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-content p {
font-size: 18px;
}
Best regards,
Ismael
well on your page (nicolealbaek.dk) there is set that h1 always is bold (strong)
@media only screen and (min-width: 780px) {
#top #wrap_all .all_colors h1 {
color: #2d2d2d;
font-size: 32px;
font-family: 'oswald',Helvetica,Arial,sans-serif;
font-weight: bold;
}
}
That is the reason why there is no difference between the heading and the dot!
next: the color of the strong tag could be different to red – depends on your color settings.
it seem that you have different settings on the other domain (equusbalance.dk)
you set on the other domain a color of: #c49570
try on nicolealbaek.dk if you like to have on all strong tags inside a h1 tag:
#top .all_colors h1 strong {
color: #F00 !important;
}
by the way – This is only an advisory note (warning in red) and can be neglected if everything is done correctly.
I disabled WP Rocket and the font size works. Hmmmmm
Hey bemodesign,
Thank you for the inquiry.
Did you add this css code?
#top #wrap_all .av-inherit-size .av-special-heading-tag {
font-size: 1em;
}
Please try to temporarily disable the Enfold > Performance > File Compression settings to make sure that the changes to the theme options take effect. Let us know the result.
Best regards,
Ismael
Hi,
Thank you for the update.
We adjusted the css code a bit. Please try it again:
@media only screen and (max-width: 767px) {
#top #wrap_all .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-title {
font-size: 22px !important;
}
}
Regarding the text color, please edit the slide, then configure the settings in the Styling > Colors panel.
Best regards,
Ismael
Hey aboutnina,
Thank you for the inquiry.
Please try to add this css code to adjust the font size of the caption title on mobile view:
@media only screen and (max-width: 767px) {
#top #wrap_all .avia-slideshow .av-slideshow-caption.av-m1g8o6g7-f7efce2774fcf0ca4bccdacd45c3be64__0 .avia-caption-title {
font-size: 22px;
}
}
Best regards,
Ismael
Solution: Reinstate the default woo dropdowns – Applies to all Enfold sites:
The default woo filters are dequeued in enfold > config-woocommerce > config.php and config-365.php
We can requeue them and disable the Enfold filters by adding the following to functions.php in the child theme:
// Removes Enfolds sort by dropdowns
function avia_woocommerce_frontend_search_params()
{
return;
}
// Re-adds the default sortby dropdown
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 20 );
Styling fixes
Add the following css:
@media only screen and (max-width: 767px) {
.responsive #top .woocommerce-ordering {
position: relative;
float: left;
clear: both;
margin: 0;
padding-bottom: 0px;
padding-top: 15px;
top: 0px;
margin-top:60px;
}
}
@media only screen and (min-width: 768px) {
.responsive #top .woocommerce-ordering {
position: relative;
float: left;
clear: both;
margin: 0;
padding-bottom: 15px;
padding-top: 15px;
top: 0px;
margin-top:0px;
}
}
#top.woocommerce-page .woocommerce-ordering select {
width: 100%;
font-size:16px;
padding: 8px;
line-height: 1.2em;
}
-
This reply was modified 1 year, 6 months ago by
thinkjarvis.
Hey Peter,
Thank you for the inquiry.
Are you using the Easy Slider element?
— You can change the heading default by editing any of the slides’ Advanced > Heading Tag settings.
— To center the caption and add a transparent overlay, try configuring the Styling > Caption > Caption Positioning settings.
— The font sizes can also be adjusted in the Styling > Font Sizes panel.
Best regards,
Ismael
Hello Enfold team,
i’d like to change several things of the dia slideshow element:
>The title gets the h1-tag, i’d like to change this to h3
>add a transparant overlay
>center the title
>configure the font size of the title
in quite a few things it becomes similar to this (masonry)

Hi @mike,
I’d like to ask a follow up question about this old topic
I use a custom testimonial function on mobile on this site https://schoonheidsinstituutdiane.nl/
I want to re-use this for another website, but I’d like to decrease the margins on the side, to fit a maximum of content on mobile, whilst ensuring that the arrows left and rights are still visible. Currently the testimonial is quite narrow/i don’t use the available space in a good way.
Is it possible to make the arrows overlap the image, so that the image is the same width as all the content of the site, with the text the same width as everything else as well? ?
what do I change in the CSS to achieve this? Below CSS is currently in use
/*Custom Testimonial blocks */
#top #team .avia-slider-testimonials.avia-testimonial-wrapper {
overflow: visible;
}
.responsive #top .avia-slideshow-dots.avia-slideshow-controls a {
opacity: 1;
}
.avia-slideshow-dots a.goto-slide.active {
background: #bf9f97;
}
.avia-slideshow-dots a.goto-slide {
background: #ffffff;
}
.avia-slideshow-dots {
bottom: -30px;
padding-bottom: 20px;
}
@media only screen and (max-width: 767px) {
.responsive #top #team .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0;
font-size: 0.85em;
display: flex;
justify-content: center;
}
}
@media only screen and (max-width: 767px) {
#top #team .av-large-testimonial-slider .avia-slideshow-arrows a {
top: 88px;
}
}
@media only screen and (max-width: 450px) {
#top .avia-testimonial-content {
width: 100%;
}
#top #main .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a {
opacity: 1;
top: 12%;
}
}
@media only screen and (max-width: 767px) {
.myslider {
margin-top: 25px;
margin-bottom: 0.5px;
}
}
.avia-testimonial-meta-mini {
width: 200px;
height: auto;
margin-top: -30px;
justify-content: center;
}
.avia-testimonial-name {
font-weight: 600 !important;
font-size: 23px !important;
}
.avia-testimonial-subtitle {
line-height: 25px;
}
.reviews-italic {
font-style: italic;
}
Thanks Rikard,
Does not really work. Font size changes but arrows kind of disappear above the gallery. Besides I would like to show them outside the gallery. See Link in Private Content
Thanks for thinking with me,
Woutski
Hey whdsolutions,
Thank you for the inquiry.
You can use this css code to adjust the style of the portfolio grid items:
#top .grid-content {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5) !important;
display: flex;
flex-direction: column;
justify-content: center;
}
#top .main_color .grid-entry-title.entry-title {
background: transparent;
font-size: 1.8em;
}
Best regards,
Ismael
Hi,
Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:
#top .av-control-minimal .avia-slideshow-arrows a::before {
font-size: 40px;
line-height: 10px;
}
Best regards,
Rikard
Hi,
Please try this CSS instead:
.iconbox_icon:before {
font-size: 40px;
position: absolute;
left: 20%;
}
iconbox_icon {
top: -33px;
}
Best regards,
Rikard
Hey jackis2,
Thank you for the inquiry.
You can use this css code to adjust the style of the phone number container:
#header_main .call {
background: red;
min-width: 400px;
color: white;
right: 10%;
top: 0;
text-align: center;
text-transform: uppercase;
font-family: 'gotham-bold', sans-serif;
font-size: 1.5em;
}
Best regards,
Ismael
Hey Qgrafica_7,
Please try the following in Quick CSS under Enfold->General Styling:
.iconlist_icon .iconlist-char:before {
font-size: 60px;
}
Best regards,
Rikard
Hey Aeroviews,
That text gets its size from the paragraph element, you can set that size for each screen size under Enfold->General Styling->Typography. Change the default content font size option.
If you want to use custom CSS instead, then you can use this selector:
.iconbox_content_container p
Best regards,
Rikard
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
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?
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
Hi,
Thanks for the screenshot, I have checked your page with Safari on a iMac, but the “Reader Mode” doesn’t seem to be an option, I don’t have a iPhone or iPad.
In my research I find that:
Safari Reader Mode is a feature in Apple’s Safari browser that simplifies web page content, removing distractions such as ads, navigation menus, and other non-essential elements.
This means that the browser is blocking items that it thinks is a distraction, further
Safari Reader Mode has some limitations when it comes to customization beyond font size and style. While you can adjust font size and color, there are no tweakable settings for reader view in Safari.
This is not an error in the theme, it is an issue with the “Reader Mode” blocking elements, I didn’t find any way that this can be changed. Since this is a browser setting for each user instead of the theme I don’t believe that you can turn off reader mode.
Best regards,
Mike
Hey Dzimnikov,
Thank you for the inquiry.
You might have added the shortcode of a Testmonial slider in the category description. Please try this shortcode:
[av_testimonials style='slider' columns='2' grid_style='' control_layout='av-control-default' slider_navigation='av-navigate-arrows' nav_visibility_desktop='' nav_arrow_color='' nav_arrow_bg_color='' size-name='' av-desktop-font-size-name='' av-medium-font-size-name='' av-small-font-size-name='' av-mini-font-size-name='' size-subtitle='' av-desktop-font-size-subtitle='' av-medium-font-size-subtitle='' av-small-font-size-subtitle='' av-mini-font-size-subtitle='' size-content='' av-desktop-font-size-content='' av-medium-font-size-content='' av-small-font-size-content='' av-mini-font-size-content='' font_color='' custom_title='' custom_sub='' custom_content='' animation='fade' transition_speed='' autoplay='true' interval='5' alb_description='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-m15x5rhq' sc_version='1.0' admin_preview_bg='']
[av_testimonial_single name='Name' subtitle='' check='is_empty' element_template='' src='' src_dynamic='' link='https://' linktext='' one_element_template='' av_uid='' sc_version='1.0'][/av_testimonial_single]
[av_testimonial_single name='Name' subtitle='' check='is_empty' element_template='' src='' src__locked='' src_dynamic='' src_dynamic__locked='' name__locked='' subtitle__locked='' content__locked='' link='https://' link__locked='' linktext='' linktext__locked='' one_element_template='' av_uid='' sc_version='1.0'][/av_testimonial_single]
[/av_testimonials]
Best regards,
Ismael
Hi Mike. I’m not sure I understand you completely (English is not my native language). I always thought that the site title, which I wrote in the WordPress General Settings > Site title (this is the ‘tab title’ which you are referring to?), is a H1 tag automatically, which would show in the page source code. And I also thought that this site title is the most important for SEO. Are you saying that this isn’t correct?
Does this mean that I must always use a page title, such as ‘Portfolio’ on the Portfolio page? I’d rather not do that, to be honest, because it doesn’t look good. Do I actually need a H1, and if so, can I use any text on the page, no matter font size, as a H1?
Sorry for my noob questions. :-)
this is already done by the language files (for your language too, I hope), in German this is the case.
see here a blog example page ( the green Titles) : https://webers-testseite.de/masonry-blog/
and a bit of css:
.av-masonry-entry-title .av-masonry-comment-count {
font-size: 0.8rem;
color: #666
}
Des Weiteren, wird das &-Zeichen bei uns falsch formatiert. die Schriftart wie auch die Farbe weichen von der ursprünglichen Schrift-Formatierung ab.
The ampersand (&-Zeichen) has its own css rules. If you like to get rid of those special settings:
#top .special_amp {
font-size: inherit;
color: inherit;
line-height: 1;
font-style: normal;
font-family: inherit;
font-weight: inherit;
}
Hi,
I need a way to create a general rule so that I don’t have to change the size in every content element. With the settings at Enfold -> General styling -> Typography nothing changes. Maybe I am doing something wrong.I could only change the font size by hiding the additional text and changing the size in the content element.
Best regards
Hi Rikard,
I have already tried to adjust the font sizes for the different devices.Nothing changes to solve the problem.
I have also tried to adjust the font size directly on the individual sections and content elements, but the required effect does not occur there either.
Best regards.