Alter space above and below a specific layout item

Hey tonyiatridis,

Thank you for the inquiry.

You can add this css code to adjust the margin above and below the column or section.

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

  /* Add your Mobile Styles here */
  #top .flex_column.av-lxxntb3b-96793073ee8d9b43abc1bef7251d9ab3 {
    margin-top: -100px !important;
    margin-bottom: -100px !important;
  }
}

Best regards,
Ismael

Hi,

You need to inspect the element in question using your brower, right click on the element and select Inspect. If you need further help with that, then please let us know.

Best regards,
Rikard

Hi,

Thank you for the update.

If there is another way to target individual items let me know that as well.

The theme automatically adds unique IDs (e.g., av-lxxntb3b-96793073ee8d9b43abc1bef7251d9ab3) to the elements, which can be used to adjust their styles or run scripts. Besides this, you can also add custom CSS class names or IDs to the elements by editing them and applying the values in the Advanced > Developer Settings toggle. Look for the Custom CSS Class Name or Custom ID Attribute fields. For more info, please check the links below:

// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Here’s how to inspect the elements:

// https://kriesi.at/documentation/enfold/add-custom-css/#how-to-inspect-an-element-on-the-page

Best regards,
Ismael

Hi,
Thank you for the link to your site, when I check on mobile the space doesn’t seen as much as in your screenshot:

But to make it less try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
	#top.home .avia-builder-el-8 {
		margin-bottom: 0px !important;
	}
	#top.home .avia-builder-el-11 {
		margin-bottom: 0px !important;
	}
}

After applying the css, please clear your browser cache and check.
This is the expected results:

Best regards,
Mike