Upfront: Images and text full width

Hello!
I'm looking accomplish something similar to what this website (https://www.realthread.com) has done but I'm not sure how to build it using Upfront. I attached a image of the area of the page I'm interested in. I like how the image expands based on the size of the page and the text is on the side.

Any ideas on the best way to accomplish?
Thanks!

    Predrag Dubajic

    Hey Sean,

    Hope you're doing well today

    Upfront themes have content width fixed to 1080 pixels and there's actually no option to put elements outside that borders so to have something like above it would actually require small CSS "hack" sort to say.

    I will provide you with steps required but note that this is not something Upfront was designed to do so it might need additional CSS adjustments to work as desired on all screens.

    What you would need to do is create new region first, let's say you name it customregion, and for that region add background image.
    It would be best using image that's 1920 pixels in width but your actual image should be shorter and rest should be white space.

    After that add text element to that region, add some content and resize it to one side where your background image white part is.

    Once that's done go to Global CSS and add CSS like this:

    #upfront-region-container-SECTIONID .upfront-grid-layout {
        width: 100%;
    }

    In above code SECTIONID should be replaced with name of your region, in this example it will be customregion.

    Save the changes and that should be it.

    Note that this will not be visible in UF editor but you should be able to see the change on front end now and based on that you can resize text region to adjust it to your liking.

    Hope this helps

    Best regards,
    Predrag