mobile menu reduce white space to content

Hi carlos,

The space between the navigation and the content is coming from this CSS:

@media screen and (min-width: 768px)
#masthead > .col-full > .site-logo-link {
    padding-bottom: 2.224em;
}

Just make the padding less and you should be good! ??

Carlos,

Scratch that, it’s this CSS:

.page-template-template-homepage .site-main {
    padding-top: 4.236em;
}

I would suggest wrapping that in a mobile-only media query and reducing that padding.

Hi Mikey …

I have tried that code on my css but it did not work.

The thing though is that I do not know hot to make that wraping thing you talk about.

Sorry for my ignorance.

Can you explain it please.

Hi Carlos,

CSS uses something called media queries to tell the rules to only apply to certain screen widths (like a mobile device). Something like this should work for your site:

@media screen and (max-width: 767px) {
.page-template-template-homepage .site-main {
    padding-top: 0em;
}
}

In that rule, I’m telling the specific CSS to only run when it’s in a screen of 767 pixels and smaller.

Ah … I understand.

Sadly It doesn’t get rid of the wasted space there. This is an issue I have had tried some time ago, with some css to no avail.

This is so annoying, mainly in the mobile view. I did reduce the breadcumbs padding, anyway I don’t use them but I suspect there is something with the breadcumbs, they do not appear but I guess that space is still there

Thanks for helping … any more hints?

Where did you add this CSS? Maybe try padding-top: 0em !important?

Yes did try that,

I have tried on my child s css, and on a custom css plugin just in case, but it did not work

Hey Carlos,

I noticed a few weird things with your site’s CSS.

First, the parent theme CSS is being loaded twice:

<link rel='stylesheet' id='parent-theme-css-css'  href='https://1-diez.com/wp-content/themes/storefront/style.css?ver=4.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='storefront-style-css'  href='https://1-diez.com/wp-content/themes/storefront/style.css?ver=1.6.1' type='text/css' media='all' />

I found this CSS on your site:

@media screen and (max-width: 767px) {
  .page-template-template-homepage .site-main {
    padding-top: 4.236em !important;
  }
}

I think that’s where the problem is – that padding-top should beset to 0 if you want to remove that space, currently it’s set to 4.236.

Hi,

I have searched for that padding on my css, and it is not there, I have not written that.

And … how can I prevent the parent theme being loaded twice?

The thing is that I have css written on my child’s css and some other minor things on a custom css plugin cause they were not outputting right from my child’s css or they ere not loaded last .. so

Has this to do with that? any way I have not that padding written

just in case this is how my child functions begins …

<?php

update_option('siteurl','https://1-diez.com/');
update_option('home','https://1-diez.com/');
/**
 * Enqueues child theme stylesheet, loading first the parent theme stylesheet.
 */
function themify_custom_enqueue_child_theme_styles() {
	wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'themify_custom_enqueue_child_theme_styles' );

Am I doing it wrong?

Hi Carlos,

I’m not sure where the styles are being loaded twice – I would check through your child theme’s functions to see where it might be happening.

As for the CSS that’s being added, I don’t see it anymore. What you should do is in your Child Theme CSS make sure to add his:

@media screen and (max-width: 767px) {
  .page-template-template-homepage .site-main {
    padding-top: 0em !important;
  }
}

Because I don’t see that being added right now.

Hi Mikey,

You did not see it because when I see some code not working, I take it out of the style.

I have put the code again on my child’s css. But the space is till there in the mobile view.

Hope you can come up with a solution.

Again thanks

Hi Carlos,

I think the issue is that your Child Theme CSS has some syntax errors. I would make sure to go through and check it for errors (any missing closing tags).

Hi Mikey,

I have checked the whole css file and don-t see any syntax errors … thou I am no expert.

I see one tag that doesn’t have a closing tag:
https://a.mikey.link/1d7wv/WLORlama