Subheader adds extra space on mobile

DBrombacher · March 2018

Hello support team,

we have set subheader to "Title & Breadcrums on the Right" and activated hide for "page title", because we only want the breadcrumbs. On desktop it looks fine. On tablet it looks fine, if remove content padding is activated (the padding is now ok). On mobile it has to much padding.

Please provide us a solution for getting the breadcrumbs only with correct padding across devices.

Bryan · March 2018

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link.
It is always a good idea to also attach a screenshot, for that use services like snag.gy or pasteboard.co
thanks

DBrombacher · March 2018

Hi,

the page is online here:

https://short.re-host.eu/support

is it normal, that the breadcrumbs are not visible in mobile? Is there a setting to adjust this?

thank you

Bryan · March 2018

Hi,
it would look something like this with the breadcrumbs:
http://prntscr.com/iuolan
The space you are seeing is just the subheader.
thanks

DBrombacher · March 2018

1. How to remove the subheader, while keeping the breadcrumbs?

2. How to show the breadcrumbs on mobile?

Bryan · March 2018

1. You cannot disable the subheader and have breadcrumbs because they are inside the subheader
2. only with custom css, send us a link and we will help you with it.
thanks

DBrombacher · March 2018

Our problem is that in "tablet" mode it looks fine, but on mobile the subheader is bigger and therefore it does not look good:

C

Can you help us to reduce the padding of the subheader with CSS?

Here is the link to the website:

https://short.re-host.eu/support

Thank you in advance

Bryan · March 2018

You can use this css to hide the subheader on mobile

@media (max-width:767px) {
	 #Subheader {
	 	display:none !important;
	 }
}

DBrombacher · March 2018

Thank you very much.

Is it possible to enable the content padding only for mobile screen?

I have activated the option "Content | Remove Padding" on most of the pages, because with the subheader it looks better wenn padding is removed. But on mobile, since we disabled the subheader via custom css, there is no padding. I need the padding for the content only on mobile screen.

Can you help us out? Thanks in advance

Bryan · March 2018

Hi,
but on mobile there is padding, http://prntscr.com/ix34pm
do you want more?
thanks

DBrombacher · March 2018

I have found a solution:

@media (min-width:768px) {
#Content {
padding-top:0px !important;
}
}

and i deactivated the option "Content | Remove Padding" on each side (where it was activated, the example page you send was not activated)

Thank you for your help

*closed*

amjin · October 2018

What custom css can I use to reduce the subheader padding on mobile only?

https://fannypackoutlet.com/

Pablo · October 2018

amjin

Paste this code into Theme Options > Custom CSS & JS > CSS

@media (max-width:767px){
	body.minimalist-header-no #Subheader{
		padding:20px 0 !important;
	}
}

Thanks

Subheader adds extra space on mobile

Comments