Hero Image & Text Panel
The panel has a vertically centered heading, text and CTA link which covers 50% of the area when viewed on computers.
On tablet devices, the text slides over the image with a transparent background.
Hero Image & Text Panel
The image is switched to the left
The heading & text are centered
The vertical spacing is increased
Hero Image & Text Panel
The banner uses the CSS "object-fit" selector to allow the image to cover only 50% of the area when viewed on a computer. When the page is viewed on a tablet device, the image takes up the full width of the container and the text panel becomes transparent and overlays it.
If viewing this page on a computer, reduce the browser width to see the layout change. Use the browser's responsive mode to see how it looks on the various types of tablets.
Panel
The panel has an h1 heading, text block and an optional CTA style link which is configured to open internal pages. These are vertically centered using CSS transform.
There are controls for adjusting the text inset from the panel's edge and the vertical spacing of the items.
Layout Change
Layout changes are implemented using CSS Media Queries. This happens at a preset browser or device width. The point at which this change takes place is the Break Point.
Setting the break point to 1059px will cause the layout to change when the page is viewed on an iPad in landscape mode. Use 799px to make the change happen when the tablet is in portrait mode.
Percentage Width
The item is not intended for occupying the full width when the browser is set wide on large screens and the maximum width setting is used to control this. When a box shadow is added, the percentage width of the widget can be reduced to 98 or less to allow the shadow to show at the left and right at all browser and device widths.