Hi,

Glad you got it working, please let us know if you should need any more help on the topic.

Best regards,
Rikard

Hi Kurt,

Glad we could help, please let us know if you should need any more help on the topic.

Regards,
Rikard

Hi Horst-Michael,

I’ve tagged the topic for our german speaking moderator, please wait for his reply.

Best regards,
Rikard

Hi,

Great, glad you got it working. Please let us know if you should need any more help on the topic.

Regards,
Rikard

Hi changegroup,

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

1.

@media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small {
margin-bottom:0 !important;
}
}

2.

@media only screen and (max-width: 767px) {
.single .av-special-heading {
margin-top: 20px !important;
}
}

Regards,
Rikard

Hi Linda,

Great, glad you got it working. Please let us know if you should need any more help on the topic.

Best regards,
Rikard

Hey Dave,

But now the Main Content starts up beneath the Header

We checked the site but it’s using a different theme. Could you please provide a screenshot of the layout that you want? Have you tried adding css modifications in the Quick CSS field? You can achieved a transparent boxed layout with this:

.alternate_color, .alternate_color .site-background, .alternate_color .first-quote, .alternate_color .related_image_wrap, .alternate_color .gravatar img .alternate_color .hr_content, .alternate_color .news-thumb, .alternate_color .post-format-icon, .alternate_color .ajax_controlls a, .alternate_color .tweet-text.avatar_no, .alternate_color .toggler, .alternate_color .toggler.activeTitle:hover, .alternate_color #js_sort_items, .alternate_color.inner-entry, .alternate_color .grid-entry-title, .alternate_color .related-format-icon, .grid-entry .alternate_color .avia-arrow, .alternate_color .avia-gallery-big, .alternate_color .avia-gallery-big, .alternate_color .avia-gallery img, .alternate_color .grid-content, .alternate_color .av-share-box ul, #top .alternate_color .av-related-style-full .related-format-icon, .alternate_color .related_posts.av-related-style-full a:hover, .alternate_color.avia-fullwidth-portfolio .pagination .current, .alternate_color.avia-fullwidth-portfolio .pagination a, .main_color, .main_color .site-background, .main_color .first-quote, .main_color .related_image_wrap, .main_color .gravatar img .main_color .hr_content, .main_color .news-thumb, .main_color .post-format-icon, .main_color .ajax_controlls a, .main_color .tweet-text.avatar_no, .main_color .toggler, .main_color .toggler.activeTitle:hover, .main_color #js_sort_items, .main_color.inner-entry, .main_color .grid-entry-title, .main_color .related-format-icon, .grid-entry .main_color .avia-arrow, .main_color .avia-gallery-big, .main_color .avia-gallery-big, .main_color .avia-gallery img, .main_color .grid-content, .main_color .av-share-box ul, #top .main_color .av-related-style-full .related-format-icon, .main_color .related_posts.av-related-style-full a:hover, .main_color.avia-fullwidth-portfolio .pagination .current, .main_color.avia-fullwidth-portfolio .pagination a {
	background-color: rgba(255,255,255,.5) !important;
}

.header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a {
    background-color: rgba(255,255,255,.5) !important;
    color: #808080;
}

#main, .html_stretched #wrap_all {
background-color: transparent !important;
}

Best regards,
Ismael

Hi,

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Note that the content of the posts created in the advance layout builder will not display in the blog overview page. You need to use the default editor.

Best regards,
Ismael

Hi,

Turn on the custom css class then add a unique class attribute to the columns which contain the logo and the video. http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Use css media queries to adjust the width of these columns on mobile view. Example:

@media only screen and (max-width: 767px) {
.responsive #top .custom-column {
    margin: 0;
    margin-bottom: 10px;
    width: 48%;
}
}

We used “custom-column” as the class attribute.

Best regards,
Ismael

Hi,

Please let us know if you should need any more help on the topic.

Thanks,
Rikard

Hi,

Please let us know if you should need any more help on the topic.

Best regards,
Rikard

Hi,

Please let us know if you should need any more help on the topic.

Regards,
Rikard

Hi,

1.) We added the following code in the Quick CSS field to force the full submenu element to switch to mobile menu on tablet view:

@media only screen and (max-width: 989px) {
.responsive #top .av-menu-mobile-active .mobile_menu_toggle {
    display: inline-block;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu {
    display: none;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu.av-open-submenu {
    display: block;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu li {
    display: block;
    border-top-style: solid;
    border-top-width: 1px;
    padding: 0;
}

.responsive #top .av-subnav-menu > li:first-child {
    margin-top: -1px;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu > li > a {
    border-left: none;
    padding: 15px 15%;
    text-align: left;
}

.responsive #top .av-submenu-container {
    top: 50px !important;
    position: relative !important;
    height: auto;
}

.responsive #top #wrap_all .av-menu-mobile-active.container {
    width: 100%;
    max-width: 100%;
}

.responsive #top .av-menu-mobile-active {
    text-align: center;
}
}

Best regards,
Ismael

Hi,

Edit the color section, add a unique Section ID to it, “custom-section” for example then add this in the functions.php file:

// custom section height fix
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script>
(function($){
	$.fn.avia_browser_height_mod = function()
	{
		if(!this.length) return;

		var win			= $(window),
			html_el		= $('html'),
			subtract	= $('#wpadminbar, #header.av_header_top:not(.html_header_transparency #header), #main>.title_container'),
			css_block	= $("<style type='text/css' id='av-browser-height-mod'></style>").appendTo('head:first'),
			sidebar_menu= $('.html_header_sidebar #top #header_main'),
			full_slider	= $('.html_header_sidebar .avia-fullscreen-slider.avia-builder-el-0.avia-builder-el-no-sibling').addClass('av-solo-full'),
			calc_height = function()
			{
				var css			= "",
					wh100 		= win.height(),
					ww100 		= win.width(),
					wh100_mod 	= wh100,
					wh95_mod    = Math.round( wh100 * 0.95 ),
					wh95		= Math.round( wh100 * 0.95 ),
					solo		= 0;

				if(sidebar_menu.length) solo = sidebar_menu.height();

				subtract.each(function(){ wh100_mod -= this.offsetHeight - 1; });
				subtract.each(function(){ wh95_mod -= this.offsetHeight - 1; });

				var whCoverMod	= (wh100_mod / 9) * 16;

				//fade in of section content with minimum height once the height has been calculated
				css += ".avia-section.av-minimum-height .container{opacity: 1; }\n";

				//various section heights (100-25% as well as 100% - header/adminbar in case its the first builder element)
				css += ".av-minimum-height-100 .container, .avia-fullscreen-slider .avia-slideshow, #top.avia-blank .av-minimum-height-100 .container{height:"+wh100+"px;}\n";
				css += "#custom-section .container	{height:"+wh95+"px;}\n";
				css += "#custom-section.avia-builder-el-0 .container {height:"+wh95_mod+"px;}\n";
				css += "#top .av-solo-full .avia-slideshow {min-height:"+solo+"px;}\n";

				//ie8 needs different insert method
				try{
					css_block.text(css);
				}
				catch(err){
					css_block.remove();
					css_block = $("<style type='text/css' id='av-browser-height'>"+css+"</style>").appendTo('head:first');
				}

				setTimeout(function(){ win.trigger('av-height-change'); /*broadcast the height change*/ },100);
			};

		win.on( 'debouncedresize', calc_height);
		calc_height();
	}

	$(document).ready(function()
    {
	//calculate the browser height and append a css rule to the head
	if($.fn.avia_browser_height_mod)
		$('#custom-section').avia_browser_height_mod();
	});
})(jQuery);
</script>
<?php
}

If you specify your own Section ID, make sure to replace all instances of the “#custom-section” selector in the code above. If you’re not satisfied with the height, adjust the multiplier (default: 0.95) on this line:

wh95_mod    = Math.round( wh100 * 0.95 ),
					wh95		= Math.round( wh100 * 0.95 ),

UPDATE: Make sure that the “Section Minimum Height” of the color section is disabled or is set to “No minimum height”.

Best regards,
Ismael