Mobile with transparent header social buttons only show boxes

Hi Elliot!

It didn’t work as my social networks have to be in white and the phone number cannot be seen either:
Check out this page on your cell: http://targetlatino.com/hispanic-inbound-marketing-agency/

The only page where this is a problem is the home that has the glassy/transparent header. The rest of the pages work perfectly for the header.

The pages do display thinner on the body (and I see Google sees the same as me) but this happens only on full width pages:
http://targetlatino.com/hispanic-inbound-marketing-agency/
http://targetlatino.com/pinterest-for-business-guide-beginner-level/

But it doesn’t happen on sidebar pages:
http://targetlatino.com/marketing-articles-publications/

Here’s the snapshots:
This is the home:
http://hispanic-marketing.com/tldownloads/img2849.PNG (you can see the top cannot be seen) and the body is very thing – it used to be as wide as the mobile screen)

This is the home scrolling downwards:
http://hispanic-marketing.com/tldownloads/img2850.PNG
(and the text with the H1 overflows – well really the rest does not expand across the page, so H1 behaves properly)

This is another page without the transparent/glossy header:
http://hispanic-marketing.com/tldownloads/img2851.PNG
You can see the header properly but the text is not properly adjusted to the mobile screen. (the pages with 3 columns it’s even worse) :(

Help!!!!

Thank you!!!

Havi

Hi Andy!!

Thank you so much!

I turned off the ESSB plugin and did not need to add any other code to make the body text display correctly. ;) Now I need to discover how I can use that plugin without messing up the code.

I added:
#top #header_meta, #top #header_meta nav ul ul li, #top #header_meta nav ul ul a, #top #header_meta nav ul ul {
background-color: #ff4d47 !important;
}
but it also applies it to my home page on desktop, tablet and cell. Is there a way to only apply it when it’s the cell?

Thank you!!! :)

Havi

Absolute genius, Ismael!!! (I was trying to use the @media only yesterday but did not know to add the {} so it wasn’t applying them correctly… this is awesome!!!

Now all I have to resolve is the ESSB Plugin settings so it doesn’t mess up the code and from what you told me earlier it must be one of the settings for minifying the javascript or making it run on the bottom. I’ll test it and let you know just in case somebody else uses that plugin (It’s pretty complete, especially from the markup perspective. – You can add the full complete code markup for G+, Twitter, FB, LinkedIn and Pinterest and it lets you add specific text and image for each post by network)

Ah! I don’t know if you noticed but I hand made a related plugin with Enfold ;) Here’s one of the pages where I added it:
http://hispanic-marketing.com/pinterest-competition-wants-you-to-solve-this-peugeot-puzzle/
It’s a post slider by Tags with square images ;) Nifty, huh? No additional plugin required!! :)

Warmly,

Havi

Hi Ismael!!

Not at all!!

Here’s the Avia code I add to each post to make the related posts with Enfold ;)

[av_postslider link='post_tag,631,846' columns='5' items='5' offset='0' contents='title_read_more' preview_mode='custom' image_size='square' autoplay='no' interval='5']

It would be really cool if it would pick up the tags from the current post automatically and disable the current post – offset works when it’s the last post with that tag but then it moves ;)

Maybe it can be added to the next release? I love the fact that I can insert it anywhere in the post for improved conversions (some articles are long and one can benefit from a related posts before it’s expected)

It looks awesome, doesn’t it?

I am also sharing with you some of the custom data the ESSB plugin provides. It’s really SMM and SEO friendly. You can customize the tweet message, use bit.ly for Twitter only, share images on Pinterest by hovering on them, it validates Facebook debugger, Google Structured Data Testing Tool, Pinterest Rich Pin Validator and Twitter Card Validator. They are on CodeCayon too!

Warmly,
Havi

Social Share Optimization
OPEN GRAPH META TAGS
Title:
Add a custom title for your post. This will be used to post on an user’s wall when they like/share your post.
Custom Image:
If an image is provided it will be used in share data
Description:
Add a custom description for your post. This will be used to post on an user’s wall when they like/share your post.
Video URL:
Please use the FULL URL to the video (e.g. http://www.yourdomain.com/videos/video.mp4).
Video Width:
Enter the width of your video. (Example: 320)
Video Height:
Enter the height of your video. (Example: 320)
TWITTER CARDS META TAGS (FILL ONLY IF DIFFERENT FROM OPEN GRAPH)
Title:
Add a custom title for your post. This will be used to post on an user’s wall when they like/share your post.
Image:
If an image is provided it will be used in share data only when summary card with image is provided
Description:
Add a custom description for your post. This will be used to post on an user’s wall when they like/share your post.
GOOGLE+ META TAGS (FILL ONLY IF DIFFERENT FROM OPEN GRAPH)
Title:
Add a custom title for your post. This will be used to post on an user’s wall when they like/share your post.
Image:
If an image is provided it will be used in share data
Description:
Add a custom description for your post. This will be used to post on an user’s wall when they like/share your post.