Stack images and text at certain breakpoints with CSS

Site URL: https://www.artofair.ie/an-overview-of-air-to-air-heat-pumps

Hi everyone,

I am trying to get certain elements to stack sooner than Squarespace's default setting.

For this example, the image block and text block in the screenshot don't stack until the screen gets very small in width which, in my opinion, looks very messy.

Is there any way with CSS to make them stack sooner.

Any help would be greatly appreciated.

Thank you very much in advance.

Steve

Thank you, Tuanphan! That worked a treat.

Hi, Tuan.

Is there a way to make this happen only for certain images and text blocks within a section.

For example, on https://www.artofair.ie/heat-pumps-in-ireland, in the hero section, it happens for all elements in the section, but I would like it to happen for only the opening paragraph and text.

See screenshot for reference.

Thank you very much.

On 10/7/2022 at 4:23 PM, SteveBarrett said:

Hi, Tuan.

 

Is there a way to make this happen only for certain images and text blocks within a section.

 

For example, on https://www.artofair.ie/heat-pumps-in-ireland, in the hero section, it happens for all elements in the section, but I would like it to happen for only the opening paragraph and text.

 

See screenshot for reference.

 

Thank you very much.

You can move 3 border boxes to a new section

Thanks, Tuan!