Question 207244 in Html Question posted in
Some basic documentation can be found here.

Html – image and padding responsive

can someone help to fix when i do responsive page the padding on image change from this
before

to this
responsive

.service-item img {
    max-width: 100%;
    margin-bottom: 20px;
    border-radius: 10px;
    border-bottom-left-radius: 0%;
    border-bottom-right-radius: 0%;
  }

how to fix that so there is no padding between those images in card

Tags:

2

Answers


  1. 0

    From the images you’ve shown, either the container of the image and text has padding else the image has a border. Try to look at your developer tools.

    Login or Signup to reply.
  2. 0

    It sounds like this:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>

<body>
  <div class="service-item">
    <img src="92tkr.png" />
  </div>
  <style>
    .service-item {
      background-color: cornflowerblue;
      padding: 20px 0; /* set padding top buttom */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .service-item img {
      border-radius: 10px;
      display: block;
      width: 70%; /* set image width */
    }
  </style>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search