jpjustinpape Posted February 23, 2021 Share Posted February 23, 2021 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/ Link to comment
tuanphan Posted February 28, 2021 Share Posted February 28, 2021 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
jpjustinpape Posted March 1, 2021 Author Share Posted March 1, 2021 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 Link to comment
tuanphan Posted March 6, 2021 Share Posted March 6, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
jpjustinpape Posted March 7, 2021 Author Share Posted March 7, 2021 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
tuanphan Posted March 7, 2021 Share Posted March 7, 2021 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; } jpjustinpape 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
jpjustinpape Posted March 12, 2021 Author Share Posted March 12, 2021 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 Link to comment
tuanphan Posted March 23, 2021 Share Posted March 23, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment