• Creator
  • #8297

    Jodi Lea

    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 🙂

Viewing 10 replies - 1 through 10 (of 11 total)
  • Jacob Miller
    Post count: 6
    #9244 |

    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.

    URL: http://serenabmiller.com

    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 🙂

    Post count: 2647
    #9248 |

    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/

    Jacob Miller
    Post count: 6
    #9256 |

    Roman, I tried the solutions from the link you mentioned, and it still didn’t help. In fact I’m already using

    .social-networks a {background-color: #fff !important;}

    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.

    URL: http://serenabmiller.com


    Post count: 2647
    #9259 |

    have you test it on more mobile devices or only on one?

    Jacob Miller
    Post count: 6
    #9260 |

    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.


    Post count: 2647
    #9263 |

    sorry, at this moment I have no chance to test it on a windows device

    Jacob Miller
    Post count: 6
    #9265 |

    I discovered what the problem was.
    In the original style.css it’s trying to use images that are not in the images folder.

    .social-networks .facebook a,.person-author .facebook{background-image:url(images/facebook@2x.png) !important;
    -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/twitter@2x.png) !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/linkedin@2x.png) !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/rss@2x.png) !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/dribbble@2x.png) !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/youtube@2x.png) !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/pinterest@2x.png) !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/vimeo@2x.png) !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/flickr@2x.png) !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/tumblr@2x.png) !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/google@2x.png) !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/digg@2x.png) !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/blogger@2x.png) !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/skype@2x.png) !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/myspace@2x.png) !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/deviantart@2x.png) !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/yahoo@2x.png) !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/reddit@2x.png) !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/forrst@2x.png) !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/mail@2x.png) !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

    -webkit-background-size:Xpx Xpx;
    -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


    It works now, but it’s using the smaller resolution /images/social_links.png image instead of the /images/social_links@2x.png image
    Can you help me make it use the /images/social_links@2x.png when being requested on screens that can utilize 2x?
    Doing a full search through the original style.css shows that /images/social_links@2x.png isn’t defined at all.

    I think this might be affecting everyone using this theme along with the built in social images.


    Post count: 2647
    #9266 |

    thanks for report…I had to overlooked that…I will try to fix that in the next theme release

    Jodi Lea
    Post count: 24
    #9423 |

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

    Post count: 2647
    #9424 |

    you mean the box effect on the selected/hovered menu item? its coded like this with the effect, its not an issue

Viewing 10 replies - 1 through 10 (of 11 total)

The topic ‘Mobile issues with Alora’ is closed to new replies.