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

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

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

Best regards,
Mike

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

Best regards,
Mike

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