Few errors I cant solve out :(

[jyrbbaParticipant]

Hi,

I’m trying to optimize our mobile end user experience and i’m having some troubles I can’t seem to work out no matter how hard I try =)

First of all if just possible i’d like to have a bit different kind of search bar for mobile, i tried to add “active” class to it with javascript, but just didn’t have success. Propably due not selecting the right element etc. Anyway, my mobile sticky bar is going look something like this http://46.101.104.166/oma-sivu/ – This is my developement site. Problem is search is going to be left so tiny. I’d like to add a class to it when search is focused / active so I can make it expand to full 100% of screenwidth. I know you have the compact box thing, but it’s still contained in the same size box and not really helping at all.

Second is that my results on my mainsite with mobile resolutions don’t show up for some reason. Well actually they do show up, but they are position: fixed with -4xxx pixels, so they are so much to the left they are never visible. I’ve gone pretty much tru every setting 3 times trying to make it work. There are options for results box to have mobile and tablet 100% result box, but it just doesn’t seem to work at all. Atleast for me.

Thanks!

–Jyri

[Ernest MarcinkoKeymaster]

Hi,

I’m not sure if you resolved this already, but I’m currently seeing this on mobile: https://i.imgur.com/65LXSWX.png
Let me know!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[jyrbbaParticipant]

Hi,

i’ve uploaded a new picture, maybe that will help.

a) I’d like the search bar to have active CSS class so I could make it 100% when it’s clicked. It’s too small for any typing on iphone5. Over 30% of our mobile users are using 320px resolution only.

b) I’d like the results to be 100%, with some small margins.

I’m developing on this test site, as I don’t want to do it live.

http://46.101.104.166/wp-admin

admin / adminpassword 123

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

1. In this case, try this custom script to add the class to the main search container:

jQuery(function($){
  $('input.orig').on('focus', function(){
    $(this).closest('.asp_m').addClass('asp_focused');
  }).on('blur', function(){
    $(this).closest('.asp_m').removeClass('asp_focused');
  });
});

This will add the ‘asp_focused’ class. Then use a custom CSS like so:

.asp_m.asp_focused {
    min-width: 100% !important;
}

2. This might be doable without any custom CSS. Try changing the results position and the width and the margin: https://i.imgur.com/Sny5uGm.png

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[jyrbbaParticipant]

Hi,

sorry I forgot to mention I cracked this last night. I just made a duplicate search that has compact layout, and then hooked it so mobile navigation doesn’t have the regular search just the compact one.

It’s working now the way I wanted it to, atleast kinda.

https://www.fotomonza.com/

–Jyri

[Ernest MarcinkoKeymaster]

No problem 🙂 You can still re-use those codes in case you need them.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts