Hey craig374,

Thank you for the inquiry.

Have you tried adjusting the Enfold > Main Menu > Menu Items For Mobile settings to the second option (Activate for Smartphones and Tablets)?

If you want to adjust the font size and space between the menu items on tablet view, add this css code:

@media only screen and (max-width: 1024px) {
  /* Add your Mobile Styles here */
  #top #header .av-main-nav>li>a {
    font-size: 12px;
    padding: 0 4px;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

You can include this css code to adjust the style of the read more link:

.html_elegant-blog .avia-content-slider .read-more-link {
    font-size: 12px;
    padding: 4px;
}

.html_elegant-blog .more-link {
    margin: 30px auto 20px auto;
    clear: both;
    width: 180px;
    border-style: solid;
    border-width: 1px;
    padding: 5px 0;
    border-radius: 2px;
}

Best regards,
Ismael

Hey northorie,

Please try the following in Quick CSS under Enfold->General Styling:

.html_elegant-blog .avia-content-slider .slide-meta {
  display: none; 
}

.html_elegant-blog .avia-content-slider .read-more-link {
  font-size: 16px;
}

.html_elegant-blog .avia-content-slider .slide-entry-title {
  font-size: 18px !important;
}

Best regards,
Rikard

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field, it will make the icon larger and center vertically:

.iconbox_left .iconbox_content {  
	display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr;
  grid-auto-columns: auto 1fr;
  gap: 0px 0px;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
}
.iconbox_left .iconbox_content .entry-content-header .iconbox_icon {
    height: 60px;
    width: 60px;
    font-size: 40px;
    top: 0;
    left: 0;
    align-content: center;
}
.iconbox_left .iconbox_content .entry-content-header {
  justify-self: center;
}
.iconbox_left .iconbox_content .iconbox_content_container p {
	margin-top: 0;
}

Best regards,
Mike

Hey Tanja,

Thank you for the inquiry.

You can use this css code to adjust the style of the submit button in the footer widget:

#footer .field-wrap>div input[type=checkbox], #footer .field-wrap button, #footer .field-wrap input[type=button], #footer .field-wrap input[type=submit] {
    width: auto;
    border-radius: 3px;
    padding: 10px;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: 400;
    text-align: center;
    max-width: 100%;
    color: var(--enfold-alternate-color-button-font);
    border-color: var(--enfold-alternate-color-button-border);
    background-color: var(--enfold-alternate-color-primary);
    min-width: 180px;
}

Best regards,
Ismael

Hey Tanja,

Thank you for the inquiry.

1.) You can adjust the style of the Widget Links element in the Enfold > Advanced Styling panel, or use the following css code to manually increase the font size.

#footer .widget_nav_menu a {
    font-size: 2em;
}

2.) Which widget title are you trying to adjust? If you need to adjust the title of the menu widget, use this css code:

#footer #nav_menu-2 h3.widgettitle {
    color: red;
}

Best regards,
Ismael

Hey Tanja,

Thank you for the inquiry.

1.) Try to set the Styling > General Styling > IconBox Styling to the last option (Display icon above title).

2.) To increase the font size, go to the Styling > Font Sizes panel, then adjust the element settings accordingly.

3.) You can upload monocolored fonts from fontello or flaticon using the Iconfont Manager. Please check the documentation below for more info: https://kriesi.at/documentation/enfold/icon/#adding-your-own-fontello-or-flaticon-icons-

Best regards,
Ismael

Hey xfacta,

Thank you for the inquiry.

Please add this css code to adjust the font size of the category heading:

#top.archive.category #wrap_all .all_colors .post-entry h2.post-title.entry-title {
    font-size: 48px;
}

You can also just the style of the h2 element in the Enfold > Advanced Styling panel.

Best regards,
Ismael

Hey Tom,

Thank you for the inquiry.

You can easily open a new inquiry using the form on the following page:

// https://kriesi.at/support/forum/enfold/#new-post

However, it looks like you haven’t registered an account in the forum yet. Please verify your purchase code and register an account in the forum using the field in the link below:

// https://kriesi.at/support/register/

Regarding your inquiries, please follow the steps below:

1.) To increase the font size of the input fields, please add this code in the Enfold > General Styling > Quick CSS field:

#top .input-text, #top input[type="text"], #top input[type="input"], #top input[type="password"], #top input[type="email"], #top input[type="number"], #top input[type="url"], #top input[type="tel"], #top input[type="search"], #top textarea, #top select {
    font-size: 2em;
}

2.) We were able to successfully send a message using the form. Would you mind providing a short clip or a screenshot of the issue? You can use Imgur, Dropbox, or any file hosting site to share the screenshot.

Best regards,
Ismael

Hi,
Thank you for your patience, I made some adjustments, this is the css now:

@media only screen and (max-width: 989px) {
	#header_main > .widget {
	display: none;
}
}	
@media only screen and (min-width: 990px) and (max-width: 1439px) {
  .av-logo-container .inner-container .widget #searchform {
    width: 100%;
    min-width: 500px;
  }
  .av-logo-container .inner-container .widget {
	display: flex;
    order: 3;
    flex-basis: 65%;
    right: -15%;
    top: -5%;
}
}
@media only screen and (min-width: 1440px) { 
    .av-logo-container .inner-container .widget {
        display: flex;
        order: 3;
        flex-basis: 65%;
        right: 0;
        top: -5%;
    }
    .av-logo-container .inner-container .widget > search {
        width:100%
    }
}	
@media only screen and (min-width: 990px) {
.av-logo-container .inner-container {
	display: flex;
    flex-direction: row-reverse;
}

#header_main > .widget {
	display: none;
}  
.av-logo-container .inner-container .widget #searchform .ajax_search_response {
	background-color: #fff;
    z-index: 3;
}
.header_color #search-6 input[type=submit] {
    background-color: #da291c;
    color: #fff;
 }
.header_color #search-6 input[type=submit]:hover {
    background-color: #da291c;
    color: #fff;
 }
  #top #header.header_color .widget input[type=text] {
	border-color: ebebeb;
	border-radius: 3px;
}
#top #header.header_color .widget #searchsubmit {
    border-radius: 0 3px 3px 0;
}

#top #header.header_color .widget #searchform #searchsubmit {
 	font-size: 16px;
}
.av-logo-container .inner-container #menu-item-shop {
	display: flex;
    order: 2;
}
}

please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for your patience I changed this css:

@media only screen and (min-width: 990px) {
    .av-logo-container .inner-container {
        display: flex;
        flex-direction: row-reverse;
    }

    @media only screen and (min-width: 990px) {
        /* Add your Desktop Styles here */ .av-logo-container .inner-container .widget #searchform {
            width: 100%;
            min-width: 500px;
        }
    }

    .av-logo-container .inner-container .widget {
        display: flex;
        order: 3;
        flex-basis: 80%;
        right: -15%;
        top: -5%;
    }

    #header_main > .widget {
        display: none;
    }

    .av-logo-container .inner-container .widget #searchform {
        width: 100%;
    }

    .av-logo-container .inner-container .widget #searchform .ajax_search_response {
        background-color: #fff;
        z-index: 3;
    }

    .header_color #search-6 input[type=submit] {
        background-color: #da291c;
        color: #fff;
    }

    .header_color #search-6 input[type=submit]:hover {
        background-color: #da291c;
        color: #fff;
    }

    #top #header.header_color .widget input[type=text] {
        border-color: ebebeb;
        border-radius: 3px;
    }

    #top #header.header_color .widget #searchsubmit {
        border-radius: 0 3px 3px 0;
    }

    #top #header.header_color .widget #searchform #searchsubmit {
        font-size: 16px;
    }

    .av-logo-container .inner-container #menu-item-shop {
        display: flex;
        order: 2;
    }
}

to this:

@media only screen and (max-width: 989px) {
	#header_main > .widget {
	display: none;
}
}	
@media only screen and (min-width: 990px) and (max-width: 1439px) {
  .av-logo-container .inner-container .widget #searchform {
    width: 100%;
    min-width: 500px;
  }
  .av-logo-container .inner-container .widget {
	display: flex;
    order: 3;
    flex-basis: 65%;
    right: -15%;
    top: -5%;
}
}
@media only screen and (min-width: 1440px) { 
    .av-logo-container .inner-container .widget {
        display: flex;
        order: 3;
        flex-basis: 80%;
        right: -15%;
        top: -5%;
    }
    .av-logo-container .inner-container .widget #searchform {
    width: 100%;
    min-width: 380%;
  }
}	
@media only screen and (min-width: 990px) {
.av-logo-container .inner-container {
	display: flex;
    flex-direction: row-reverse;
}

#header_main > .widget {
	display: none;
}  
.av-logo-container .inner-container .widget #searchform {
	 width: 100%;
}
.av-logo-container .inner-container .widget #searchform .ajax_search_response {
	background-color: #fff;
    z-index: 3;
}
.header_color #search-6 input[type=submit] {
    background-color: #da291c;
    color: #fff;
 }
.header_color #search-6 input[type=submit]:hover {
    background-color: #da291c;
    color: #fff;
 }
  #top #header.header_color .widget input[type=text] {
	border-color: ebebeb;
	border-radius: 3px;
}
#top #header.header_color .widget #searchsubmit {
    border-radius: 0 3px 3px 0;
}

#top #header.header_color .widget #searchform #searchsubmit {
 	font-size: 16px;
}
.av-logo-container .inner-container #menu-item-shop {
	display: flex;
    order: 2;
}
}

to update your live site copy your snippet named “header widget placement css” to your live site.

Best regards,
Mike

Hi,

The reason why the CSS is only applying on mobile is because you have placed it after an open media query:

@media only screen and (max-width:767px) {
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    font-size: 20px;
    color: white !important;
}

I added the CSS at the top for you, and it’s working as expected. Please review your site and close the media query at the proper location.

Best regards,
Rikard

Hi,

Thanks for the clarification. Please try this instead:

@media only screen and (max-width: 767px) {
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul .current-menu-item {
    background: red;
  }
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:active,  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:focus  {
    font-size: 20px;
    color: yellow !important;
  }
}

Best regards,
Rikard

Hi,

Thanks for that. Please try this instead:

@media only screen and (max-width: 767px) {
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul .current-menu-item {
    background: red;
  }
  #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li.current-menu-item  a {
    font-size: 20px;
    color: yellow !important;
  }
}

Best regards,
Rikard