Inserting a "shortcode" in a post affect social share buttons visibility

unbosquedeteverde · Member · Nov 23, 2014 at 8:11 pm
Copy link
@thesacredpath Thanks a lot.

The shorcode i inserted is:

[display-posts category="no18-octubre-2014" display-posts wrapper="div" display-posts image_size="large" include_excerpt="true" order="DESC" orderby="date"]

The post where I noticed the problem is this:
http://lecturassumergidas.com/2014/10/27/no18-octubre-2014_/

As i said, when inserting it in the #primary area of a post, it affect the visibility of the social counters -that i force to be shown up in the page rather than in the botton-. The first time the page is loaded the counters don´t load. If i reload the post then they appear ok.

Actualy my “answer” had been avoid social counters in posts where i insert shortcodes. Not very smart but it works :)

I decided that I can live with no social counters in those posts.

Mainly tests i did was with:

PC – Chorme /Firefox / Iexplorer 11

Imac with Chrome.

Thank you very much for your help. Anyway, as i told you before, at least till I ´ll do any changes in my web structure or user interface, I can keep going without social counter on those posts (they are just a few) so, if it is complicated to track the problem, then, no problem ;)
thesacredpath · Member · Nov 24, 2014 at 9:03 pm
Copy link
@unbosquedeteverde, I’ll copy over your CSS and use your display posts code as a base and see if I can figure out what is going on. It could be that the display posts shortcode just isn’t leaving room for the social stuff and it is getting messed up.

Were the social icons at the end of each post, or at the end of the page below the posts?
designsimply · Member · Feb 15, 2015 at 7:13 pm
Copy link
On this page:
http://lecturassumergidas.com/2014/06/27/no15-junio-2014__/

Your sharing icons are not showing up because of this custom CSS:
```
.category-sumarios .sd-content {
	display: none
}
```
That rule looks like it works to hide sharing icons on any post saved with “sumarios” as one of the categories. Do you need that rule? I would recommend removing it.

I noticed you have several instances of absolute positioning as well as negative margins and !important applied to various different elements. Writing CSS this way is a bit of a house of cards, change one thing and it could have a domino effect and change different areas or pages or posts. This is just something you will have to work through very carefully given the current depth level of customization. If you can, try to avoid adding absolute positioning, negative margins, and !important in the future if you possibly can. All of those things can interfere with each other in odd ways and the more you have together, the trickier working with your CSS will become.

Here is an example from your custom CSS:
```
.sharedaddy {
	display: block !important;
	position:absolute !important;
	top:-13px !important;
	left:100px !important;
	width:100% !important
}
```
That’s way more complex than it needs to be. You might consider replacing that whole “.sharedaddy” block (which applies to two separate nested elements btw) with the following instead:
```
#jp-post-flair {
	position: absolute;
	top: 0px;
	width: 700px;
	margin: 0;
	padding: 0;
	text-align: center;
}
```
Last, I see this rule in your current custom CSS:
```
.single-post .entry-header {
	font-family: "Arimo", "arial", "sans-serif";
	font-size:24px !important;
	margin-top:-.2em;
	margin-bottom:-35px;
	margin-left:-28px;
	padding-bottom:-9px
}
```
That negative margin bottom seems like it could be problematic. I think you should try removing the “margin-bottom:-35px;” line and then clean up any other pages as needed. That negative margin is causing the sharing buttons to overlap the heading on this particular page.

These suggestions (and any for your page going forward) are really really specific to the current custom CSS you have saved. Any changes at all could cause quite a cascade of strange behavior (like the hidden sharing icons for just posts with the “sumarios” category, for example). I would strongly recommend taking some intermediate or advanced CSS classes online if you can find some good ones, because you have done a lot of CSS updates but there are some efficiency problems in your code that is going to make it really hard to work with if you want to make future changes.
unbosquedeteverde · Member · Feb 15, 2015 at 7:35 pm
Copy link
As always, thanks a lot designsimply. I just keep learning and trying to understand css on my own so i´m aware the code, after two years tweaking it, is a bit of a mess. I´ll take really seriously all of recomendations. Thank you very much!
designsimply · Member · Feb 15, 2015 at 8:46 pm
Copy link
Awesome. Cheers! :)

No items found.