Hey lelouxwebdesign,

This CSS is removing the underline:

#top .all_colors span[style*="underline;"] {
  color: #000000;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none !important;
}

Maybe you have added it in Quick CSS?

Best regards,
Rikard

Hey Ivana,

Thank you for the inquiry.

Did you modify the H3 heading element in the Enfold > Advanced Styling panel? The blog and portfolio post titles inherit the styles from the advanced styling configuration. If you want to override it, you can try using this css code:

#top #wrap_all .all_colors h3.grid-entry-title, #top #wrap_all .all_colors h3.slide-entry-title.entry-title {
    font-size: 16px !important;
    line-height: 1.4 !important;
    display: block;
    margin-bottom: 0;
}

Make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings to ensure that the changes take effect.

Best regards,
Ismael

Hi,

You can set the font size by editing the Special Heading element containing the text “Hi, I’m Robert”. Look for the Styling > Font Sizes > Heading Font Size option, as shown in the screenshot below.

View post on imgur.com

For the screenshot, you can use platforms like Savvyify, Imgur or Dropbox.

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

Hi,
If you want the font to be 200px and the menu items closer and to the left, try this CSS in your <strong style=’color:#000′>Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #av-burger-menu-ul {
    text-align: left;
    padding-left: 20px !important;
}
.html_av-overlay-full #av-burger-menu-ul li {
padding: 10px;
}
#top #wrap_all #av-burger-menu-ul li {
    font-size: 200px;
}

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

Best regards,
Mike

Hi,

Thanks for the update.

Q: why does : Working With Us is Easy not look the same size?

The font size of both headings is the same —- 28px.

View post on imgur.com

You can apply the same font size to the “Hi, I’m Robert” heading, remove the 30px padding, and delete the horizontal separator element after it to reduce the space between the heading and the text below.

Best regards,
Ismael

Hi,

Try to edit the Contact Form element and set the Styling > Form Color Scheme to Dark Transparent. You can also replace the previous css with this:

#top #wrap_all .main_color .button, .main_color #submit, #top #wrap_all .contact-form :is([type=submit], button:not([type=reset])) {
    align-items: center;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    border-radius: 100px;
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: 0 0;
    font-size: 14px;
    border-style: solid;
    border-width: 1px;
    transition: all 0.4s ease-in-out;
    padding: 9px 10px 7px;
    width: 80px;
}

Best regards,
Ismael

Hi,

Please remove the previous modification and replace it with the following css code, then make sure to purge the cache or clear your browser history afterward.

#top #wrap_all .contact-form :is([type=submit], button:not([type=reset])) {
    align-items: center;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    border-radius: 100px;
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: 0 0;
    font-size: 14px;
    border-style: solid;
    border-width: 1px;
    transition: all 0.4s ease-in-out;
    padding: 9px 10px 7px;
    width: 80px;
}

Best regards,
Ismael

Hi,
For https://shop.cameleon.design/account/edit-account/ you can try this css:

.woocommerce-account input {
	font-size: 16px !important;
}

but for https://shop.cameleon.design/checkout/ the only fields are the stripe payment info and this is in an iframe which you can not change locally.

Best regards,
Mike

Hi,

Did you set the Min. Mobile Font Size to 10px? Please make sure to purge the cache and clear the browser history, or check the site on incognito mode.

View post on imgur.com

i also noticed the video is not loading now on mobile

The video displays fine on our end.

Best regards,
Ismael

Hey lara666,

Thank you for the inquiry.

You can add this css code to apply the style of the default dark transparent button to the contact form’s submit button:

.contact-form :is([type=submit],button:not([type=reset])) {
    align-items: center;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    border-radius: 100px;
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: 0 0;
    font-size: 14px;
    border-style: solid;
    border-width: 1px;
    transition: all 0.4s ease-in-out;
    padding: 9px 10px 7px;
    width: 80px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

You can try this css to adjust the letter spacing of the “Download my contact info” menu item:

.html_header_sidebar #header .av-main-nav > #menu-item-4085 a {
    font-size: 16px;
    letter-spacing: 0.02em;
}

View post on imgur.com

Best regards,
Ismael

Hey navindesigns,

Thank you for the inquiry.

1.) You can adjust the Min. Mobile Font Size in the Style > Text & Typography panel, as shown in the screenshot below. You can apply a custom css class in the Attributes tab and control the font size using custom css.

View post on imgur.com

2.) Please try this css code to adjust the width and position of the SVG wave separator.

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

  /* Add your Mobile Styles here */
  .avia-section.av-wxcp-c90200cb46284bf3caa8c1c1fbba7cb6 .avia-divider-svg-top svg {
    height: 50px;
    width: calc(100% + 300px);
    left: 20%;
  }
}

Let us know the result.

Best regards,
Ismael

Hey bbarasa,
Do you mean gradient like this:

.page-id-76 .avia-builder-el-0 .av_textblock_section p {
	    background: linear-gradient(186deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, -0.6) 100%);
}

To format the text try this:

.page-id-76 .avia-builder-el-0 .av_textblock_section p {
	font-weight: bold;
    font-size: 36px;
    font-style: italic;
}

Best regards,
Mike

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:

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:

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;
    }
}

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;
    }
}

Try this and adjust to suit.

Best regards,
Mike

Hey extraeyes,
To make this font-size 20px

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