Jump to content

Split screen: desktop to mobile cover page

Recommended Posts

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!

Link to comment

Can you share your website URL and this page?

Have you seen this tutorial?

 

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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...

 

Edited by CaptainBarnacles
Link to comment

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>

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.