Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #193963
    kkrishan
    Participant

    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

    #193964
    Paulie_D
    Moderator

    (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

    #193965
    Paulie_D
    Moderator

    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.