Hi,
Glad we were able to help, please see below, 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

Hi,
Glad that this helped, please try this css instead:

@media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small, .responsive #top #footer .flex_column, .responsive #top #footer .av-flex-cells .no_margin, .responsive #top #liefergebiete .flex_column, .responsive #top #liefergebiete .av-flex-cells .no_margin, .responsive #top #kontakt .flex_column, .responsive #top #kontakt .av-flex-cells .no_margin, .responsive #top #speisekarte .flex_column, .responsive #top #speisekarte .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
}
}

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

Best regards,
Mike

Hi,
Glad to hear this helped you move your project forward, thank you for using Enfold.

Best regards,
Mike

Hey sldeutsch,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (max-width: 767px) {
	#top.page-id-2794 .avia-content-slider .slide-entry-excerpt {
    min-height: 320px;
    }
    #top.page-id-2878 .avia-content-slider .slide-entry-excerpt {
    min-height: 245px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
	#top.page-id-2794 .avia-content-slider .slide-entry-excerpt {
    min-height: 200px;
    }
    #top.page-id-2878 .avia-content-slider .slide-entry-excerpt {
    min-height: 130px;
    }    
}
@media only screen and (min-width: 1024px) {
	#top.page-id-2794 .avia-content-slider .slide-entry-excerpt {
    min-height: 180px;
    }
    #top.page-id-2878 .avia-content-slider .slide-entry-excerpt {
    min-height: 105px;
    }    
}

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

Best regards,
Mike

Hey sldeutsch,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top select, #top .avia_ajax_form .select, #top .entry-content-wrapper select {
    background-image: none!important;
}

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

Hey Amnon Nissan,
Thank you for your patience, the hovan.com, site doesn’t look like a WordPress site it looks like it was created with sitecms.co
I see that your “broken” site is Enfold Version: 4.8.6.2
If the hovan.com site was Enfold v1.9.1 then it would not work with WordPress v5+ nor PHP 7+
So you would need to update and it should be updateable as out Dev Team has maintained backward compatibility on the most part, I’m not sure about v1.9.1 but I have seen a v3 site update and work.
But I don’t believe this site is an Enfold or WordPress site, I hope this helps.

Best regards,
Mike

Hey ms-45,
Thank you for your patience and the link to your site, I found that for some reason on this page the main content div #wrap_all is closing early so the #footer is not inside of it, so this css target won’t work:
.responsive #top #wrap_all .flex_column
which is what tells the columns to be 100% width at mobile.
I note that your pages /impressum/ & /datenschutz/ or your shopping pages do not have this problem, so it’s only your homepage.
I believe this could be a plugin conflict but you have many plugins, you could disable your plugins one at a time clearing your browser cache between each one until you find the conflict, or you could try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (max-width: 767px) {
.responsive #top .container .av-content-small, .responsive #top #footer .flex_column, .responsive #top #footer .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
}
}

in my test this solves and should not cause any issues in the future, after applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Maureen,
Thank you for your patience and the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top.page-id-618 .avia-gallery-thumb > .first_thumb {
	clear: left;
}

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

Best regards,
Mike

Hey Dan,
Thank you for your patience and the link to your site, I checked your page and the masonry element and the error seems to be caused by the Modern Events Calendar frontend.min.css and these 4 rules dealing with the class .isotope-item:

.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

this conflict is because the plugin rule is not specific enough to not cause conflicts. It seems that the masonry layout in Modern Events Calendar is only available for the Pro version, you are only using the free lite version so it would be safe to remove these rules. I made this edit for you and cleared your cache plugin & Autoptimize plugin and now the page masonry is working correctly, you will need to clear your browser cache and then it should work correctly for you.

I will report this to our Dev Team, but I don’t think there is much we can do other than ask Modern Events Calendar to change their css rules. So for now keep the edit in mind if you update the plugin.

Best regards,
Mike

Hey macjeffff,
Thank you for your patience and for the link to your page, I see how you are using empty 1/5 columns to center the middle columns, but I didn’t find any examples on your page where the first column was ignored, I checked with a Windows 10 desktop, 1520px and Chrome. If you see the issue on this page please try to describe the section and what setup you are using. If not please link to a page showing the error.

Best regards,
Mike

Hey MikeTandySwag,
Thank you for your patience and the link to your site, try adding this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
    <script>
(function($){
  $( '.post-entry' ).each(function() {
  $( this ).find( '.post-meta-infos:first' ).css({'margin-top': '0'}).insertAfter( $(this).find('.post-title.entry-title'));
  });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

Best regards,
Mike

Hey whdsolutions,
Thank you for your patience and the link to your site, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#mc_embed_signup #mc_embed_signup_scroll #mc-embedded-subscribe {
background-image: url(https://darkeandtaylor-co-uk.stackstaging.com/wp-content/uploads/2021/08/SEND.png);
background-repeat: no-repeat;
background-color: transparent!important;
color: transparent;
background-size: contain;
background-position: 0px 0px;
height: 44px;
}

@media only screen and (max-width: 767px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 34%;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 38%;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1439px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 29%;
}
}
@media only screen and (min-width: 1440px) { 
	#top.page-id-275 #mc_embed_signup_scroll > .clear {
	float: right;
    width: 20%;
}
}

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

Best regards,
Mike

Hi,
Thank you for your patience and the link to your test page, for rounding the corners of the background images in your grid row cells it is possible like this:

#main > .av-layout-grid-container > .flex_cell.av_one_half {
	border-radius: 10px;
    background-size: cover !important;
}

but because it is a grid row you will not be able to have a space between the cells, so I recommend removing the background images and adding image elements inside of the grid row cells then set the border-radius like this:

#main > .av-layout-grid-container > .flex_cell.av_one_half img {
	border-radius: 10px;
}

now you will find that at mobile the images are not full-width and you still don’t have a space between the first two images, to correct try this:

@media only screen and (max-width: 767px) { 
	.responsive #top #wrap_all #av-layout-grid-1.av-flex-cells .no_margin {
		padding: 0!important;
	}
	#top #wrap_all #av-layout-grid-1 > .avia-builder-el-first {
	margin-bottom: 20px;
    }
}

linked below is the test page I created to work this out, please check and try this out.

Best regards,
Mike