Empty box appearing on mobile version of homepage

Hi, I have an empty box appearing at the top of my homepage, only on the mobile version. I'm on 7.0. and the box wasn't there when I first published the site. Any help with removing it would be much appreciated! 

It shows fine to me now. You try checking it again

Hi, thanks so much for your reply. I’ve checked on some other people’s mobiles over the weekend and it seems to only be appearing on iPhones. Do you happen to know how I can resolve this issue? 

14 minutes ago, Greevsie007 said:

Hi, thanks so much for your reply. I’ve checked on some other people’s mobiles over the weekend and it seems to only be appearing on iPhones. Do you happen to know how I can resolve this issue? 

You can share link to this page, I will try checking on iPhone

Thanks, here’s the link:

https://alisonwrites.co.uk

On 4/2/2024 at 5:05 PM, Greevsie007 said:

Thanks, here’s the link:

https://alisonwrites.co.uk

I think we can remove that black box, but will need to move text up, maybe center in screen

What do you think?

Yes, that sounds perfect to me. That's how I'd like it to appear, so it matches the desktop version. Thanks!

Try this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
.wrapper {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%,-50%) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.wrapper>* {
    margin-bottom: 50px;
    margin-top: 50px;
}
}

Thanks so much for sending that.

This is the CSS currently in place for that page. Just wondered where I should replace/insert the new CSS? I have tried it in a couple of places but it didn't change anything. Sometimes it also says the opening { is missing so won't save. Any advice would be much appreciated!

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 4.5s steps(40,end)
}

@keyframes typing {
  from {width: 0}
  to {width: 100}
}

//** Nav strikethrough **//
@media screen and (min-width: 800px) { 
  nav {
    ul {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

li {
  display: inline-block;
  padding-left: 2px;
  padding-right: 4px;
  position: relative;
  display: block;
  cursor: pointer;
}

span {
  position: relative;
  display: block;
  cursor: pointer;
}

li:before, span:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 1px;
  top: 50%;
  margin-top: -0.5px;
  background: #fff;
}

li:before {
  left: -2.5px;
}
li:after {
  right: 2.5px;
  background: #000;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

li:hover:before {
  background: #000;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

li:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;
}
}
}

  
//** End Nav strikethrough **//

19 hours ago, Greevsie007 said:

Thanks so much for sending that.

This is the CSS currently in place for that page. Just wondered where I should replace/insert the new CSS? I have tried it in a couple of places but it didn't change anything. Sometimes it also says the opening { is missing so won't save. Any advice would be much appreciated!

 

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  animation: typing 4.5s steps(40,end)
}

@keyframes typing {
  from {width: 0}
  to {width: 100}
}

//** Nav strikethrough **//
@media screen and (min-width: 800px) { 
  nav {
    ul {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
}

li {
  display: inline-block;
  padding-left: 2px;
  padding-right: 4px;
  position: relative;
  display: block;
  cursor: pointer;
}

span {
  position: relative;
  display: block;
  cursor: pointer;
}

li:before, span:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 1px;
  top: 50%;
  margin-top: -0.5px;
  background: #fff;
}

li:before {
  left: -2.5px;
}
li:after {
  right: 2.5px;
  background: #000;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

li:hover:before {
  background: #000;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

li:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;
}
}
}

  
//** End Nav strikethrough **//

 

Add code to top of Custom CSS box.

Hi, I tried this but the empty box is still there unfortunately. Adding the code seemed to also mess up the layout of one of the other pages on the mobile version (see below) so I have changed it back for now. Any other ideas of how I can resolve the issue?