Reduce empty space on mobile only

Site URL: https://www.eshertennis.co.uk/homenew

PW: james

Hi all - I have a really annoying problem that I hope someone can solve for me.

I have my homepage looking exactly how I want it to look on desktop. But on mobile I have a really large space that I can't figure out how to close (please see attached image).

I don't want to remove the space entirely but just have a lot less of it (like there is on desktop).

Eternally grateful to anyone who can help because this problem is really bugging me!

2 hours ago, jbassett said:

Site URL: https://www.eshertennis.co.uk/homenew

PW: james

Hi all - I have a really annoying problem that I hope someone can solve for me.

I have my homepage looking exactly how I want it to look on desktop. But on mobile I have a really large space that I can't figure out how to close (please see attached image).

I don't want to remove the space entirely but just have a lot less of it (like there is on desktop).

Eternally grateful to anyone who can help because this problem is really bugging me!

Add to Home > Design > Custom Css

@media only screen and (max-width: 768px) {
	section[data-section-id="61582a9abb4c3727b9230618"] {
      display:none;
    }
}

You've solved it, bangank36. Thank you so much!

Sorry I might have spoken too soon! The mobile and desktop are now working great but tablets aren't quite right. I now don't have any space between the floating white box at the top and the content below.

Is there a way to have a little padding between the two for tablet sized screens?

1 hour ago, jbassett said:

Sorry I might have spoken too soon! The mobile and desktop are now working great but tablets aren't quite right. I now don't have any space between the floating white box at the top and the content below.

Is there a way to have a little padding between the two for tablet sized screens?

 

Add some media query in Custome Css

@media only screen and (min-width: 768px) {
  section[data-section-id="614e554c84ed4320845ba5ab"] {
    padding-top: 0 !important;
    min-height: 92vh !important;
  }
}

@media only screen and (min-width: 1024px) {
  section[data-section-id="61582a9abb4c3727b9230618"] {
    padding-top: 0 !important;
    min-height: 20vh !important;
  }
}

@media only screen and (min-width: 1200px) {
  section[data-section-id="61582a9abb4c3727b9230618"] {
    padding-top: 0 !important;
    min-height: 30vh !important;
  }
}

Thanks Bangan, this didn't seem to work for me but the screen is now looking okay anyway because I've changed the size of the floating box. Your code will definitely come in handy on other pages when I have tablet layout issues so thank you again.