Sorry for taking so long to respond.
So after I re-adjusted the size of the brand images in 320px, and as you can see with the other picture (1070px) the brand images are the same size as the ones in 320px. Maybe I’m resizing the images in a wrong way. When I set the sizes for those brand images I was resizing them by just dragging and readjusting the images using that small box at the corner of the image and I was not really setting the width with a class, so maybe that might be the issue here.
With other image (hero-image, the lady) I think I figured out what I have been doing wrong. What’s actually been happening is that the hero-section height that I set on the 428px size affected everything downwards (which was is suppose to happen like you guys have been saying, and what made it seem like this was not happening is because of the height I set for hero-section’s child container, and the child columns. I forgot to change those ones, so now I just set heights for the child elements of the hero-section to auto).
So now what I’m trying to do is to readjust the height of hero-section from 428px downwards for every device up until 320px. But what seems to be happening is that after I have set the height for the hero-section for 428px, when I set the hero-section’s height for 414px and for the other screen sizes going down, they get override by the height I set in 428px. I’m doing this so that the hero image sits right at the end of the hero-section. Any pointers on what I could be doing wrong here.
Thanks again for actually trying to break down the issue and help me out.