Advice on overlap and images

[King]

Hi,

Im just wondering if you guys can give me advice on how the image overlapping over the section is achieved on this site:

Accommodation in Pretoria | Firwood Lodge

Its near the top of the site. The company who did the site uses xtheme for all its sites, Also they have 4 images side by side further down that fill the width and respond always filling its space which i would like to do and finally…

when you scroll down to where there is a 2 column layout and an image is filling one side one of the columns, when you view on a mobile, they have set a certain height so its not a huge image on mobile.

Have you any advice how i can achieve these things? This is one of the nicest examples of a site using xtheme that i have seen.

thanks as always guys.

[friech]

Hi Chris,

Thank you for writing in, the way they achieve that overlapping image to the above section is by applying a negative margin (margin-top: -140px;) to the images. Then they hide that section on mobile utilizing the Hide During Breakpoint and create a new section that will present those images. It needs to be that way because the negative margin they applied mess up the responsive design.

Those 4 images are in a basic 1/4 columns, where the ROW’s Inner Container option is Off and the Marginless Columns option is On

Regarding those 2 columns layout with tall images, they just added the images as a background-image of there respective columns and let it respond on mobile naturally. You can utilize the Hide During Breakpoint here as well if you want to have a different layout on desktop and mobile.

Hope it helps,
Cheers!

[King]

Thanks @friech I will have a go

[friech]

You’re welcome, let us know how it goes.

Cheers!