Layout collapses when resizing the screen

Hi I’m creating a webpage and I’m trying to make it responsive however I’m having a slight problem. I have a container which has a image and some writing inside it. On a full screen the image and writing are alongside each other. When I’m on a mobile device the writing goes below the image. My problem is as I shorten my screen before it reached the mobile screen the layout collapses and I’m not sure how to make it more responsive unless change the layout.

Below is my site and if you slowly resize the screen you will see that the layout collapses before I reach where I’ve set a mobile device

http://lctours.co.uk/my_sites.html

Any help would be much appreciated

Please help us help you by validating your HTML and CSS before posting a “problem”.
To aid that end, indent your code in a predictable manner. Commonly, that means 2-4 spaces per nest (level). You will spot most of the errors by simply looking at the code.

validators:

HTML: https://validator.w3.org/nu/

CSS: https://jigsaw.w3.org/css-validator/

What editor do you use to write your code?

In the case of the problem posted in this topic, you can start by deleting any code associated with and including {position:absolute} from all of your boxes and the horizontal margins used around the images.

Since you seem to be learning, just start with one row. If written correctly, the similar 2nd, 3rd, and 4th rows should be easy to add.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.