Hi Stefan,

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

@media only screen and (max-width: 767px) {
div.avia-cookie-consent p {
    font-size: 12px;
    line-height: 18px;
}
}

Best regards,
Rikard

Hey bemodesign,

Thank you for the inquiry.

There is a missing closing curly brace in the third css media query, which is probably why it affects the desktop view or why it is not working correctly. You can also combine the css rules inside a single css media query and remove the duplicates.

Please replace the above css with the following code.

@media only screen and (max-width: 768px) {
  .responsive #top .avia-slideshow-inner, .responsive #top .avia-slideshow-inner img {
    height: 420px !important;
  }

  .responsive #top .slideshow_caption {
    padding: 20px;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top .av_slideshow_full li img {
    width: 180% !important;
    max-width: 180% !important;
    margin-left: -45%;
  }
}

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

Best regards,
Ismael

Hey Eric,
Merci pour le lien vers votre site, les grandes couleurs violettes du titre du méga menu sont définies dans vos options de thème, si vous regardez dans votre Enfold Theme Options ▸ General Styling vous trouvez-en un qui soit violet. Les titres du méga menu sont traités comme des en-têtes plutôt que comme des liens simples, mais si vous voulez qu’ils ressemblent à des liens simples, essayez ce code dans le champ Style général ▸ CSS rapide ou dans le champ WordPress ▸ Personnaliser ▸ CSS supplémentaire :

#top #header #header_main .mega_menu_title a {
    color: #c6d6be;
    font-size: 12px;
    font-weight: 400;
}
#top #header #header_main .mega_menu_title a:hover {
	color: #1078ff;
}

Après avoir appliqué le CSS, veuillez vider le cache de votre navigateur et vérifier.

— Translated with Google —

Thanks for the link to your site, the large purple mega menu title colors are set in your theme options, if you look in your Enfold Theme Options ▸ General Styling you will find one that purple. The mega menu titles are treated like headings rather than simple links, but if you want them to look like simple links please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top #header #header_main .mega_menu_title a {
    color: #c6d6be;
    font-size: 12px;
    font-weight: 400;
}
#top #header #header_main .mega_menu_title a:hover {
	color: #1078ff;
}

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

Best regards,
Mike

Hey aruizhuidobro,

Thank you for the inquiry.

You can use this css code to adjust the style of the success message including the font size.

.avia-form-success {
	text-align: center;
	border-style: solid;
	border-width: 1px;
	padding: 20px 15px;
        font-size: 18px;
	line-height: 1.4em;
	border-radius: 2px;
	clear: both;
}

Best regards,
Ismael

Hi,

Please try this CSS as well:

.widget li a:before {
    font-size: 20px; 
}

Best regards,
Rikard

Hi,

Thank you for the update.

You can also adjust the font size on smaller screens. Please try this css code.

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

  /* Add your Mobile Styles here */
  .html_modern-blog #top .post-entry .post-title, .html_modern-blog .avia-content-slider .slide-entry-title {
    font-size: 1em;
    letter-spacing: 1px;
    word-break: break-word;
  }
}

Default font-size value is 2em.

Best regards,
Ismael

Hey woogie07,

Thank you for the inquiry.

You can use this css code to adjust the size of the social icons. Please add it in the Quick CSS field or in the child theme’s style.css file.

#top #socket .social_bookmarks {
    margin: 0 0 0 30px;
    height: 50px;
}

#top .social_bookmarks li {
    width: 50px;
}

#top .social_bookmarks li a {
    width: 100px;
    line-height: 50px;
    min-height: 50px;
    font-size: 30px;
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

Hi,
Thank you for your patience, in your opening post you said that the EN iconbox title doesn’t show in white only for logged-in uses, but I see this error on Windows with Chrome not logged-in.
Anyways, on your EN page all of the sections starting with #references and below are outside the #main container:

compare to the DE site:

typically this occurs when an element has an unclosed manually added tag or div, and typically it’s the last element befor the error, but it could be anywhere on the page.
So considering this, when I compare your DE & EN tab section, I see the DE has two columns and EN only has one, please see the screenshot in the Private Content area.
Please check your tab sections.
Another possible cause is if you are programmatically adding sections with broken shortcodes or injecting shortcode somehow after the DOM, so if you are try disabling this function.
If you just want to fix the iconbox title color for this one page, try this css:

#top.page-id-4519 .iconbox .iconbox_content_title {
    font-size: 50px;
    color: #fff;
}

Best regards,
Mike

Hi,

If you want to set general font sizes for headings, then you can do so under Enfold->General Styling->Typography. If you are referring to the captions in the Full Width Easy slider on your front page, then you can set font sizes for each screen size if you click in to each slide, then change the font sizes in the Styling->Font Sizes tab.

Best regards,
Rikard

Hi,

Yes, this is the default implementation.

You can check in the post css files.

Create a page with e.g. textblock and set the font sizes. You will see “default” font is without media query and then come the responsive media queries for the font sizes.

Best regards,
Günter

Hi,

Thanks for the update. We didn’t change anything on your site, so it’s likely that you have active caching on your site, which has now expired.

1. I’m not sure exactly on which screen size you are looking to change which headings, but the ones you indicated in the screencast can be controlled with this CSS:

.av-image-caption-overlay-center {
  font-size: 26px;
}

2. There is CSS changing that section to orange coming from the file in private. It’s impossible for us to know where that is added though, since the URL doesn’t give any clues.

Best regards,
Rikard

Hey Guenter,

A first response:

The basic implementation for responsive in enfold is that you have a setting with no media query (description is desktop – no media query) either in css files or set in options and then media queries that override the desktop setting.

I think this is also a historical reason because responsive was added later.

Changing this will certainly break many sites.

But I agree – there is missing an option with a media query for large screens only (wider than 990px).

This would allow:

• set a custom default value for all sizes (and override theme setting)
• set a custom value for each of the 4 devices independently, if not set the custom default value for all sizes or theme default is used

I will think about it a little more.

This can also be used for font sizes and other responsive settings

Best regards,
Günter