Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #15178

    This theme is incredible! I’m so impressed. The flexibility is unbelievable.

    This is my first post on here so please bear with me if I don’t provide everything you need.

    I’ve added the search box to the top right of the template, to the right of the small header info. It looks great but disappears when I decrease the browser past 60% of it’s original size. I wondered what I would have to modify in terms of CSS to retain the search box so that those on small screens and mobile could still use it?

    Also, on the slider I’m using it full width but when I hover over it to navigate through images the little transparent circles that appear on the far left and right of the image with the arrows are cut off. Only half of them show. I wondered if there was a way to move them in the way, closer together to show the whole circle? Just need a steer on which CSS or Javascript files I need to alter to make them move.

    Thanks support. Any help is much appreciated!

    #86546

    Hey kleboe,

    Can we take a look at your page live? We’ll need to inspect what you have now to give a fix. The search box one sounds like media queries are changing the layout/hiding the search and I’d like to just take a look at exactly what is happening with the other issue.

    Regards,

    Devin

    #86547

    I’ve made the site live so you can take a look: http://kleboe.co.uk

    You’ll see the issues with the full size slider having the arrow navigations cut-off when you hover over the image. I’d be happy to remove the arrows all together.

    Thanks Devlin.

    #86548

    Also,

    A friend of mine checked the site but the cufon fonts weren’t working (I added my own font ‘Uma’ to the site)? He see’s all the main headings in Times New Roman. Do you get this too?

    Thanks!

    #86549

    Cufon issue fixed. I added my own css font file and this seems to have fixed the issue.

    #86550

    Hi,

    That’s great! Thanks for letting us know.

    Good Luck,

    Nick

    #86552

    Hi support,

    I’m still having issues with the search box not appearing on mobile browsers:

    I’ve added the search box to the top right of the template, to the right of the small header info. It looks great but disappears when I decrease the browser past 60% of it’s original size. I wondered what I would have to modify in terms of CSS to retain the search box so that those on small screens and mobile could still use it?

    And the slider still has the arrows cut off:

    Also, on the slider I’m using it full width but when I hover over it to navigate through images the little transparent circles that appear on the far left and right of the image with the arrows are cut off. Only half of them show. I wondered if there was a way to move them in the way, closer together to show the whole circle? Just need a steer on which CSS or Javascript files I need to alter to make them move.

    Thanks!

    #86553

    Hey kleboe,

    For the search form, we just need to overwrite the display: none rule. Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    @media only screen and (max-width: 767px) {
    .responsive .header_meta #searchform {display: block;}
    }

    For the slideshow arrow I believe you’ll need to search for the following in js>aviapoly2.js:

    //if($(event.target).is('.slideshow_caption, .slideshow_inner_caption')) return;
    controls['prev'].stop().css({display:'block', opacity:0}).animate({opacity:0.9, left:'-25px'}, duration, easing);
    controls['next'] = container.find('.slide_controls a.ctrl_next').stop().css({display:'block', opacity:0}).animate({opacity:0.9, right:'-25px'}, duration, easing);
    }

    I think changing the -25px for each of them to 5px will work for that layout. I’ll tag the issue for Kriesi since it looks like it needs to be tweaked.

    Regards,

    Devin

    #86554

    Devin,

    Absolutely perfect solutions. I’m very impressed.

    Kleboe

    #86555

    A ha, did just get one issue pointed out to me. On the mobile version of the template when the browser is at its narrowest the user cannot click into the search box. I wondered if you might know a fix for this?

    #86556

    Sure thing! We just need to adjust the Contact link a bit:

    Add the following after the @media only screen and (max-width: 767px) that you added above. So your final little block for max-width:767 will be

    @media only screen and (max-width: 767px) {
    .responsive .header_meta #searchform {display: block;}
    .responsive .header_meta .small_header_info{float: left; min-width: 50px;}
    }

    Regards,

    Devin

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Search box on mobile & full width slider buttons’ is closed to new replies.