Need Help Decreasing Padding Mobile

I need help reducing the padding on mobile view. Looks solid on desktop but the gaps between text box (above) and slide shows (below) are to big. Would like the the text to be just above the slide shows. Any help is appreciated.

https://www.framed-view-designs.com/living-room

Still need help with this one, thanks

@FramedView looks like there is a min-height and an excessive amount of padding built into the template here:

.page-section.section-height--medium:not(.content-collection):not(.gallery-section):not(.user-items-list-section) {
    min-height: 66vh;
}
.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium>.content-wrapper {
	padding-top: 6.6vmax;
    padding-bottom: 6.6vmax;
}

So you need to override that for mobile, something like this:

@media (max-width:799px) {
	.page-section.section-height--medium:not(.content-collection):not(.gallery-section):not(.user-items-list-section) {
		min-height: 0;
	}
	.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium>.content-wrapper {
		padding-top: 25px;
		padding-bottom: 25px;
	}
}

You may want to browse around your site to ensure this override doesn't inadvertently affect other areas, as the targeting is very wide, just FYI. If it does and you don't want it to, you may need to get more specific with your selectors or add IDs to the divs you specifically want to target.

Hope this helps!

2 hours ago, SaranyaDesigns said:

@FramedView looks like there is a min-height and an excessive amount of padding built into the template here:

.page-section.section-height--medium:not(.content-collection):not(.gallery-section):not(.user-items-list-section) {
    min-height: 66vh;
}
.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium>.content-wrapper {
	padding-top: 6.6vmax;
    padding-bottom: 6.6vmax;
}

So you need to override that for mobile, something like this:

@media (max-width:799px) {
	.page-section.section-height--medium:not(.content-collection):not(.gallery-section):not(.user-items-list-section) {
		min-height: 0;
	}
	.page-section.vertical-alignment--middle:not(.content-collection):not(.gallery-section):not(.user-items-list-section):not(.editmode-changing-rowcount).section-height--medium>.content-wrapper {
		padding-top: 25px;
		padding-bottom: 25px;
	}
}

You may want to browse around your site to ensure this override doesn't inadvertently affect other areas, as the targeting is very wide, just FYI. If it does and you don't want it to, you may need to get more specific with your selectors or add IDs to the divs you specifically want to target.

Hope this helps!

 

This helps a ton, thank you so much!