Jump to content

Landing / Cover / Splash Page split in 2 full bleed image links

Recommended Posts

Site URL: https://www.justinpape.com/

Hi!
I am looking to create a landing page for my site that has a split screen of 2 full bleed images that link to 2 separate Portfolio sections, but still retain my header. I also need it to be flexible for desktop/mobile/tablet to always retain a full bleed split screen


The image below is the desired outcome, but with placeholder images. 
859571776_ScreenShot2021-02-23at12_01_50PM.thumb.png.37e6cdf11e1cf9e84a2619da16f0eb9c.png

 

Is this possible?

Thank you,
Justin

https://www.justinpape.com/

Link to comment
  • Replies 7
  • Views 1.4k
  • Created
  • Last Reply
On 3/2/2021 at 6:27 AM, jpjustinpape said:

Ok, I put up 2 images how i believe you mean.

Is it possible to also have the split screen on mobile rather than stacked?

https://www.justinpape.com/test
Pass: test

Add to Design > Custom CSS

/* New Split Section */
[data-section-id="603d769f00953f00f437f505"] .content-wrapper {
    padding: 0 !important;
}
html, body {
    overflow-x: hidden;
}
[data-section-id="603d769f00953f00f437f505"] .image-block {
    padding: 0;
}
/* Split on mobile */
@media screen and (max-width:767px) {
div#page-section-603d769f00953f00f437f505 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
11 hours ago, tuanphan said:

Add to Design > Custom CSS


/* New Split Section */
[data-section-id="603d769f00953f00f437f505"] .content-wrapper {
    padding: 0 !important;
}
html, body {
    overflow-x: hidden;
}
[data-section-id="603d769f00953f00f437f505"] .image-block {
    padding: 0;
}
/* Split on mobile */
@media screen and (max-width:767px) {
div#page-section-603d769f00953f00f437f505 .span-6 {
    width: 50% !important;
    float: left !important;
}
}

 

It just seems to be sticking 2 images sided by side and not flooding the entire screen and behind the header

Link to comment
7 hours ago, jpjustinpape said:

It just seems to be sticking 2 images sided by side and not flooding the entire screen and behind the header

Dont remove above code. Add this code

/* test page transparent header */
body#collection-603d75fa39bbda52d7113f88 header#header {
    background: transparent !important;
}
body#collection-603d75fa39bbda52d7113f88 article section:first-child {
    padding-top: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/7/2021 at 2:39 AM, tuanphan said:

Dont remove above code. Add this code


/* test page transparent header */
body#collection-603d75fa39bbda52d7113f88 header#header {
    background: transparent !important;
}
body#collection-603d75fa39bbda52d7113f88 article section:first-child {
    padding-top: 0 !important;
}

 

Great! this seemed to have worked , but now there are a couple issues.
- On mobile the images have a small space above the images.
- Images on both mobile and desktop seem to have a fixed width and hight that it will not allw the image to bleed the full width of the page or the full height

Basically my goal is to have the same effect as a full-bleed background image, but, 2 of them sided by side that can be used as links to 2 separate sections of my site

Screen Shot 2021-03-12 at 3.33.11 PM.png

Screen Shot 2021-03-12 at 4.09.22 PM.png

Link to comment
  • 2 weeks later...
On 3/13/2021 at 4:11 AM, jpjustinpape said:

Great! this seemed to have worked , but now there are a couple issues.
- On mobile the images have a small space above the images.
- Images on both mobile and desktop seem to have a fixed width and hight that it will not allw the image to bleed the full width of the page or the full height

Basically my goal is to have the same effect as a full-bleed background image, but, 2 of them sided by side that can be used as links to 2 separate sections of my site

Screen Shot 2021-03-12 at 3.33.11 PM.png

Screen Shot 2021-03-12 at 4.09.22 PM.png

Hi. Sorry for the delay. Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

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