Log in SwiftGrid →
Resolved

Padding for mobile and space under header/at bottom

Ultra Theme started by funkytwig May 10, 2019 3 replies
funkytwig May 10, 2019 · 1:18 pm #12660

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;).

Andrew Misplon Puro May 10, 2019 · 1:36 pm #12661

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/.

Andrew Misplon Puro May 10, 2019 · 6:09 pm #12665

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.

4 posts