[Pro] Simple Site Search in Responsive Websites

Freeway
1

Hello,

I am a convert to responsive website designs and am learning as I go, but have a problem:

I have a Simple Site Search action in a responsive website that does not change width with the different media types.

Is there a way to tweak this?

Any thoughts are gratefully received.

Thanks, Josephine

http://www.floodcontrolinternational.com.au/search.html?q=glass&t=1436960988144

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

You should be able to handle this with some added media queries. Try the following pasted into Page>Html Markup in the before section of your results page.

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

You may well want to tweak the numbers a bit - I have just guesstimated them.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

I should have said that your input field can just be sized in percentages in the FW inspector - or specific widths at different BP.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

That’s true Dave, but you’ll still to tweak some CSS in order to get the results responsive as well. The ‘Inspect Element’ feature (Safari, Firefox) has helped me out on that issue; what to target …

http://www.valveco.com/articles/aeo-certificate-speeds-up-the-logistic-process.html

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

That’s true Dave, but you’ll still to tweak some CSS in order to get the results responsive as well.

The post before deals with that.

D

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

6

True :slight_smile:

freewaytalk mailing list
email@hidden
Update your subscriptions at:

7

Thanks for replying. I did indeed try the fixed % widths, and the added markup before section, but neither works.

Any other ideas?

Thanks.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

8

Well, it looks like a fixed width here …

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

Please check the parent div’s for fixed width as well … on all breakpoints!

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:

9

Thanks for replying. I did indeed try the fixed % widths, and the added markup before section, but neither works.

Did you upload the page with the changes?

Not seeing it online at the previous link.

D

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

10

Oops, sorry, I hadn’t updated.

The page is thus:

http://www.floodcontrolinternational.com.au/search.html

Thanks.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

11

Oops, sorry, I hadn’t updated.

I am not seeing any evidence of the additional style code I suggested - certainly not in the before section.

And the search input field still appears to have a fixed width.

D

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

12

Like Dave said;

the #searchResults still are set to a fixed width of 700px, they should have a percentage like 100%. As soon as I change this here, the results turn out to be responsive.

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:

13

Hi, I am trying to get my simple site search to be responsive also. I have tried pasting the code above however it is not working? Could I ask should I be pasting it into
Page>htmlmarkup>Before html
There are a few ‘before’ options when you go to Page html markup?
Sorry I’m not a coder so not sure.
My FW search results box is 60% and it’s parent is 90% on a 1024 page.
The search function is working but the results are not responsive…
Many thanks

14

Hi Fay,

Try pasting in the Before </head> section.