-
Closed
-
Hey Roman,
You’ve been great so far with any issues I’ve run across, so I’m hopeful that this time will prove no different! I’m having some mobile issues, and one issue on computer viewing.
Computer Issue:
1. On a computer, no matter the browser, I’m getting a barely noticible “box” around my menu items. I’ve tried every combination of color settings I can think of to avoid this, but it remains. Like I said, it’s faint, like a ghosted box around each items, but I’m anal about these things!
Mobile Issues:
-
1. Social icons appears as just dark boxes when viewed on Android phones running latest Jellybean. I haven’t been able to test on iOS yet, but will by end of day today. Any workaround for this so that they show up already colored when the site loads on a mobile device, sans mouseover?
2. My sticky header looks great on my mobile, but if I scroll down the page and back up repeatedly, the logo on the sticky header decreases in size each time and then disappears altogether after about six up and down page scrolls.
3. This may be one for my plugin developer, but I’m asking you too – I’m using the Comprehensive Google Maps plugin in lieu of the shortcode included with the theme because I want to have the option for the user to type in a starting point and get directions. My issue is that on mobile, the map shows up, but with no starting marker in place.
Any and all help will be greatly appreciated and anticipated! Thanks again 🙂
If you don’t mind Jodi, I’m going to jump on this question as well.
Primary with the 1st Mobile question: social icons in the sidebar and also in the social share location after a post. It appears that social.png is not loading properly, only the container is showing up.
The social icons work great on desktops and even the iPad, but for some reason mobile devices, (Tested both Android with 3 different browsers, and iOS) do not display the graphic, just the background. This also happened with a local test environment I created as well.
Thanks for an awesome theme Roman 🙂
computer issue: may I see the URL?
mobile issue: please check out this thread http://theme4press.com/support/current-themes-group5/alora-forum27/social-buttons-thread958/
Roman, I tried the solutions from the link you mentioned, and it still didn’t help. In fact I’m already using
in my custom css because I liked the look of that better. (when I took it out it still did the same thing, but with the darker background-color)
The Desktop, Laptop, and Tablet all look fine, but for smart phones, the social links just show up as solid white box with the correct opacity setting, and then change to their respective colored boxes when touched, but the social graphic itself does not show up.
Thanks
have you test it on more mobile devices or only on one?
I tested it with an iPhone 4gs with Safari, and an Android 4.2 with Chrome / Firefox / Opera and all 4 browsers showed the same result.
I think it has to do with some sort of filtering on the screen size.
I just tested it on my desktop with IE using the F12 emulation to emulate a Windows Phone running IE10 – windows phone edition, and it shows the same result.
Desktop snapshot, the way it should be displaying.
And this is what it looks like when accessing it from a mobile device, this particular picture is an emulated Windows Phone.
Thanks
sorry, at this moment I have no chance to test it on a windows device
Roman,
I discovered what the problem was.
In the original style.css it’s trying to use images that are not in the images folder.
-webkit-background-size:9px 17px;
-moz-background-size:9px 17px;
-o-background-size:9px 17px;
background-size:9px 17px;
}
.social-networks .twitter a,.person-author .twitter{background-image:url(images/[email protected]) !important;
-webkit-background-size:13px 16px;
-moz-background-size:13px 16px;
-o-background-size:13px 16px;
background-size:13px 16px;
}
.social-networks .linkedin a,.person-author .linkedin{background-image:url(images/[email protected]) !important;
-webkit-background-size:14px 13px;
-moz-background-size:14px 13px;
-o-background-size:14px 13px;
background-size:14px 13px;
}
.social-networks .rss a,.person-author .rss{background-image:url(images/[email protected]) !important;
-webkit-background-size:13px 13px;
-moz-background-size:13px 13px;
-o-background-size:13px 13px;
background-size:13px 13px;
}
.social-networks .dribbble a,.person-author .dribbble{background-image:url(images/[email protected]) !important;
-webkit-background-size:16px 16px;
-moz-background-size:16px 16px;
-o-background-size:16px 16px;
background-size:16px 16px;
}
.social-networks .youtube a,.person-author .youtube{background-image:url(images/[email protected]) !important;
-webkit-background-size:23px 25px;
-moz-background-size:23px 25px;
-o-background-size:23px 25px;
background-size:23px 25px;
}
.social-networks .pinterest a,.person-author .pinterest{background-image:url(images/[email protected]) !important;
-webkit-background-size:16px 20px;
-moz-background-size:16px 20px;
-o-background-size:16px 20px;
background-size:16px 20px;
}
.social-networks .vimeo a,.person-author .vimeo{background-image:url(images/[email protected]) !important;
-webkit-background-size:18px 16px;
-moz-background-size:18px 16px;
-o-background-size:18px 16px;
background-size:18px 16px;
}
.social-networks .flickr a,.person-author .flickr{background-image:url(images/[email protected]) !important;
-webkit-background-size:25px 17px;
-moz-background-size:25px 17px;
-o-background-size:25px 17px;
background-size:25px 17px;
}
.social-networks .tumblr a,.person-author .tumblr{background-image:url(images/[email protected]) !important;
-webkit-background-size:15px 16px;
-moz-background-size:15px 16px;
-o-background-size:15px 16px;
background-size:15px 16px;
}
.social-networks .google a,.person-author .google{background-image:url(images/[email protected]) !important;
-webkit-background-size:21px 18px;
-moz-background-size:21px 18px;
-o-background-size:21px 18px;
background-size:21px 18px;
}
.social-networks .digg a,.person-author .digg{background-image:url(images/[email protected]) !important;
-webkit-background-size:21px 19px;
-moz-background-size:21px 19px;
-o-background-size:21px 19px;
background-size:21px 19px;
}
.social-networks .blogger a,.person-author .blogger{background-image:url(images/[email protected]) !important;
-webkit-background-size:16px 15px;
-moz-background-size:16px 15px;
-o-background-size:16px 15px;
background-size:16px 15px;
}
.social-networks .skype a,.person-author .skype{background-image:url(images/[email protected]) !important;
-webkit-background-size:19px 19px;
-moz-background-size:19px 19px;
-o-background-size:19px 19px;
background-size:19px 19px;
}
.social-networks .myspace a,.person-author .myspace{background-image:url(images/[email protected]) !important;
-webkit-background-size:18px 18px;
-moz-background-size:18px 18px;
-o-background-size:18px 18px;
background-size:18px 18px;
}
.social-networks .deviantart a,.person-author .deviantart{background-image:url(images/[email protected]) !important;
-webkit-background-size:23px 18px;
-moz-background-size:23px 18px;
-o-background-size:23px 18px;
background-size:23px 18px;
}
.social-networks .yahoo a,.person-author .yahoo{background-image:url(images/[email protected]) !important;
-webkit-background-size:22px 14px;
-moz-background-size:22px 14px;
-o-background-size:22px 14px;
background-size:22px 14px;
}
.social-networks .reddit a,.person-author .reddit{background-image:url(images/[email protected]) !important;
-webkit-background-size:19px 15px;
-moz-background-size:19px 15px;
-o-background-size:19px 15px;
background-size:19px 15px;
}
.social-networks .forrst a,.person-author .forrst{background-image:url(images/[email protected]) !important;
-webkit-background-size:15px 19px;
-moz-background-size:15px 19px;
-o-background-size:15px 19px;
background-size:15px 19px;
}
.social-networks .email a,.person-author .email{background-image:url(images/[email protected]) !important;
-webkit-background-size:20px 14px;
-moz-background-size:20px 14px;
-o-background-size:20px 14px;
background-size:20px 14px;
}
Getting rid of the
tag redirects the image look up to /images/social_links.png but unless the
-moz-background-size:Xpx Xpx;
-o-background-size:Xpx Xpx;
background-size:Xpx Xpx;
is taken away, it still doesn’t work. So the only way I can get it to work is to comment out that whole chunk of code (line 6472 through line 6592 using the
tag.
It works now, but it’s using the smaller resolution /images/social_links.png image instead of the /images/[email protected] image
Can you help me make it use the /images/[email protected] when being requested on screens that can utilize 2x?
Doing a full search through the original style.css shows that /images/[email protected] isn’t defined at all.
I think this might be affecting everyone using this theme along with the built in social images.
Thanks
thanks for report…I had to overlooked that…I will try to fix that in the next theme release
I’ve had some family stuff going on and have been out of town and just now getting to get back to this. In looking around a bit earlier this evening, I was coming to the same conclusion as Jacob on the missing graphics.
Any ideas on the other issues? The “boxes” behind the menu items are faint, but definitely there. The test domain is http://www.jodilea.com
Everything on it right now is just filler until I get the bugs worked out and get it on the actual domain. I’ve already had to extend my working time on this due to my personal stuff, so I’m running very tight time-wise now! Thank you (both) again for any and all help! 🙂
you mean the box effect on the selected/hovered menu item? its coded like this with the effect, its not an issue
The topic Mobile issues with Alora is closed to new replies