My website features a list of images with corresponding paragraphs of text displayed to the right of each image. I am trying to adjust the layout so that when the screen size is 736 px or less, the text is shown below the image and the image is centered. This change is necessary to ensure compatibility with tablets and phones.
To achieve this layout shift, I have been experimenting with div tags and the @media query in CSS. Currently, on desktop screens, the image occupies 20% of the width and the text takes up 80%, sitting next to each other. When the screen size decreases to 736px, I want the image width to increase to 50% while the text expands to 100%, moving below the image.
However, despite my efforts with @media queries, I have encountered an issue and I am unable to identify the problem. Can anyone provide guidance on how to address this?
Furthermore, what additional steps do I need to take to easily duplicate this design for multiple images and texts? Shouldn't the layout automatically arrange new content below existing ones once copied and pasted?
CSS:
div.sidebyside{
@media only screen and (max-width : 736px){
border: 5px solid #000000;
}
@media only screen and (min-width : 737px){
float:left;
border: 5px solid #000000;
}
}
div#image{
@media only screen and (max-width : 736px){
width : 50%;
align-items: center;
}
@media only screen and (min-width : 737px){
width : 20%;
}
}
div#info{
@media only screen and (max-width : 736px){
width : 100%;
}
@media only screen and (min-width : 737px){
width : 70%;
padding-left: 5%;
}
}
HTML:
<div id="image" class="sidebyside"><img src="url" alt="" /></div>
<div id="info" class="sidebyside>
<p style="text-align: justify;">Insert your paragraph text here.</p>
</div>