Full Width Images without Index Page?

Site URL: https://www.drivenfilms.tv/about

Hi, how can I make an image go the full width of the page (full bleed) without using it on an index page? for example, the photo in block #block-yui_3_17_2_1_1609092098275_26968 on this page: https://www.drivenfilms.tv/about

Thank you!

On 10/27/2021 at 1:55 AM, DrivenFilms said:

Site URL: https://www.drivenfilms.tv/about

Hi, how can I make an image go the full width of the page (full bleed) without using it on an index page? for example, the photo in block #block-yui_3_17_2_1_1609092098275_26968 on this page: https://www.drivenfilms.tv/about

Thank you!

Hi,

Index page is fastest way.

With the index page, the image will be in its own section and you only need CSS to remove the left/right padding, the image will be fullbleed.
but with current page you will need to adjust the padding of all current elements on the web, it will take a lot of code, moreover when you add/remove a certain block on the page, the code will need to be updated again.

Hello @tuanphan, 

I am trying to make this on the footer of my home page: 


(this is a montage I made on canva)

But for now it looks like this:




Do you think it is possible to make ? 


I wish you a beautiful day 🙂 

brondyhumphrey.com
password: soleil

On 11/29/2021 at 4:25 AM, iJizzy1 said:

Hello @tuanphan, 

I am trying to make this on the footer of my home page: 


(this is a montage I made on canva)

But for now it looks like this:




Do you think it is possible to make ? 


I wish you a beautiful day 🙂 

brondyhumphrey.com
password: soleil

 

2 options to do this

O1. Use Split Layout plugin

Add 2 sections with Image section on top, text in bottom, then add plugin code to first section. Done.

O2. Add this code to Design > Custom CSS

/* Footer split layout */
@media screen and (min-width:768px) {
[data-section-id="6139da96d203ef247abc5142"] .section-background {
    width: 50%;
    margin-right: 50%;
}
[data-section-id="6139da96d203ef247abc5142"] {
    background-color: white;
}
}