Skip to main content
LIZZIE
LIZZIE
Inspiring
April 25, 2019
Answered

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

  • April 25, 2019
  • 1 reply
  • 1782 views

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.

This topic has been closed for replies.
Correct answer B i r n o u

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.


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

1 reply

J
jodmcc49
Inspiring
April 25, 2019

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

LIZZIE
LIZZIEAuthor
Inspiring
April 25, 2019

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices