Copy link to clipboard
Copied
I'm not sure which of the pages in displaying the correct format between the following two.
or
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.
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
Copy link to clipboard
Copied
Your Pokémon page shows 4 icons across, but your Home page drops one below. This is viewed on iPhone 6.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
you have to reset the margin of your BODY tag
add margin:0 to the body rule
Copy link to clipboard
Copied
It is completely my fault right now. I'm having a block. Where's the body tag in there?
Copy link to clipboard
Copied
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).
Copy link to clipboard
Copied
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;}
Copy link to clipboard
Copied
Alright, this finally completed it. thank you for all of your help. I really appreciate your patience with this.
Thank you! 🙂
Copy link to clipboard
Copied
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.