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
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.
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.