Subheader padding on mobile?

scott74

Can't seem to get the padding set for subheader to take effect on the actual phone device

https://www.loom.com/share/783c556cbad84f57ab7c704167e9a25d

site

http://humanremedy.com/services/

Pablo

Hello,

You cannot provide the padding for subheader on mobile only, it can be done only globally.

So, if you want to make it bigger, try to use the "%" value, not static pixels.

Of course, you can use the Custom CSS too, but as I see, there is something wrong with your code.

Probably, the !important rule has bigger order value.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

It seems to take affect on desktop but not mobile is what I a seeing and looks like the responsive css theme file is overriding it but When I try to update the reponsive file it still does not take affect.

That's what I cannot figure out. Whatever i set in the theme subheader area takes affect on desktop but not mobile ... trying to get them both the same but when you drag the window you can see it switch to the hard coded stying of the respnsive css file

See here

https://www.loom.com/share/de9d4269c9844e7db3688378977e6343

Pablo

Okay, I understand now.

Please, attach this CSS code, it will overwrite all of the CSS settings (including the responsive.css)

html body.minimalist-header-no #Subheader{
	padding:50px 0 !important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

There it is .. Thank you very much...    needed the html body  in front of it i guess

scott74

Ps... is there a global way to control the padding on containers that you set..   On desktop I can  get the spacing looking good but on mobile that same spacing between containers looks excessive so looking for a global way to reduce the padding in half maybe on mobile.

only way I could think of would be to duplicate each container and set the padding differently and set to display on mobile only for those and the desktop padding to display on desktop only but that didnt seem the most efficient way of doing so

Pablo

If you would like to change the container on the mobile only, you have to use the @media queries.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Of course, use the same code I sent above for mobile.

There is no option to duplicate the subheader, that's just not possible with the options which theme provides.

You would have to edit theme and wordpress files to achieve that.

All possible changes for mobile are in the Theme Options > Responsive

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

ok.. so maybe best options would be to give each container a class and then adjust padding for top and bottom between those containers with media quiries for mobile only ... Would that be the most efficient?

Thanks again. 

Pablo

There is no possibility to add custom class in the subheader through the theme options.

You would have to use some JS script to append the class into the subheader.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

Thanks.. was referring to all the modules on the body of the page though so that padding between all the sections was little less than on desktop..

Thanks you.

Pablo

Yes, that's possible with the Muffin Builder.

Every wrap/section/item has an option to apply the class, so you will be able to catch it with CSS code.

You'll find it on the bottom of the settings of that element.

http://prntscr.com/p2j9rb

If you have some more questions, feel free to ask.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next