Often when making a mobile version for a divi website I do not want the default header or footer to show on a mobile device. This is a simple action with a little bit of css and can be done for the entire site or a page by page basis. I added code for a few scenerios.
To put this in-place for the entire site, simply paste the below code into the Divi/Theme Options CSS box.
To put this in-place for individual pages….. While on the page go to the page settings and paste this code into the CSS box for the page.
CSS
/* Hide Home Header and Footer Mobile Only */
@media only screen and ( max-width: 768px ) {
.home #main-header { display:none; }
.home #page-container { padding-top:0px !important }
.home #main-footer { display:none; }}
CSS
/* Hide Home Header Mobile Only */
@media only screen and ( max-width: 768px ) {
.home #main-header { display:none; }
.home #page-container { padding-top:0px !important }}
CSS
/* Hide Home Footer Mobile Only */
@media only screen and ( max-width: 768px ) {
.home #main-footer { display:none; }}
CSS
/* Hide Header and Footer for all pages and devices*/
#main-header { display:none; }
#page-container { padding-top:0px !important }
#main-footer { display:none; }
0 Comments