Hi,
Thanks for the feedback and the link to your example site, it helped me by seeing what they have done. When I check the site I see the break point for the mobile menu is 992px, and the set the menu item width to 14.25% and the font is a little smaller.
So to show the burger menu until 991px we will use this css:

@media only screen and (min-width: 767px) and (max-width: 991px) {
  #top #header .av-main-nav > li.menu-item  {
      display: none!important;
  }
  #top #header .av-burger-menu-main.menu-item-avia-special  {
      cursor: pointer;
      display: block!important;
  }
  #top #header .av-main-nav > li > a {
  	background-color: transparent !important;
  }
  .html_header_top #top .av_menu_left .main_menu {
    right: 20% !important;
    left: auto !important;
  }
  .html_header_top .av_bottom_nav_header .av-logo-container .main_menu {
    display: block !important;
}
  #top #header_main_alternate {
	 display: none;
}
}

the expected results:

Then to set the main menu similar to the other site we will use this css:

@media only screen and (min-width: 992px) { 
.main_menu {
    display: flex;
    align-items: center;
}
.avia-menu>ul.av-main-nav {
    margin: 0;
    display: flex;
    justify-content: space-around;
    position: relative;
}
.avia-menu>ul.av-main-nav>li.menu-item {
    width: 14.25%;
    padding: 0;
}
.avia-menu>ul.av-main-nav>li.menu-item>a,
.avia-menu>ul.av-main-nav>li.menu-item>a span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    font-size: 18px;
}
.avia-menu>ul.av-main-nav>li.menu-item .avia-menu-text,
.avia-menu>ul.av-main-nav>li.menu-item-search-dropdown {
	display: flex;
    justify-content: center;
}
#top #header_main_alternate .container {
    margin: 0 auto;
    padding: 0px 50px;
}
}
@media only screen and (min-width: 1200px) { 
.avia-menu>ul.av-main-nav>li.menu-item {
    margin: 0 13px;
}
}

the expected results 992px:

and at larger screens 1440px:

Please give this a try.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hey Bettina,
Thanks for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.single-post .avia-image-container.avia-align-left {
    margin-right: 0;
}
#top.single-post p > i {
	font-size: 12px;
}

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,
On the page that you linked to, “Schulmaterialien” is an H1 tag and your CSS is targeting H2 tags, Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field instead:

@media only screen and (max-width: 767px) {
  #top #wrap_all #main .header_color h1,
  #top #wrap_all #main .main_color h1,
  #top #wrap_all #main .alternate_color h1 {
    font-size: 24px;
  }
}

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,

Thanks for that. Please try to set smaller font sizes for the headings in the element settings, under Styling->Font sizes.

Best regards,
Rikard

Hi,

Thank you for the update.

Did you purge the cache before testing the page? You may have to toggle or temporarily disable the Enfold > Performance > File Compression settings as well. Please make sure to perform a hard refresh before testing the page.

The code above should adjust the size of the h1 element. If you want to change the size of the h2 element manually, just copy the css rule above, then replace all instances of the h1 selector.

  #top #wrap_all .header_color h2,
  #top #wrap_all .main_color h2,
  #top #wrap_all .alternate_color h2 {
    font-size: 24px;
  }

Or as suggested above, you can adjust the font size settings in the Enfold > General Styling > Typography panel.

Best regards,
Ismael

Hi Henning,

Please add the following code to the Quick CSS field in Enfold theme options > General Styling tab:

#top .special_amp {
    font-size: inherit;
    line-height: 1;
    font-style: normal;
    font-family: inherit;
    font-weight: inherit;
}

Best regards,
Yigit

Hey Fairbanks_Seeds,

Thank you for the inquiry.

Did you adjust the Heading Font Sizesoptions in the Styling > Font Sizes panel? The Content > Heading Style should be set to Modern prior.

Best regards,
Ismael

Hi,

Thanks for that. You can set the main menu font size under Enfold->Advanced Styling. I tried it out on your installation, and it’s working as expected.

Best regards,
Rikard

Hey Tim,

Thank you for the inquiry.

You can adjust the font size of the h1 element by using this css code.

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

  /* Add your Mobile Styles here */
  #top #wrap_all .header_color h1,
  #top #wrap_all .main_color h1,
  #top #wrap_all .alternate_color h1 {
    font-size: 32px;
  }
}

You can also adjust the font settings of the headings and body text in the Enfold > General Styling > Typography panel.

Best regards,
Ismael

Hi,

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

#top #wrap_all .social_bookmarks:hover a {
  background-color: #000;
}

#top #wrap_all .social_bookmarks a:before {
  font-size: 16px;
}

The documentation you linked to is for the social share element, not the icons in the header. I’m not sure which example you would like to mimic, but I don’t think large rectangle buttons would look nice or fit inside the header unfortunately.

Best regards,
Rikard

Hey woogie07,

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

.av-subnav-menu li {
  font-size: 16px;
  font-weight: bold;
}

Best regards,
Rikard

Hi,

You can use the following code to adjust the colors of the error field:

.av-fields-with-error {
  font-size: 20px;
  color: white;
  background-color: black;
  border-color: orange !important;
}

If you need specific customization, please hire a freelance developer.

Regards,
Yigit

Hi,
Thank you for the link to your site, I see the css from the other thread is in your Quick CSS:

#top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title {
    font-size: 36px;
}
#top .avia-slideshow .avia-caption-content p {
    font-size: 20px;
}

and on your /news/ page you are only using 8 slides, when I change to 12 by cloning the last iten 4 more times and clear my browser cache and check with Windows in Chrome, Firefox, & Edge & Mac in Safari, Chrome, Firefox all items show correctly.
Perhaps when you added the other items your cache was not fully cleared, Please note that Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
I removed the extra items, please try adding the new slides that you want and clear your cache, perhaps a couple of times, and if that doesn’t help please let us know so we can look and help.

Best regards,
Mike

Hey steveorrmedia,
Thank you for your patience and the links, so based on your description for the first three issues, that are all for heading text being cut off at screen sizes below 480px, while it is possible to break the words with a hyphen, I don’t think this will look good so a better option is to reduce the font size for small screens.
The Special Heading element that you are using on these three pages has an option to do this, please go to the styling tab and look for Heading Font Sizes then click the icon for the small device screen and adjust the font size to about 37px.

You could also adjust the Subheading Font Sizes if you wish. I did this for your /message-development/ page special heading, and now the text fits at the smallest screen sizes, please clear your browser cache and check, and then try this for your other pages.
Fot your last issue with the logos being too close together on small mobile when they are in a single column, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 479px) { 
	#top .avia-logo-element-container .slide-entry {
    padding: 10px;
	}
}

and feel free to adjust the 10px to suit if it is not enough
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

Hey,

Please add the following code to the bottom of the Quick CSS field and adjust it as needed:

.avia-data-table td {
  font-size: 16px;
}

Best regards,
Yigit

Hi,

Thank you for the info.

Looks like the other slides still have the default h2 styles, not the styles set in the Styling > Font Sizes panel.

This is the custom style of one of the slides, configured in the Styling > Font Sizes.

#top #wrap_all .avia-slideshow .av-slideshow-caption.av-lhewf3ia-c0fce5f319dd1be36b426af6eda71d3c__7 .avia-caption-title {
    font-size: 36px;
}

And this is the default h2 style, which is still applied to some of the slider items.

#top #wrap_all .main_color h2, #top #wrap_all .alternate_color h2, #top #wrap_all .footer_color h2, #top #wrap_all .socket_color h2 {
    font-size: 15px;
    font-family: 'arial', Helvetica, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

Please check the slider settings, then toggle or temporarily disable the Enfold > Performance > File Compression settings.

Best regards,
Ismael