Title & Text layout when XL screen used

Webdesign Help
1

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)

good
good985×563 159 KB
. 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)

Bad
Bad1189×575 198 KB

… 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

Michael

2

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.