Split screen: desktop to mobile cover page

Hi, hoping there's a simple fix for this. Backstory: I started making a site on 7.0 but realised 7.1 had a bit more functionality that made it a better long term choice (I think!?!😬), on the 7.0 I made a nice cover page using the "spotlight" cover page style - has a split screen and you can add images one side and a logo, some text and buttons/links etc. A nice landing page.

My attempts to emulate a similar one in 7.1 have led me to a few posts here with some code to provide a work-around that I've edited slightly and added to the page (page settings>advanced>page header code injection box) to achieve a "similar" result (why tf they dont have cover pages in 7.1?! I see it's so often requested by users!), Here's what I added (the h1 is just to style some of the text since I can't seem to logically add a picture - logo - to the section as well as the text🙄🤦‍♂️ - unless theres a way?)

<style>
#page .page-section{height:100vh!important;width:50%!important;float: left;}
#page .page-section:nth-child(2) {width:50%!important;float: right;}
header,#footer-sections {display:none!important}
h1 {font-family:Oswald;font-weight:700;}
</style>

Process I followed: make 2 sections, one a full-bleed slideshow and another with the text I want. The result looks fine on desktop but checking mobile and its horrendous, just two thin columns and squashed text. I'm assuming I can add some code to the above that instructs it to make the slideshow/images move to the top (say 50% of the screen) with the text below? (be nice to get some text/logo overlay). I have an inkling of an idea it's to do with screen sizes and you add something to that effect but my coding knowledge is rudimentary at best, I can edit styles after much googling/copy-pasting but I'm no coder. I tried something I found but clearly it wasnt right cause it had no effect, or I added it wrong in the box. So, help gratefully received thanks!

Can you share your website URL and this page?

Have you seen this tutorial?

Hi, Thanks for the quick response!

Yes I believe I followed that one to attempt a fix however in doing so I suddenly have a header and footer back (the code to hide it seems to be getting ignored) and it still looks squashed on mobile.

site is still being pieced together but it's https://wolverine-bamboo-5yw8.squarespace.com/

Can you add a site wide password?

https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website

assuming i've done it correctly: everythingisawesome

Also her video deals with a static background image, I've gone with a slideshow - a step too far? 🤷‍♂️

Thanks for that, yes, I can see it's not quite working right.

It looks like you have some errors in the code you've used, can you share it all here?

Hi, yes had a look and compared what was mentioned in the video and what I have already added and applied a mix of the two that does it correctly most of the way now:

<style>
.header, #footer-sections {display:none!important}
@media only screen and (min-width:450px)
{
#page .page-section {height:100vh!important;width:50%!important;float: left;}
#page .page-section:nth-child(2) {width:50%!important;float: right;}
  }
</style>

Looks ok in vertical mode (horizontal still seems to throw things around a bit which I can't work out).

would be great to shrink the image heights by say 50% on mobile screens as they take up the entire height still...

I would change this value to around 750px:
(min-width:450px)

I haven't tried this, so it may not work, but I've added an additional piece of code to work just on smaller screens and stack the contents, let me know how and if it works:

<style>
.header, #footer-sections {display:none!important}
@media only screen and (min-width:750px) {
#page .page-section {height:100vh!important;width:50%!important;float: left;}
#page .page-section:nth-child(2) {width:50%!important;float: right;}
  }
@media only screen and (max-width:749px) {
#page .page-section:nth-child(1) {height:50vh!important;width:100%!important;}
#page .page-section:nth-child(2) {height:50vh!important;width:100%!important;}
  }
</style>

Thanks, yes this is getting there, definitely! Still getting a bit of text overlapping when viewed on a mobile (both horizontal and vertical).

And I notice in the 7.0 one I'm trying to copy it scales the images better - not cropping.  Is that a css thing I can tweek too?

Well, I've been playing around with it and on my mobile it still looks terrible - the in-built browser viewer is very misleading - text is always overlaying the image whatever I try (with my limited knowledge)...

It seems such a simple thing yet can't get it working quite right. Is it always like this in 7.1?