page not covering whole screen

Site URL: https://www.gripsolutions.co.nz

The website only works good for desktop view but shows only part page for mobile site. How do I go about changing it so it fits the whole page?

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
	[data-section-id="5fb0e5c29a1aef48f68c96ef"] {
.section-background-content {
    z-index: 999;
}
.section-background-content .section-background-canvas {
    visibility: hidden;
}
.section-background img {
    visibility: visible !important;
}
& {
    min-height: unset !important;
    height: 40vh !important;
}
}
}

On 2/27/2022 at 7:10 PM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
	[data-section-id="5fb0e5c29a1aef48f68c96ef"] {
.section-background-content {
    z-index: 999;
}
.section-background-content .section-background-canvas {
    visibility: hidden;
}
.section-background img {
    visibility: visible !important;
}
& {
    min-height: unset !important;
    height: 40vh !important;
}
}
}

 

Hi, thanks for that - unfortunately that doesn't fix the page being cropped on the right side, it still crops the "s" off "solutions". Not sure if I am using the correct terminology here. When I set up the website it was fine but then weeks later (after I was mucking about with it a bit) it had changed to what it is now and I have absolutely no idea why.