[Pro] Responsive Simple Site Search not working correctly

Freeway
1

Hi Friends,

I’m trying to add a search function to my website using ‘Simple Site Search’ but unfortunately, I can’t get the responsive side of things to work correctly. I have tried for many days the following suggestions, please see link below, but as of yet I’m still baffled.

https://freewaytalk.softpress.com/thread/view/163267

I’ve added the following code as advised, included the correct brake point sizes etc, (please see code below) and all seems to we working just fine. However, when I test the page, while the search results box seems to display correctly. Oddly, the largest search box used on the largest page size seems to remain, adding space to the right-hand side, undoing the responsive properties.

@media screen and (max-width:1100px) { #fwSearchResults { width: 670px; } } @media screen and (max-width:800px) { #fwSearchResults { width: 405px; } } @media screen and (max-width:768px) { #fwSearchResults { width: 605px; } } @media screen and (max-width:607px) { #fwSearchResults { width: 524px; } } @media screen and (max-width:603px) { #fwSearchResults { width: 516px; } } @media screen and (max-width:600px) { #fwSearchResults { width: 516px; } } @media screen and (max-width:603px) { #fwSearchResults { width: 516px; } } @media screen and (max-width:480px) { #fwSearchResults { width: 374px; } } @media screen and (max-width:460px) { #fwSearchResults { width: 374px; } } @media screen and (max-width:424px) { #fwSearchResults { width: 374px; } } @media screen and (max-width:414px) { #fwSearchResults { width: 357px; } } @media screen and (max-width:400px) { #fwSearchResults { width: 318px; } } @media screen and (max-width:384px) { #fwSearchResults { width: 294px; } } @media screen and (max-width:375px) { #fwSearchResults { width: 294px; } } @media screen and (max-width:360px) { #fwSearchResults { width: 294px; } } @media screen and (max-width:320px) { #fwSearchResults { width: 260px; } } @media screen and (max-width:240px) { #fwSearchResults { width: 217px; } }

Try, searching the number ‘1’ for example and see what I’m trying to explain. I know that I need to add the description in meta tags, the site is only in early stages.

http://www.spiritual-jewellery-online.co.uk/productdetails.html

I have seen and tried adding the following code as mentioned, please see below, but having absolutely no understanding of code, it makes absolutely no sense and hope someone can be so kind as to advise me.

#search-block { position:relative; width:920px; height:654px; z-index:0; overflow:visible }

Thank you in advance for your help any help and suggestions

Paul

http://www.spiritual-jewellery-online.co.uk/productdetails.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

2

First thing I would suggest is that you make your life easier and get rid of half of those breakpoints - you have 16!

Personally I use 5 which are 320, 480, 568, 768 and 1050. Others may have their own ideas.

A quick look at your example page and the search results looks OK - I think you have other issues.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

3

Hi David,

Thank you for your kind reply, greatly appreciated. I will take your advice, alway good to get suggestions.

While it looks as if the responsive side of thing are working correctly. If you look at the search results on a mobile device and scroll to the left, you will see that things go wrong.

I can see that a freeway talk member a Mr Richard van Heukelum, suggested the code below for someone having a similar issue, but I’m not sure what to do, as I don’t understand code, hope you or someone else can point me in the right direction.

#search-block { position:relative; width:920px; height:654px; z-index:0; overflow:visible }

Thanks again David.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

4

I can see that a freeway talk member a Mr Richard van Heukelum, suggested the code below for someone having a similar issue, but I’m not sure what to do, as I don’t understand code, hope you or someone else can point me in the right direction.

#search-block { position:relative; width:920px; height:654px; z-index:0; overflow:visible }

That response from Richard is in answer to a specific use case - a 920px width wouldn’t work on a page that was less than that in width.

As I said earlier your search results section is responding correctly. There is other things going on on your page that aren’t.

I will dig deeper later when I get a chance.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

5

Looks like your culprit is

<div id="fwSearchResults" style="width:670px;">

That is showing at the 320 breakpoint

A 670px box doesn’t fit a 320px page and so Safari on iOS is scaling down the page to fit it all in

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

6

Thank you once again David, can this be solved, by removing or editing something. Not sure what you’re suggesting.

I’m sure others are having the same issue. Have you built a website that has a search function on the site that renders responsive? Would love to see one working.

Many thanks, Paul

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

7

Thank you once again David, can this be solved, by removing or editing something.

With your search item selected look in the Inspector to see what size has been set there. It should be set at a fixed% of its parent.

If you set it at 50% and the parent was 1000px wide then the size is set at 500px when the results display is created. As this is added as an inline style you need to work harder in your added code to supersede that style.

So in your markup code add the !important declaration to each size setting eg

<style type="text/css">
@media screen and (max-width:1024px)
{
    #fwSearchResults { width: 960px !important; }
}
@media screen and (max-width:880px)
{
    #fwSearchResults { width: 800px !important; }
}
@media screen and (max-width:768px)
{
    #fwSearchResults { width: 720px !important; }
}
@media screen and (max-width:640px)
{
    #fwSearchResults { width: 500px !important; }
}
@media screen and (max-width:480px)
{
    #fwSearchResults { width: 400px !important; }
}
@media screen and (max-width:320px)
{
    #fwSearchResults { width: 260px !important; }
}
</style>

Then your added code will have greater priority than the FW generated setting.

You will need to tweak your actual values to suit your page lauout.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

8

It takes some screwdriver work under the hood (CSS), but Simple Site Search even looks good responsive …

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

9

Hi David,

Just a quick note to say a big thank you. You’re an absolute genius. This has perplexed me for days and days and I’ve tried everything. Looks like Richard has solved his issues too, keep up the great work and thank you very much.

Take care, Paul.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

10

Good - but do yourself a big favour and get rid of most of those totally unnecessary breakpoints.

It will save you a lot of tweaking.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options