Join us in creating better online experiences.

Join us in creating better online experiences with this wireframe UI kit, designed to help you take your designs to the next level.

Add to collection

Overview

This section is designed to incorporate an image that spans 50% of the screen's width, extending beyond the container's boundaries. This effect is achieved through the application of custom CSS, utilizing a grid layout.

Instructions:

Encapsulate all content within a DIV element.
Insert an Image element.
To establish a gap between the content and the image element within the main section, navigate to: Section -> Advanced -> Custom CSS. It is advisable to utilize the clamp unit for spacing. This approach eliminates the need to define different spacing values for smaller screens.

Tips:

To alter the positioning of the content relative to the image, simply interchange their placements. This modification will be automatically accommodated.