Support/Ultra Theme/Padding for mobile and space under header/at bottom

[Resolved] Padding for mobile and space under header/at bottom

  • Author
    Posts
  • May 10, 2019 at 1:18 pm #12660

    funkytwig
    Participant

    Hi, just looked at the site on mobile, nice work. love styling of the hamburger menu.

    Anyway, would like to reduce padding on the left/right to about 1/3 (mobile/tablet).

    Also would like to reduce the space between to header and main content and bottom of the content and footer a bit. This is on mobile and desktop (and tablet). Basically, want it the same as left/right padding.

    Also is there a way of increasing my payment/donating. You deserve it;).

    May 10, 2019 at 1:36 pm #12661

    Andrew Misplon
    Keymaster

    Hi 🙂

    You’ll need to experiment a bit. Let me know how it goes and what you need a hand with.

    For mobile container left and right spacing, try:

    @media (max-width: 1024px) {

	.container {
		padding: 0 10px;
	}

}

    That says, until 1024px resolution, do this rule and that rule is to make the container left right padding, 10px, the default is 25px.

    For the second request, add:

    .single .entry-header, .page .site-content > .entry-header, .blog .page-header, .archive .page-header, .search-results .page-header, .search-no-results .page-header, .error404 .page-header {
	margin-bottom: 20px;
}

.site-content {
	padding: 25px 0;
}

    The first rule with multiple selectors is for below the page title.

    The second rule is site content top and bottom.

    All of this can be adjusted.

    If you see two values instead of four, they’ve repeated. So usually it goes top, right, bottom left. Say 10px 0 10px 0, that means 10 top, zero right, 10 bottom, 0 left. If we just say 10px 0, it’s the same, 10 is for top and bottom and 0 is for left and right. Bit of a rushed explanation, hope it helps.

    Thanks for your kind offer, please find a form here: https://purothemes.com/donate/.

    May 10, 2019 at 2:12 pm #12662

    funkytwig
    Participant

    Thanks, almost there. Works everywhere except the front page, where I don’t display the page title.

    https://funkytwig.com/bristol-offline-video-picture-editor/ works great.

    https://funkytwig.com/ still has a big gap at the top. Looks OK on desktop but due to reduced padding not ideal on mobile.

    Just sent you a small donation.

    May 10, 2019 at 6:09 pm #12665

    Andrew Misplon
    Keymaster

    Super, glad to hear you’re making progress.

    For the home page, please, try:

    .no-page-title:not(.page-layout-no-header-margin) .site-content {
	padding-top: 50px;
}

    Adjust as required.

    Thanks for the donation, it’s most appreciated.

    Hopefully, I didn’t miss anything, please let me know if I did. Thanks.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Scroll to top