Skip to main content
LIZZIE
LIZZIE
Inspiring
April 25, 2019
解決済み

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

  • April 25, 2019
  • 返信数 1.
  • 1797 ビュー

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.

このトピックへの返信は締め切られました。
解決に役立った回答 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

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
LIZZIE作成者
Inspiring
April 26, 2019

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?

B i r n o u
B i r n o u解決！
Legend
April 26, 2019

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

契約条件Accessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices