Highlighted

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

Explorer ,
Apr 25, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by B i r n o u | Adobe Community Professional

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

TOPICS
Learn Dreamweaver

Views

485

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Apr 25, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by B i r n o u | Adobe Community Professional

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

TOPICS
Learn Dreamweaver

Views

486

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 25, 2019 0
Community Beginner ,
Apr 25, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2019 0
Explorer ,
Apr 25, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2019 0
Explorer ,
Apr 25, 2019

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2019 0
Adobe Community Professional ,
Apr 25, 2019

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 25, 2019 1
Explorer ,
Apr 26, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2019 0
Adobe Community Professional ,
Apr 26, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2019 0
Explorer ,
Apr 26, 2019

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2019 0
Adobe Community Professional ,
Apr 26, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2019 2
Adobe Community Professional ,
Apr 26, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2019 1
Explorer ,
Apr 26, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2019 0
Adobe Community Professional ,
Apr 26, 2019

Copy link to clipboard

Copied

you have to reset the margin of your BODY tag

add margin:0 to the body rule

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2019 1
Explorer ,
Apr 26, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2019 0
Explorer ,
Apr 26, 2019

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).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2019 0
Adobe Community Professional ,
Apr 26, 2019

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;}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2019 1
LIZZIE LATEST
Explorer ,
Apr 26, 2019

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! 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 26, 2019 0