When I look at the front page, on desktop preview – the first image (the one of a girl) and the text appear to look good. When I check the preview of the same page on tablet and mobile, the image of the girl and the text are not OK. What can I do? A step by step explanation would be really appreciated.
To clarify: Is your issue about the text’s typography? or the weird overlap between the image and the text?
If its the latter:
Your Grid Block’s right column container (the one beside the image) seems to have a -127px margin-left in its spacing settings. This causes issues on tablet and mobile.
If you must change the display width percentage of the columns in the grid, I suggest you adjust these grid columns by selecting them and using their Layout Setting’s Container width % for the 2 columns rather than pulling the column with negative margin.
A wise man once said:
"Have you cleared your cache?"