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

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. 

Is this possible?

Thank you,
Justin

https://www.justinpape.com/

Hi. 

You can add a blank section

Add 2 Image Blocks, left - right

Then share link to that page. We can give the code to make above layout

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

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;
}
}

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

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;
}

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

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

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