Home › Forums › Support › How can I change the padding between header and content on device mode only?
- This topic has 14 replies, 3 voices, and was last updated 7 years, 3 months ago by Leo.
-
AuthorPosts
-
January 20, 2017 at 3:27 am #266120Jason
As in customize it changes it for both, but would like to only shorten the padding in device and mobile mode only, is there a way to do this in CSS please? thank you
January 20, 2017 at 7:21 am #266175LeoStaffCustomer SupportHi Jason,
Try this CSS below:
@media (max-width: 768px) { .site-header { margin-bottom: 15px; } }
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know.
January 20, 2017 at 9:55 am #266223TomLead DeveloperLead DeveloperIn the next GP Premium there’s a mobile content padding option.
If you want to adjust the content padding instead of add margin to the site header, you can do this:
@media (max-width: 768px) { .separate-containers .inside-article, .one-container .site-content { padding: 30px; } }
January 20, 2017 at 3:01 pm #266339Jasonok thank you, will try the 2nd option, thanks ๐
January 20, 2017 at 3:10 pm #266341JasonHi mate, that’s not working, I mean I want the padding between the content and the top header or nav bar to be smaller in mobile devices etc, as at the moment there is a huge gap of wasted space if you can please see my site http://salsarepublic.com.au/ on desktop there is very little space between the header, main menu bar, but in mobile devices there is too much padding.
January 20, 2017 at 3:23 pm #266345LeoStaffCustomer SupportTry this CSS:
@media (max-width: 768px) { .container, .one-container .site-content { padding-top: 0px; } }
Let us know.
January 20, 2017 at 8:25 pm #266405Jasonyeah that didn’t work either, hmmm is that meant to be for mobile and devices only?
January 20, 2017 at 8:31 pm #266407LeoStaffCustomer SupportYes the
@media
part makes it mobile only.Just checked your site again I don’t see the CSS being added?
January 20, 2017 at 10:03 pm #266419TomLead DeveloperLead DeveloperYou have an empty paragraph tag which is contributing to the space as well: https://www.screencast.com/t/EzCdTvQV
January 21, 2017 at 4:30 pm #266682JasonI just copied and pasted what you gave. Though I removed that extra paragraph and it didn’t make any difference. there is still a gap between the menu bar and the content on decives. ๐
January 21, 2017 at 4:30 pm #266683Jasonyeah I added it with Simple CSS plugin form.
January 21, 2017 at 4:38 pm #266687LeoStaffCustomer SupportI still don’t see the code being added/executed.
Have you added other codes in Simple CSS? There might a syntax error in there to stop the codes from executing.
To test, can you move the the block of code I provided above to the top of Simple CSS editor (Appearance > Simple CSS)?
January 21, 2017 at 8:24 pm #266718TomLead DeveloperLead DeveloperStill looks like the empty paragraph causing the spacing to me: https://www.screencast.com/t/fYdM9KTmVbn
January 21, 2017 at 9:25 pm #266726JasonI havent added anything in there, like I said I copied and pasted what you gave me
January 21, 2017 at 9:29 pm #266727LeoStaffCustomer SupportOk I saw the code after clearing cache. You might need to do so too.
The last bit of white space is from a paragraph like Tom mentioned.
-
AuthorPosts
- You must be logged in to reply to this topic.