Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 29, 2023 at 8:01 pm #1414856
    jamesbarrell

    Hi,

    I’m using Colour section with 2 x 50% single column layout elements inside.

    Then in each I have a Catalogue element so that on desktop I get them side by side.

    On Mobile they are stacked nicely also, but my problem is that on mobile at the split point there are 2 dashed lines with an empty space between. Is there a way to correct this layout problem?

    Thanks,
    James.

    July 29, 2023 at 10:14 pm #1414874
    Mike

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

    @media only screen and (max-width: 767px) { 
	#top.page-id-30 .av-catalogue-container.avia-builder-el-10 .av-catalogue-list {
		 border-top: none;
	} 
	.responsive #top.page-id-30 #wrap_all .flex_column.avia-builder-el-7 {
		margin-bottom: 0;
	}
	.responsive #top.page-id-30 #wrap_all .av-catalogue-container.avia-builder-el-8 {
		padding-bottom: 0;
	}
}

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

    Best regards,
    Mike

    July 29, 2023 at 11:26 pm #1414885
    jamesbarrell

    Hi again Mike!

    Thanks.

    This seems to have fixed the first block of catalogues (Breakfasts) but the two below (Mains) and (Desserts) are still not right?

    James.

    July 30, 2023 at 3:43 am #1414895
    Mike

    Hi,
    Sorry I didn’t look down further, try adding this css:

    @media only screen and (max-width: 767px) { 
	#top.page-id-30 .av-catalogue-container.avia-builder-el-19 .av-catalogue-list {
		 border-top: none;
	} 
	.responsive #top.page-id-30 #wrap_all .flex_column.avia-builder-el-16 {
		margin-bottom: 0;
	}
	.responsive #top.page-id-30 #wrap_all .av-catalogue-container.avia-builder-el-17 {
		padding-bottom: 0;
	}
	#top.page-id-30 .av-catalogue-container.avia-builder-el-28 .av-catalogue-list {
		 border-top: none;
	} 
	.responsive #top.page-id-30 #wrap_all .flex_column.avia-builder-el-25 {
		margin-bottom: 0;
	}
	.responsive #top.page-id-30 #wrap_all .av-catalogue-container.avia-builder-el-26 {
		padding-bottom: 0;
	}	
}

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

    Best regards,
    Mike

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.