Viewing 30 results - 1 through 30 (of 18,671 total)
  • Author
    Search Results
  • #1484943

    In reply to: Timeline mobile

    Hey rixi,
    I notice that on mobile not all of the dates show, only every other one, so to correct try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor, if you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:
    use wpcode php snippet and activate
    and ensure that it is activated, then add the bellow code and save.

    function custom_timeline_script_for_mobile() { ?>
      <script>
    document.addEventListener('DOMContentLoaded', () => {
      // Check if there are any .av-milestone-even elements
      const milestones = document.querySelectorAll('.av-milestone-even');
      if (milestones.length === 0) return; // Exit if no milestones found
    
      // Define the media query for screens smaller than 989px
      const mediaQuery = window.matchMedia('(max-width: 989px)');
    
      // Function to reorder elements
      const reorderMilestones = () => {
        if (mediaQuery.matches) {
          milestones.forEach(milestone => {
            const date = milestone.querySelector('.av-milestone-date');
            const icon = milestone.querySelector('.av-milestone-icon-wrap');
            const content = milestone.querySelector('.av-milestone-content-wrap');
    
            // Ensure all elements exist before reordering
            if (date && icon && content) {
              milestone.innerHTML = '';
              milestone.appendChild(date);
              milestone.appendChild(icon);
              milestone.appendChild(content);
            }
          });
        }
      };
    
      reorderMilestones();
        mediaQuery.addEventListener('change', reorderMilestones);
    });
    </script>
      <?php
    }
    add_action( 'wp_footer', 'custom_timeline_script_for_mobile', 99 );

    Then I notice that one of your content boxes has too much padding for the list:
    Screen Shot 2025 06 01 at 1.16.43 PM
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 989px) {
        .av-no-preview ul.avia-timeline-vertical .av-milestone-content li {
            padding: 0;
        }
    }

    Screen Shot 2025 06 01 at 1.21.45 PM
    Changing the content padding and font size of the title and content may also help:

    @media only screen and (max-width: 989px) {
        .avia-timeline-boxshadow .av-milestone-contentbox {
        padding: 1em;
        }
        #top #wrap_all .all_colors h4.av-milestone-title {
        font-size: 20px;
        }
        .av-milestone-content p,
        .av-milestone-content li {
        font-size: 12px;
        line-height: 18px;
        }
    }

    Screen Shot 2025 06 01 at 1.32.50 PM
    Try this and adjust to suit.

    Best regards,
    Mike

    #1484839

    Ok, what did I do wrong? :) I couldn’t find the code that you suggested to remove and added the one that you suggested to add and nothing changed.

    This is the current CSS code that I have for the the sliders:

    #top .avia-slideshow-arrows.avia-slideshow-controls a {
    border-radius: 25px;
    font-weight: bold;
    font-size: 18px;
    background:#transparent;
    width: 45px;
    height: 30px;
    }

    I also tried to change background from #transparent to #a6a6a6 !important but still nothing.

    Thanks again!

    #1484693

    Hey extraeyes,
    To make this font-size 20px
    Screen Shot 2025 05 26 at 9.30.42 AM
    this css works:

    #top #wrap_all .all_colors h2.woocommerce-loop-product__title {
    	font-size: 20px;
    }

    but it will not remove the H2, which it sounds like this is what you want to do.
    If you want this H2 to be a “p” instead, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function change_woocommerce_product_title_tag_in_product_slider() { ?>
      <script>
    (function($) {
      $(function() {
        function replaceElementTag(targetSelector, newTagString) {
          $(targetSelector).each(function(){
            var newElem = $(newTagString, {html: $(this).html()});
            $.each(this.attributes, function() {
              newElem.attr(this.name, this.value);
            });
            $(this).replaceWith(newElem);
          });
        }
        replaceElementTag('h2.woocommerce-loop-product__title', '<p></p>');
      });
    }(jQuery)); 
    </script>
      <?php
    }
    add_action( 'wp_footer','change_woocommerce_product_title_tag_in_product_slider', 99 );

    Best regards,
    Mike

    #1484688
    extraeyes
    Participant

    I am sorry if this is duplicate. I put this in and it is not showing that created this.

    My Woo commerce products are all H2 which I finally realized is what is destroying my page ranking.

    I found this and put it in the Quick CSS and it didn’t do anything. I changed it to 20px though. Can you help me with this? Reminder I do not do code. https://www.survivalfoodngear.com/long-term-food/

    this didn’t work:

    .woocommerce div.product .product_title {
    font-size: 36px;
    }

    THANK YOU!!

    • This topic was modified 1 week, 4 days ago by extraeyes.

    Hi,
    1:

    @media only screen and (max-width: 767px) { 
    #top #header .phone-info {
    	padding-top: 0;
    }
    #menu-item-1413 a {
    	padding-bottom: 0;
    }
    #avia2-menu {
    	line-height: 10px;
    }
    }

    2:

    @media only screen and (max-width: 767px) { 
    #top #wrap_all .social_bookmarks li a {
      line-height: 30px!important; 
      min-height: 30px!important; 
      font-size: 30px!important; 
      }
      
      #top #wrap_all .social_bookmarks li {
      height: 30px!important; 
      width: 50px!important; 
      }
      
      #top #wrap_all .social_bookmarks {
          height: 35px!important;
      }
    }

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1484616

    Hi,
    To have a smaller font size for the magazine titles, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top #wrap_all .all_colors h3.av-magazine-title {
    	font-size: 12px;
    }

    adjust to suit and clear your browser cache
    Screen Shot 2025 05 24 at 1.34.01 PM

    Best regards,
    Mike

    #1484607

    Just now I was able to edit the page. When I clicked update and displayed the page, I saw that I still had to adjust the font size. Again, when I wanted to edit the special header, a blank screen!

    AffiliateAmit100
    Participant

    We have tried to edit the sub menu font size and color on the desktop. It stays super large and spaced out. Website is attached. I have a picture as well but I cant seem to attach it.

    How can I edit the style for the sub menu on the desktop?

    (IE: Hover over Services, and the menu that pops down OR hover or resources and the menu that pops down)

    #1484547

    Hi,
    We will need to see your page so we can determe the css effecting your magazine font size.

    Best regards,
    Mike

    #1484536

    Thank you. I am working on setting up staging so I can convert to the child theme.

    IN THE MEANTIME.. I noticed my other website does not have the font so big, and after all this, I remember years ago I wanted the images bigger, so you gave me this code to put in the QUICK CSS…

    THERE ARE A FEW THINGS YOU GAVE ME IN HERE. CAN WE CHANGE THE PART FOR THE MAGAZINE TO HAVE A SMALLER FONT SIZE USING THIS CODE?

    I am giving you the whole section because I don’t know for sure which part is magazine and which is something else.

    THANK YOU IN ADVANCE FOR HELPING !!!

    THIS IS EVERYTHING IN THE QUICK CSS:
    p strong{
    color:#000!important;
    }

    #top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title {
    color: white!important;
    }

    .av-magazine-thumbnail {
    min-height: auto;
    }

    #top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title {
    color: white!important;
    }

    .av-magazine-thumbnail {
    min-height: auto;
    }
    div .slideshow_caption h2 {
    text-transform: none;
    }

    .av-magazine-thumbnail {
    width: 135px;
    height: auto;
    }

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    h2.avia-caption-title {
    font-size: 30px !important;
    }
    .avia-caption-content p {
    font-size: 22px !important;
    line-height: 24px;
    }
    }

    @media only screen and (max-width: 767px) {
    h2.avia-caption-title {
    font-size: 20px !important;
    }
    .avia-caption-content p {
    font-size: 14px !important;
    line-height: 16px;
    }
    .slideshow_caption {
    padding-top: 20px !important;
    }
    }

    #header_meta .menu li a {
    color: #fff !important;
    }
    .av-burger-overlay-scroll #av-burger-menu-ul a {
    color: #fff;
    }

    .html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
    color: #fff;
    }

    .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after {
    background-color: #fff;
    }

    #header_meta .sub_menu .menu li a {
    color: #030303 !important;
    }

    .avia_textblock a strong {
    color: blue !important;
    }

    #1484483

    Thank you @Ismael,
    regrettably, it doesn’t seem to do anything. I also change the font size to 26px to see and no change at all.
    What else can I do?

    #1484474

    Hey Antonio,

    Thank you for the inquiry.

    You can use this css code to adjust the style of the tab titles:

    #top div .tabcontainer .tab {
        font-size: 20px;
        padding: 12px 24px 14px 24px;
    }

    Best regards,
    Ismael

    #1484461
    abortolotti
    Participant

    Hi there,
    how can I increase the font size for the tab element titles?
    They are pretty small and I’d like them a lot bigger.
    Thanks for your help.

    Antonio

    Same issues. Logo still shows left justified on desktop and on mobile view, the logo is over the top button. There must be code that is working against this. Below is my entire code if you can take a look and see whats wrong. I don’t have products either, so not sure why I have all this code.
    I just need to fix these things and we are done with the website.
    thanks for your help

    .product-sales-count {
    font-size: 0.8em;
    margin-top: 0;
    top: -10px;
    position: relative;
    }

    /* TEXT SHADOW FOR – Fullwidth Easy Slider – Headline: */
    .avia_transform .av_slideshow_full .active-slide .avia-caption-title,
    .avia_transform .av_fullscreen .active-slide .avia-caption-title
    {text-shadow: 2px 2px 2px #717070;}

    /* TEXT SHADOW FOR – Fullwidth Easy Slider – Caption Text: */
    #top .avia-slideshow .av-slideshow-caption .avia-caption-content p {
    text-shadow: 2px 2px #717070;
    }

    /* TEXT SHADOW FOR – ALL H1 headlines: */
    .av-special-heading h1 {
    text-shadow: 1px 1px #717070;
    }

    /* TEXT SHADOW FOR – SPECIFIC H1 headlines: */
    .av-special-heading.av-nlr5x-bb365aeef7c91c871c871ed41100301d h1 {
    text-shadow: 1px 1px #717070;
    }

    /* TEXT SHADOW FOR – subheading text: */
    #top .av-subheading p {
    text-shadow: 1px 1px #717070;
    }

    #header_meta a, #header_meta span {
    font-size: 16px !important;
    line-height: 17px;
    }

    /* Sticky header on mobile */
    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    /* Margin top value should be equal to header height*/
    margin-top: 80px;
    }
    .responsive #top #wrap_all #header {
    position: fixed;
    }
    }

    @media only screen and (max-width: 1100px) {
    .av-main-nav > li.menu-item { display: none; }
    .av-main-nav > li.menu-item-avia-special { display: block; }
    }

    .phone-info {
    font-size: 16px;
    }

    @media only screen and (max-width: 479px) {
    .responsive #top .slideshow_caption h2 {
    font-size: 18px !important;
    }

    .responsive #top .slideshow_caption .avia-caption-content {
    font-size: 16px !important;
    line-height: 14px;
    }

    .avia-slideshow-inner, .avia-slideshow-inner li, .avia-slideshow-inner li img {
    height: 30vh !important;
    }
    }

    span.avia-menu-text {
    text-transform: uppercase;
    }

    .avia-section.av-minimum-height .container .content {
    vertical-align: bottom;
    }

    .avia-section.av-minimum-height.text-bottom .container .content {
    vertical-align: bottom;
    }
    .avia-section.av-minimum-height.text-top .container .content {
    vertical-align: top;
    }

    .avia-button {
    border: 1.5px solid !important;
    }

    #top .avia-button {
    border-radius: 5px !important;
    }

    @media only screen and (max-width: 767px) {
    body, body .avia-tooltip {
    font-size: 20px;
    }
    }

    @media only screen and (max-width: 767px) {
    .page-id-3230 .avia-builder-el-0.av-minimum-height-100:not(.av-slideshow-section) .container {
    height: 767px !important;
    }
    }

    #main .sidebar a,
    #footer a,
    #socket a {
    text-decoration: underline;
    }
    a.avia-button{
    text-decoration:none!important;
    }
    @media only screen and (max-width: 989px){
    .html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent;
    }
    .responsive #top #main {
    margin-top: 0;
    }
    }

    #top #wrap_all #socket .container {
    text-align: center;
    }

    #top #wrap_all #socket .container {
    text-align: center;
    }

    #top #wrap_all #socket .copyright {
    display: block;
    float: none;
    clear: both;
    text-align: center;
    }

    #top .content .flex_column .widget_nav_menu li {
    border-top-width: 0;
    border-bottom-width: 0;
    }

    #footer h3.widgettitle{
    border:none!important;
    }

    @media only screen and (max-width: 769px) {
    .flex_column.av-l3szqp26-162f9236fd15346c9c727f5f94b66dce {
    min-height: 50vh !important;
    }
    }

    .html_elegant-blog #top .post-entry .post-meta-infos,
    .html_elegant-blog .avia-content-slider .slide-meta,
    #top .news-time {
    display: none;
    }

    html, body {
    background-color: #fff !important;
    }

    #header:not(.av_header_transparency) #header_main {
    -moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
    -webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
    box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
    }

    #top.single-product .product_meta {
    visibility: hidden;
    }

    .is-large.wc-block-cart .wc-block-cart-items th span {
    font-size: 2em;
    }

    table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    font-size: 2em;
    }

    .wc-block-components-form .wc-block-components-text-input.is-active label, .wc-block-components-text-input.is-active label {
    display: none;
    }

    #top div ul.product_list_widget li a {
    display: block;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1.6em !important;
    }

    #top .dropdown_widget ul.product_list_widget li .quantity {
    color: #000000;
    font-size: 1em;
    }

    #top .dropdown_widget .total span.woocommerce-Price-currencySymbol, #top .dropdown_widget .total {
    color: #000000;
    font-size: 1em;
    }

    div .product-sorting {
    display: none;
    }

    @media only screen and (max-width: 767px) {
    .responsive #top #main {
    padding-top: 88px !important;
    }
    .responsive.html_header_transparency #top #main {
    padding-top: 0 !important;
    }
    }

    .page-id-432 .components-flex-item input, .page-id-433 .wc-block-components-text-input input {
    padding: 8px 116px;
    }

    .wc-block-cart__submit-container a .wc-block-components-button__text {
    color: #fff;
    }

    .wc-block-components-address-form-wrapper .components-base-control__label {
    top: -50px;
    }

    .wc-block-components-address-form-wrapper .components-base-control__label {
    top: -30px !important;
    }

    #top .av-product-class-minimal img {
    border-radius: 30px !important;
    }
    #top .av-product-class-minimal img {
    border-radius: 30px !important;
    }

    .select2-container–default .select2-results__option–highlighted[aria-selected], .select2-container–default .select2-results__option–highlighted[data-selected], #top .select2-results {
    color: #000 !important;
    }

    @media only screen and (max-width: 768px) {

    /* Add your Mobile Styles here */
    #top #bc-custom-section div .flex_column {
    width: 46% !important;
    margin-left: 3% !important;
    border-radius: 30px;
    }
    }

    #top #bc-custom-section div .flex_column img {
    border-radius: 30px;
    }

    .woocommerce-Tabs-panel ul {
    list-style: disc;
    margin-left: 15px;
    }

    .woocommerce-Tabs-panel ul, .woocommerce-product-details__short-description ul {
    list-style: disc;
    margin-left: 15px;
    }

    #menu-item-150 > a > .avia-menu-text {
    color: #f19809!important;
    }

    #av-burger-menu-ul .menu-item-150 > a > .avia-menu-text {
    color:#f19809!important;
    }

    #menu-item-2076 > a > .avia-menu-text {
    color: #f19809!important;
    }

    #av-burger-menu-ul .menu-item-2076 > a > .avia-menu-text {
    color:#f19809!important;
    }

    .avia-image-container .avia_image, .avia-image-container .avia-image-overlay-wrap {
    border-radius: 30px;
    }

    #footer .textwidget .menu-blissfull-main-menu-container p {
    margin: 0;
    width: auto;
    display: inline-block;
    }

    @media only screen and (max-width: 767px) {
    .responsive .home #wrap_all #av-section-shop-category .flex_column {
    width: 48%;
    padding: 1%;
    }
    }

    ul.a-unordered-list.a-vertical.a-spacing-mini li {
    margin-bottom: 20px;
    }

    #top .price, #top .price span, #top del, #top ins {
    display: inline;
    text-decoration: none;
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
    }

    .page-id-389 .shop_columns_3 .products .product {
    width: 100%;
    }

    .page-id-91 .shop_columns_3 .products .product {
    width: 100%;
    }

    h1{
    text-transform: capitalize !important;
    }

    .template-page .entry-content-wrapper h1{
    text-transform: capitalize !important;
    }

    a.cart_dropdown_link {
    font-size: 28px !important;
    }

    #top a.cart_dropdown_link span[data-av_icon] {
    font-size: 28px;
    color: var(–enfold-header-color-color);
    }

    #top #header .av-main-nav #menu-item-wc-account-icon > a {
    color: #f19809;
    font-size: 28px;
    }

    /* Increase base font size on mobile devices */
    @media only screen and (max-width: 767px) {
    body,
    p,
    .entry-content {
    font-size: 18px !important;
    line-height: 1.6 !important;
    }
    }

    @media only screen and (max-width: 767px) {
    #top .av-special-heading .av-subheading p {
    font-size: 24px
    }
    }

    img[src*=”amazon-adsystem”] {
    display: none;
    }

    #top .av-burger-overlay-bg {
    opacity: 0.8;
    background: #000;
    }

    ——————–

    div .logo {
    left: 37%;
    }
    div.av-burger-overlay-bg {
    background-color: rgba(0, 0, 0, .7);
    }

    #top .av-burger-overlay-bg {
    opacity: 0.8;
    background: #000;
    }

    #top .av-main-nav-wrap {
    float: right;
    position: relative;
    z-index: 3;
    padding: 0 !important;
    margin: 0 0 0 15px !important;
    }

    .header_color.av_header_transparency .av-hamburger-inner,
    .header_color.av_header_transparency .av-hamburger-inner::before,
    .header_color.av_header_transparency .av-hamburger-inner::after {
    background-color: #FFF !important;
    }

    #top .av_header_transparency .phone-info,
    #top .av_header_transparency .social_bookmarks li a {
    color: #FFF !important;
    }

    #top .av_header_glassy.av_header_transparency .avia-menu.av_menu_icon_beside {
    border: none !important;
    }

    #top .main_menu {
    width: 170px
    }

    #top .logo {
    /*width: calc(100% – 170px);*/
    width: 100%;
    left: unset;
    }

    @media only screen and (max-width: 767px) {
    #av_section_1 .container.av-section-cont-open,
    .page-id-910 #av-layout-grid-1 {
    padding-top: 130px !important;
    }
    }

    #top .logo img {
    left: 50%;
    transform: translateX(-50%)
    }

    @media only screen and (min-width: 768px) and (max-width: 989px) {
    .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
    }
    }

    @media only screen and (max-width: 767px) {
    #header .social_bookmarks {
    display: none !important;
    }
    }

    #top #wrap_all #av-burger-menu-ul li {
    font-size: 30px !important;
    }

    ——————-

    #av-burger-menu-ul li.av-show-submenu > a > .avia-menu-text {
    color: blue;
    }
    #av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
    color: #f5c526;
    font-size: 20px;
    line-height: 20px;
    }
    .html_av-submenu-hidden #av-burger-menu-ul .av-submenu-indicator:before {
    color: #f5c526;
    font-size: 20px;
    }
    #top #wrap_all #av-burger-menu-ul .menu-item-2846 {
    font-size: 24px !important;
    }

    .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.av-show-submenu li {
    line-height: 20px;
    }

    • This reply was modified 2 weeks, 5 days ago by bemodesign.
    #1484402

    In reply to: Header tweaks

    Hey bemodesign,
    duplicate thread, please see here instead.

    Best regards,
    Mike

    #1484174

    Hi,

    I copied the content of the page in question to a test page, and I see that your content is full of what seems like unnecessary markup, for example:

    <span class="wysiwyg-color"><span class="wysiwyg-font-size-16">

    Please try cleaning up all unnecessary tags like that, as something is likely breaking the layout builder. You would also try to recreate the page, and make sure to only copy the text that you want to add, and not the markup which has been added in your current page. The server is also returning a 500 internal server error on the file in private, which might indicate that something is going wrong on the server side.

    Best regards,
    Rikard

    #1484023

    Hi,
    I see that you have this custom css:

    #top .avia-smallarrow-slider:not(.av-slideshow-ui) .avia-slideshow-arrows a, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-prev a.prev-slide, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-next a.next-slide {
        width: 24px !important;
        opacity: 1;
    }

    this is forcing the width to 24px, you can change this css and then add the css above, or try this css instead:

    #top .avia-smallarrow-slider:not(.av-slideshow-ui) .avia-slideshow-arrows a, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-prev a.prev-slide, #top .avia-smallarrow-slider.av-slideshow-ui .avia-slideshow-arrows.av-visible-next a.next-slide {
        width: 50px !important;
        height: 50px !important;
        line-height: 50px !important;
        font-size: 20px !important;
    }
    #top .avia-smallarrow-slider .avia-slideshow-arrows {
      position: relative;
      width: 120px;
      left: auto;
      height: 50px;
      right: 10px;
    }
    #top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon svg:first-child, #top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon img[is-svg-img="true"] {
        height: 20px;
        margin-top: 17px;
    }

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    currently:
    Screen Shot 2025 05 11 at 9.06.26 AM
    with this new css:
    Screen Shot 2025 05 11 at 9.07.36 AM
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    Hi,
    Change this css:

    #av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
    	color: yellow;
    }

    to this:

    #av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
    	color: yellow;
    	font-size: 20px;
    	line-height: 20px;
    }

    then add this css:

    .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li.av-show-submenu li {
        line-height: 20px;
    }

    Screen Shot 2025 05 10 at 5.34.09 AM
    adjust to suit.
    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

    Best regards,
    Mike

    #1483964

    In reply to: Ctrl + F in html

    hail brave new AI world

    New snippet
    see in Action here: https://webers-testseite.de/impressum/

    it is a draggable Window:

    this is for child-theme functions.php:

    see code here on paste bin: https://pastebin.com/zc4fvX1w

    because of a innerHtml (lines 158-176) it is not possible to post it here – (maybe mod knows how)

    and here is the style for quick css

    /* --- Draggable Search Window --- */
    #gcmSearchUIContainer { /* Changed ID for clarity */
      position: fixed;
      top: 100px; /* Initial position from the top */
      left: 50%;  /* Start horizontally centered */
      transform: translateX(-50%); /* Adjust for true centering */
      width: 380px; /* A suitable width for a small window */
      background-color: #f9f9f9;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.25);
      z-index: 100001; /* Ensure it's on top, slightly higher than before if needed */
      overflow: hidden; /* To contain rounded corners with header */
    }
    
    #gcmSearchUIContainer.hidden {
      display: none;
    }
    
    #gcmSearchUIHeader {
      padding: 10px 15px;
      background-color: #e8e8e8;
      border-bottom: 1px solid #ccc;
      cursor: move; /* Indicates this area is draggable */
      border-top-left-radius: 8px; /* Match container's radius */
      border-top-right-radius: 8px; /* Match container's radius */
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    #gcmSearchUIHeader .gcm-title {
      font-weight: bold;
      font-size: 1.1em;
      color: #333;
    }
    
    #gcmSearchUIHeader #gcmCloseSearchBtnDraggable { /* Specific ID for close button in this context */
      background: none;
      border: none;
      font-size: 1.3em;
      font-weight: bold;
      color: #777;
      cursor: pointer;
      padding: 0 5px;
    }
    #gcmSearchUIHeader #gcmCloseSearchBtnDraggable:hover {
      color: #000;
    }
    
    #gcmSearchUIBody {
      padding: 15px;
      display: flex;
      flex-direction: column; /* Stack elements vertically */
      gap: 10px; /* Space between elements in the body */
    }
    
    #gcmSearchUIBody #gcmSearchInputDraggable { /* Specific ID for input */
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }
    
    #gcmSearchUIBody .gcm-controls-row {
      display: flex;
      justify-content: space-between; /* Space out controls */
      align-items: center;
      gap: 8px; /* Space between buttons in a row */
    }
    
    #gcmSearchUIBody .gcm-navigation {
        display: flex;
        gap: 5px;
    }
    
    #gcmSearchUIBody button {
      padding: 8px 12px;
      border: 1px solid #aaa;
      border-radius: 4px;
      background-color: #e7e7e7;
      cursor: pointer;
      min-width: 40px; /* For Next/Prev buttons */
      text-align: center;
    }
    
    #gcmSearchUIBody button:hover {
      background-color: #d7d7d7;
    }
    
    #gcmSearchUIBody #gcmSearchBtnDraggable { /* Specific ID */
        flex-grow: 1; /* Allow Find button to take more space if needed */
    }
    
    #gcmSearchUIBody .gcm-results-count-draggable { /* Specific ID */
      font-size: 0.95em;
      color: #333;
      white-space: nowrap; /* Prevent wrapping */
    }
    
    /* --- Highlighting Styles (remain the same) --- */
    .custom-highlight {
      background-color: yellow;
      color: black;
      font-weight: bold;
    }
    
    .custom-highlight.current-custom-highlight {
      background-color: orange;
      outline: 1px solid red;
    }

    Do not forget to remove the leading php on that downloaded snippet before you insert it to your child-theme functions.php

    Download: https://pastebin.com/dl/zc4fvX1w

    Ok great, but can you get me CSS for smaller Font size for all the “sub menu” items? (So the Main menu fonts size is larger and the Sub Menu is smaller.)

    #1483897

    Hi,

    To adjust the size and position of the slider arrows, try to add this css code:

    #top .avia-smallarrow-slider .avia-slideshow-arrows a {
      opacity: 0;
      margin: 0;
      width: 50px !important;
      height: 50px !important;
      line-height: 50px !important;
      font-size: 20px !important;
      top: 0;
    }
    
    #top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon svg:first-child, #top .avia-smallarrow-slider .avia-slideshow-arrows a.avia-svg-icon img[is-svg-img="true"] {
      height: 20px;
      width: auto;
      margin-top: 15px;
    }
    
    #top .avia-smallarrow-slider .avia-slideshow-arrows {
      position: relative;
      width: 120px;
      top: 20px;
      left: auto;
      height: 24px;
      right: 10px;
    }

    If you’re trying to disable the image overlay, add this code:

    .image-overlay, .image-overlay .image-overlay-inside {
        display: none !important;
    }

    Best regards,
    Ismael

    #1483815

    Hi,

    Try to use this css code to adjust the font size of the menu items inside the nav widget:

    #top .widget_nav_menu li {
        font-size: 16px;
    }

    Best regards,
    Ismael

    Lissasan
    Participant

    I’ve tried the solutions for this from previous questions, but so far I’ve had no luck. I’m trying to use a different font from what is set for default headings (Open Sans) in Enfold for just one easy slider caption. When I change the default font in the theme settings, I can see the font I want (Tangerine). When set the default back to Open Sans and use the CSS override in Quick CSS, I see the font switch to serif, but it will not resolve Tangerine. What am I doing wrong?

    I inspected the caption in Chrome and copied the selector, so the CSS is
    #faithtop > div > ul > li > div > div > div > div > div > div > h2.avia-caption-title {
    font-family: “Tangerine”, serif !important; font-size: 4em !important; color: #2d5c88 !important;
    }

    Hi,

    .main-title looks like a different font or font weight

    Looks like the title is set to use a lighter font weight instead of the default 400. Did you configure the Heading elements in the Enfold > Advanced Styling tab? You can also adjust it with this css:

    #top #wrap_all .main_color h1, #top #wrap_all .alternate_color h1, #top #wrap_all .socket_color h1 {
        font-weight: 400;
    }

    Regarding the burger/mobile menu, try to edit the Main Menu (Icon) elements in the Advanced Styling panel, or use this css code:

    #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
        color: #ffffff;
        font-size: 18px;
        line-height: 1.8em;
    }
    
    .html_av-overlay-side #top #wrap_all div .av-burger-overlay-scroll #av-burger-menu-ul li:hover a, #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a:hover {
        background-color: #333366;
        color: #ffffff !important;
    }

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

    This reply has been marked as private.
    #1483641

    The blue box marks the container, which you set to 1500px in the Enfold settings – see my comment above : link
    Since the font is set to centered, it will be placed in the middle of the container. If the size is smaller, there will be a gap to the outer edges of the blue box.

    Originally, you can see in the first screenshot that there is a manually placed line break (<br>) at the point marked in red.
    (click to enlarge the images)

    In the second screenshot, I have removed this manual line break in my browser’s dev tools to show you that when there are no line breaks, these lines have the said 1500px width.

    Where you are now reporting the lack of smaller widths, you have simply not set manual breaks as above inside the text-block elements.

    Hi,

    You can adjust the value for all breakpoints, including the first one, which applies to desktops or large screens. To adjust the style of the slider buttons on smaller screens, you can add the following css code:

    /*
    Mobile Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */
    
    @media only screen and (max-width: 768px) {
    
      /* Add your Mobile Styles here */
      #top .container .slideshow_inner_caption .avia-slideshow-button {
        margin-top: 10px;
        padding: 6px 8px;
        font-size: 13px;
      }
    }

    Best regards,
    Ismael

    #1483573

    As i mentioned above – and Mike pointed out again – there are a lot of manual set linebreaks (<br>)
    but if you like you can force a max width of the p-tags by font length units one of the modern one is ch (The width of the 0 character of the font in use) so – 110ch means nearly 110 characters. A more common font unit is em (The font size of the element, or its nearest parent container)

    I would not recommend this procedure; I would probably rather limit the container itself there, but so that you can see that it also works via css:

    #top .avia_textblock p {
      max-width: 110ch;
      word-wrap: break-word;
      margin: 0.85em auto 0;
    }

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #av-burger-menu-ul li.av-show-submenu > a > .avia-menu-text {
    	color: blue;
    }
    #av-burger-menu-ul li.av-show-submenu > .sub-menu > li > a > .avia-menu-text {
    	color: yellow;
    }
    .html_av-submenu-hidden #av-burger-menu-ul .av-submenu-indicator:before {
    	color: yellow;
    	font-size: 20px;
    }
    #top #wrap_all #av-burger-menu-ul .menu-item-2846 {
    	font-size: 12px !important;
    }

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1483551

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 767px) { 
    .responsive #top.home #wrap_all #av_section_3 .flex_column.av_one_third {
    	width: 31%;
      margin-left: 6px;
    }
    }
     @media only screen and (max-width: 500px) { 
     	#top.home #wrap_all #av_section_3.main_color .flex_column.av_one_third h3 {
        font-size: 0.6em;
     	}
     }
     @media only screen and (min-width: 501px) and (max-width: 767px) { 
     	#top.home #wrap_all #av_section_3.main_color .flex_column.av_one_third h3 {
        font-size: 0.9em;
     	}
     }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

Viewing 30 results - 1 through 30 (of 18,671 total)