Why are images so small in the responsive view?

dgarofalo
dgarofalo used Ask the Experts™
on
I need to find out why my images are so small in the mobile view on this particular page.

https://domgarofalo.com/posc/?page_id=7137

I have an inline style in the img tag set for them with a width: 100%

Can someone tell me what I am missing?

Thank you.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Jan LouwerensSoftware Engineer
Commented:
The images are filling up all the space that they can.
The problem is most likely the containers the images are in (with "new" class). They are specified to have 10px of margin  and 20px of padding on every side.
Web Developer
Commented:
Jan is indeed correct, you need to add a media query to your CSS to remove the unwanted padding and width reduction at those mobile sizes.

Example:
@media only screen and (max-width : 414px) {
   .flex-container {
       width: 100%;
   }
   .flex-container > div {
       margin: 0px 5px;
       padding: 0px;
   }
}

Open in new window

Author

Commented:
Thank you both for the help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial