Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


jpjustinpape

Question

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 post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Dont remove above code. Add this code /* test page transparent header */ body#collection-603d75fa39bbda52d7113f88 header#header { background: transparent !important; } body#collection-603d75fa

Posted Images

7 answers to this question

Recommended Posts

  • 0

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

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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 post
  • 0
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;
}

 

Link to post
  • 0
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 post
  • 0
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?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...