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

#top #wrap_all #header .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    color: #000;
    font-size: 16px;
}

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,

every image ID needs to be added to the css right?

Are you referring to @Guenni007’s modification? You can remove the .page-id-xxxxx selector from the css code if you want the changes to apply globally.

#top .with-lightbox-caption .avia_image {
  overflow: visible !important;
}

#top .av-image-caption-overlay {
  bottom: -30px !important;
  font-size: 10px !important;
  height: auto !important;
  width: 100% !important; 
  text-align: justify !important;
}

#top .avia-image-overlay-wrap:hover .av-image-caption-overlay,
#top .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg {
  opacity: 1 !important;
}

You should also remove the is_page conditional function from the animated_enfold_lightbox callback.

function animated_enfold_lightbox() {
?>
<script type="text/javascript">
(function($){
 // rest of the code
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'animated_enfold_lightbox', 999);

Best regards,
Ismael

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

@media only screen and (max-width: 767px) {
#top #wrap_all .avia-button {
  padding: 30px 30px 30px 30px !important;
  font-size: 20px;
}
}

I’m looking at this button on your homepage as an example:

these are the correct buttons, right?
If you have a missing bracket in your css somewhere it could cause issues for new css, so try adding the css to WordPress ▸ Customize ▸ Additional CSS and see if that makes a difference.

Best regards,
Mike

Hi,

Please try using this CSS instead to change the font size on mobile devices as well:

@media only screen and (max-width: 767px) {
.avia-button {
  padding: 30px 30px 30px 30px !important;
  font-size: 20px;
}
}

Best regards,
Rikard

Hi,

Thank you for the update.

You may need to adjust the breakpoint in the css media query above to target smaller screens. Please try this css code.

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

  /* Add your Mobile Styles here */
  #top .grid-content h3 {
    font-size: 32px;
    text-align: center;
  }
}

Best regards,
Ismael

Hey Katja,

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

#header_main .social_bookmarks li a:before {
  color: red;
  font-size: 10px;
}

Best regards,
Rikard

Hey WorldinColor,

Please try this to make the circle smaller:

#top .iconbox.av-no-box .iconbox_icon {
  width: 50px;
  height: 50px;
  line-height: 50px;
}

This CSS is coming from your child, and it’s applying:

.acme-iconbox .iconbox_icon {
  color: #f213f2;
  font-size: 20px !important;
}

Best regards,
Rikard

Hi,

Thanks for the update. Please try this in Quick CSS in order to style the read more text:

.av-fold-button-container {
  font-family: 'roboto', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 24px !important;
}

Best regards,
Rikard

Hey Blaise,

Thank you for the inquiry.

There have been a few changes in the post meta info and the blog post elements, which might have caused the layout to change. To fix this, you can add the following css code to adjust the layout of the post meta info.

#top .av-blog-meta-category-disabled .minor-meta.blog-categories, #top .av-blog-meta-category-disabled .text-sep-cat, #top .av-blog-meta-category-disabled .minor-meta.blog-categories, #top .av-blog-meta-category-disabled .text-sep-source {
  display: none;
}

#top .fullsize .template-blog .post-meta-infos .author {
  display: block;
  font-weight: 600;
}

Best regards,
Ismael

Hi,

Please try this CSS instead:

.avia-promocontent h3 {
  font-size: 22px !important;
}

Best regards,
Rikard