A problem has now shown up with the display of social media icons on select pages

[LIZZIE]

I'm not sure which of the pages in displaying the correct format between the following two.

Home Page

or

Pokémon 0025 - Pikachu

on a smaller screen, there are social media "share buttons" that are placed at the top for testing purposes. On the first page they are notably bigger than the second page.

The entire style for these buttons are being called through an ssi and there is no difference between the code on any of these pages. I've looked for <div> errors, but I couldn't find anything out of place or different between the two pages.

The style is set to 4em, but again, I do not know which one is displaying the buttons correctly.

Basically, I just want the buttons to look the same on all of my pages, naturally. I just need helping figuring out the problem.

This one is confusing one, because both pages are calling the same exact code through server side includes.

Thank you for any help.

[jodmcc49]

Your Pokémon page shows 4 icons across, but your Home page drops one below. This is viewed on iPhone 6.

[LIZZIE]

Yes. The overall size of those buttons, I'm controlling with the 4em code. The problem is that they're different sizes to begin with. They shouldn't be. They're both calling the same code. I'm calling the icons through an ssi that is placed at the same spot on both pages. Somehow they're different, though.

[LIZZIE]

Alright, I tested some more webpages and the only pages that are ever affected with the smaller share buttons are one that have an audio player on them.

The Pokémon page is definitely the one that is messed up between the two, and the reason has something to do with the audio media player button, but I can't figure out what the problem is?

[BenPleysier]

Without wading through the code, which to me looks like ..., never mind, care should be taken when using 'em'. Unlike 'px', 'em' is a relative unit, relative to the previous 'em'. Another, safer method, is to use 'rem' which is relative to the root 'em'.

For more info, see Confused About REM and EM? | Jeremy Church

[LIZZIE]

It's not the prettiest code, but I've seen worse myself on million dollar websites. I'm sure you have, too.

updated - Actually, I shouldn't even be defending it, someone else gave me that code, lol.

I don't think that's the answer, though.  The problem only occurs on pages with the media player button. Unless you think that would somehow affect it. In any case, the code is the same exact code on every page, because it's being called through ssi.

[B i r n o u · Accepted solution]

try adding a box-sizing: border-box; declaration to your .share-btn rule

as

.share-btn {

    display: inline-block;

    color: #ffffff;

    border: none;

    padding: 0.2em;

    width: 4em;

    opacity: 0.9;

    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);

    outline: none;

    text-align: center;

    box-sizing: border-box;

}

also add a margin-left: -4px;

if you want to get rid of the white space in between each button (or at least precisly control them (you use a display:inline-block for position them

[LIZZIE]

I think this is working, or at least starting to. I'm getting them to come in at the same size now. Does anyone know of a way to get the four boxes to stretch to fill all available space on the line, or Is that to difficult. I don't mean each of them on top of each other stretching to fill all available space, but the four of them together in one row stretching to fill the available space?

[B i r n o u]

LIZZIE  a écrit

I don't mean each of them on top of each other stretching to fill all available space, but the four of them together in one row stretching to fill the available space?

add a declaration of width:100% to the .sharebuttons rule as

and modify the width:25% of the .share-btn rule

[LIZZIE]

almost. Now I'm just getting some padding on the side of the facebook buton for some reason. the email one hits the very edge of the screen, but the facebook button has white space before it.

[B i r n o u]

you have to reset the margin of your BODY tag

add margin:0 to the body rule

[LIZZIE]

It is completely my fault right now. I'm having a block. Where's the body tag in there?

[LIZZIE]

alright, found it now. Now that I have done it, it seems to be inverted. The padding is on the right side now. (it was on the left before, next to the facebook icon).

[B i r n o u]

ok, well, the display:inlineblock, create a space in between elements... so you have to remove this space

you can get more infos there Fighting the Space Between Inline Block Elements | CSS-Tricks

so in our exemple as we add a negative margin left of 4px, that means that all the items move 4 pixel to the left... so you will have to move the main container (.sharebuttons) to the same amount on the right using margin-left: 4px

I suspect that some margin still flies around... so you could add a universal selection, resetting this.

for that add as a first style line

* { margin:0;}

[LIZZIE]

Alright, this finally completed it. thank you for all of your help. I really appreciate your patience with this.

Thank you! 🙂

[B i r n o u]

I try to understand why... this happen...

but I must admit that the code is really upside down... one find HEADER tags in BODY tag... stuff mixed ... html entities not closed (in the BUTTON tag for example...

perhaps the very frist step will be to clean up some of the code lying around there.