I need help making the images with overlays responsive for mobile devices

[kkrishan]

Hi,

The images are the circles on website http://www.ew3tech.com#sections_2 with overlays. Or go to the website at http://www.ew3tech.com and then click on find out more to go the section containing circles.

Please check the code for the images at

http://codepen.io/ew3tech/pen/vEmozz
(The images are not showing the overlays properly in the codepen for some reason but that’s the code I have used.)

I have used too many media queries but the problem is that I have tried a lot of ways to make them always align themselves in the center of the section in all mobile device size or make them responsive in other words.

I will really appreciate if somebody can help me with the issue.

Thanks

[Paulie_D]

(The images are not showing the overlays properly in the codepen for some reason but that’s the code I have used.)

Because you have extra padding and not use the box-sizing: border-box; CSS.

http://codepen.io/Paulie-D/pen/ZYKgNL

[Paulie_D]

Center aligning and float:left really don’t go well together.

Use display:inline-block and text-align:center on the parent.

Responsive version

http://codepen.io/Paulie-D/pen/zxwgQd

[Author]

Posts