I am struggling with an issue on my website where the images in a section are not scaling properly in two columns. Even though I have set the margins and widths in my media query for a viewport of 640px or less, the images do not adjust in size when dragging the corner of the page. Additionally, the left images do not move with the margins. This problem occurs specifically under the section called Site Sponsors.
I have defined the image width in percentage and the margins as follows:
.b_250 img {
width: 55%;
height: auto;
}
.b_250 iframe {
width: 55%;
height: auto;
}
And also the margins:
.sponsors {
width: 100%;
margin: 0 2.5%;
}
I am looking for help in solving the issue with the images not scaling in height and width properly as well as the margins not being applied correctly.
Here is the snippet of the code that is causing the problem:
<div id="sponsor-left">
<div class="b_250">
<a href="PMC-spray-foam-equipment"><img src="images/Contractor Images/PMC spray foam equipment for sale.jpg"></a>
</div>
...
</div>
Can anyone spot the mistake I am making in my code?