Tagged: , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #446139

    Hi,
    I’m trying to resize the search box using CSS but i’ve hit a bug. The changes display fine, but only after scrolling the page (even a few pixels). Right after clicking the search icon in the main menu, you get this :
    before scroll
    And after scrolling, even a little bit, it displays as intended :
    after scroll

    here’s the code I added to custom.css :

    .inner_tooltip {
    	position: fixed;
    	width:100%;
    	left:0px;
    	top:150px;
    	padding: 50px;
    	background-color: white;
    	z-index: 99999;	
    }
    #top #searchsubmit, .ajax_load{
    	width: 100px;
    	height: 100%;
    }
    #top #s {
    	width: 100%;
    	font-size: 50px;
    }
    #top #searchform div {
    	max-width: 100%;
    }
    
    #446602

    Hi radugidei!

    What happens when you remove all of your custom CSS?

    Send us a link to your page and we’ll take a look. Also let us know what operating system and browser your using.

    Best regards,
    Elliott

    #446607

    Hi Elliott,
    when i remove all of the CSS, things go back to normal : press the search icon, the little search box pops up, all works fine.

    Was testing on OS X Yosemite, latest Safari.

    #446608
    This reply has been marked as private.
    #447518

    Hey!

    I would like to check the page but it redirects me to the maintenance mode page even though I logged in to the site. http://dev.lee-evans.co.uk/

    Regards,
    Ismael

    #447698

    HI @ismael, your creds have now been elevated, give it a try !
    thanks !

    #448159

    Hi!

    Try to replace the code with this:

    .avia-search-tooltip.avia-tt {
    	position: fixed !important;
    	min-width:900px !important;
    	max-width: 900px !important;
    	left:10% !important;
    	top:30% !important;
    	background-color: white;
    	z-index: 99999;	
    	margin: 0 !important;
    }
    
    .avia-search-tooltip.avia-tt {
    	width: 100%;
    	max-width: 1310px;
    }
    
    #top #searchsubmit, .ajax_load {
    	width: 100px;
    	height: 100%;
    }
    #top #s {
    	width: 100%;
    	font-size: 50px;
    }
    #top #searchform div {
    	max-width: 100%;
    }

    Best regards,
    Ismael

    #449530

    Thanks Ismael, that worked but not quite aligned as I needed, so I tweaked your code a little.
    This now works :

    .avia-search-tooltip.avia-tt {
    	position: fixed !important;
    	min-width:900px !important;
    	top:18% !important;
    	left:0% !important;
    	background-color: white;
    	z-index: 99999;	
    	margin: 0 !important;
    }
    
    .avia-search-tooltip.avia-tt {
    	width: 100%;
    }
    
    #top #searchsubmit, .ajax_load {
    	width: 100px;
    	height: 100%;
    }
    #top #s {
    	width: 100%;
    	font-size: 50px;
    }
    #top #searchform div {
    	max-width: 100%;
    }
    #449578

    Hi!

    Great, glad you got it fixed :)

    Regards,
    Rikard

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

You must be logged in to reply to this topic.