Search box on mobile & full width slider buttons

11 posts from 3 voices

• Started 9 months ago by kleboe
• Latest reply from Devin
• This topic is resolved

Tags:

No tags yet.

1. 

   kleboe
   Member

   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!

   Posted 9 months ago #
2. 

   Devin
   Moderator

   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

   Posted 9 months ago #
3. 

   kleboe
   Member

   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.

   Posted 9 months ago #
4. 

   kleboe
   Member

   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!

   Posted 9 months ago #
5. 

   kleboe
   Member

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

   Posted 9 months ago #
6. 

   Nick
   Moderator

   Hi,

   That's great! Thanks for letting us know.

   Good Luck,

   Nick

   Posted 9 months ago #
7. 

   kleboe
   Member

   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!

   Posted 9 months ago #
8. 

   Devin
   Moderator

   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

   Posted 9 months ago #
9. 

   kleboe
   Member

   Devin,

   Absolutely perfect solutions. I'm very impressed.

   Kleboe

   Posted 9 months ago #
10. 

    kleboe
    Member

    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?

    Posted 9 months ago #
11. 

    Devin
    Moderator

    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

    Posted 9 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.