CODEWITHSUNDEEP
htmlcss
SkywalkerA
SkywalkerA

Reputation: 85

HTML / CSS Icon sizes

In the screenshot below we can see 3 icons - 2 of them of the same size, and one(left one) appears bigger/uneven to the 2 others. enter image description here

This is my HTML code part for this bit: 

  <article class="number">
                          <div class="number__illu" style="margin-top: -33px">
                             <picture class="picture picture--no-background" style="padding-bottom: 146.875%"><img src="assets/images/svg/location-pointer.svg"></picture>
                          </div>
                          <h4>Header</h4>
                          <p>Part 1</p>
                       </article>

                       <article class="number">
                          <div class="number__illu" style="margin-bottom: -10px">
                             <picture class="picture picture--no-background" style="padding-bottom: 125.35%"><img src="assets/images/svg/world.svg"></picture>
                          </div>
                          <h4>Header</h4>
                          <p>Part 2</p>
                       </article>

                       <article class="number">
                          <div class="number__illu" style="margin-top: 14px">
                             <picture class="picture picture--no-background"><img src="assets/images/svg/users.svg"></picture>
                          </div>
                          <h4>Header</h4>
                          <p>Part 3</p>
                       </article>

And this is the CSS part that goes along with it:

.about__section__numbers .number {
margin: 30px auto;
text-align: center
}

.about__section__numbers .number__illu {
max-width: 100px;
margin: 0 auto 10px
}

I don't see why the icon on the left appears bigger than the 2 others.

Upvotes: 0

Views: 1273

Answers (2)

Nathan Heffley
Nathan Heffley

Reputation: 610

It's because the images have different widths compared to their heights. You should set the height to a specific pixel height to make them look the same size.

Or you could artificially add white space to the sides of the larger icon so that it has the same native width as the other two icons.

Upvotes: 0

Darren
Darren

Reputation: 46

you have different padding and margins hard-written onto each of your elements. removing that will likely help you troubleshoot better.

try a debug style like *{ outline: 1px solid red; } to help you see if the boxes are sized properly.

alternately you can also try picture,image {display:inline-block}

Upvotes: 2

Related Questions