Hi,

We didn’t find any errors in the css code above. Please try to set the builder to debug mode so that we can check the actual shortcodes of the builder elements.

// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode

Best regards,
Ismael

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

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

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,
I can get the menu items to be in one row starting at 768px with this css:

@media only screen and (min-width: 768px) { 
	#header_main_alternate > .container {
		margin: auto;
		padding: 0;
	}
	#top #header .av-main-nav > li {
    padding: 0;
    }
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
but not spaced equally across the whole width of the navigation.
After applying the css, please clear your browser cache and check.
the expected results:

Best regards,
Mike

Hi,
It looks the same as before to me:

Best regards,
Mike

Hey jamesbarrell,
For your mobile menu, it looks correct up to 767px:

but at 768px it looks like you have some custom css that adds a burger menu to the left of the logo:

so please find this custom css and remove it:

@media only screen and (max-width: 1366px){
nav.main_menu {
    display: block !important;
}
}

that should fix it to look like this:

Best regards,
Mike

Hi,
I believe Nikko made the chage at Enfold Theme Options ▸ Theme Options ▸ Where Do You Want To Display The Blog
I believe the image is added by your custom function in your child theme functions.php:

function add_custom_header_image() {
	if ( is_single() || is_archive() ) { ?>
    	<div class="single-header-image"><br><br></div>
		<div class="breadcrumbrow" style="background-color: #f8f8f8;"><div class="container" style="padding-top:3px;">
					<?php echo do_shortcode('[av_breadcrumbs]'); ?></div></div>
<?php }
}
add_action( 'ava_after_main_title', 'add_custom_header_image', 10 );

To show the image and breadcrumb in the above function on the blog page you would add !is_front_page() && is_home()
like this:

function add_custom_header_image() {
	if ( is_single() || is_archive() || !is_front_page() && is_home() ) { ?>
    	<div class="single-header-image"><br><br></div>
		<div class="breadcrumbrow" style="background-color: #f8f8f8;"><div class="container" style="padding-top:3px;">
					<?php echo do_shortcode('[av_breadcrumbs]'); ?></div></div>
<?php }
}
add_action( 'ava_after_main_title', 'add_custom_header_image', 10 );

I did this for you, please clear your browser cache and check the blog page

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thank you for the link to your site, I added the required custom class to your masonry element:

I didn’t find the required css on your site, so I added it to WordPress ▸ Customize ▸ Additional CSS
and now for mobile it seems to be working:

Best regards,
Mike

Hi,
Thanks for the screenshots, it looks like the page you want to be 960px is the blog page, and I assume other pages, so I recommend settings the site content width to 960px at Enfold Theme Options ▸ General Layout ▸ Dimensions ▸ Content | Sidebar Ratio.
Then it looks like a single post is the page you want to be 720px, I would achieve this will css like trying this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.single-post .fullsize .template-blog .post .entry-content-wrapper {
	  max-width: 720px;
}
#top.single-post .av-content-full > .related_posts {
	max-width: 720px;
}
#top.single-post .av-content-full > .comment-entry {
	max-width: 720px;
}

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.
This css assumes that the single post is created with the default editor, and your settings are similar to my demo site, unfortunately there are so many settings that to give to an exact solution I will need to see your page. You could include a admin login in the Private Content area below, or we could wait until your site is live.

Best regards,
Mike

Hi,
Go to your menus and hover over the “delete menu” and you should see a browser tool tip for the URL, in the URL you should see the menu ID like this screenshot that shows menu=12

Best regards,
Mike

Hi,
Glad to hear that you have solved most of the issues, typically the elements have a spacing options for each screen size as icons, similar to this:

each element is a little different so it depends on the element.
What is the current element that you are having issues with?

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, I will look at your other issue, it looks complicated so it may take some time. If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

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,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Unfortunately there is not a way to do this with ACF & Enfold because Enfold doesn’t get the CSS colors from the post. Unfortunately I don’t see a way to do this.
Perhaps you can get ACF to add a custom class to the masonry element that can specify the color, but I didn’t find a way to do this, my ACF knowledge is limited as well as our support of ACF.

Best regards,
Mike

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike