Title & Text layout when XL screen used

Hi All,

I have an issue with my page formatting when changing from LG to XL screen size formats:
In my page I have a section of images in rows and columns with a title and description below each one (see image below)

. This work fine for me over all screen sizes until I transition to the XL size. At this screen setting (XL) the title and associated text jump to the side of the image (which is fine as I now have more real estate)

… but, the Title appears squashed up at the side of the text. Ideally the text will alway appear under its title. Any idea on how to fix this please??

Kind regards


It is impossible to suggest a solution simply by looking at pictures. Without being able to see the HTML/CSS, one can only guess at how you created these containers and placed the elements.

It appears as though the positioning is being handled by flexbox, so I would suggest you brush up on positioning elements via flexbox

Spacing between elements can also be done easily using Bootstrap Utility classes

Posting a link to your live website will probably be necessary as well.