Too much white space between header and content on mobile

Hey JennyGr,

Thank you for the inquiry.

You can use this css code to adjust the styte of the header and the breadcrumbs container on mobile view:

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all .av-logo-container .widget {
    display: none;
  }

  #top #wrap_all .title_container .main-title {
    display: none;
  }

  .responsive .title_container .main-title+.breadcrumb {
    top: 10px;
    left: 0px;
  }

  .responsive #header_meta .sub_menu>ul>li {
    display: none;
  }

  .responsive #header_meta .sub_menu>ul>li:last-child {
    display: block;
  }
}

Best regards,
Ismael

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header .social_bookmarks {
        display: block;
    }
    #avia2-menu #menu-item-8506,#avia2-menu #menu-item-9168,#avia2-menu #menu-item-6813 {
    	display: none;
    }
    #header_main #text-8,#main .main-title {
    	display: none;
    }
    #top #main .title_container .container {
    padding-bottom: 0;
    min-height: 25px;
    }
    #full_slider_1 *:not(.avia-caption-title, .avia-caption-content, .avia-caption-content p) {
    	min-height: 90px;
    }
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
without this css:

with this css:

Best regards,
Mike

Hi,
Add this css:

@media only screen and (max-width: 767px) {
	#main .title_container {
		display: none;
	}
}

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