Display search form on mobile devices

[Bugo]

Most themes hide the search form on small screens. If you want the search form to always be available, do this little fix.

For the Curve theme: open responsive.css and add this CSS

Code Select Expand

@media screen and (max-width: 720px) {
#search_form {
display: block !important;
width: 100%;
text-align: center;
}
}

Result:
You cannot view this attachment.

[Jongo21]

Nice trick, thanks for sharing Bugo!

[FrizzleFried]

Works great ...

[Antechinus]

Instead of adding more code, wouldn't it make more sense to just remove the code that causes the issue in the first place?

Code (responsive.css) Select Expand

/* Hide me */
#inner_wrap.hide_720, #inner_wrap time, #inner_wrap .news,
#search_form, #smflogo, #message_index_jump_to, .nextlinks, #display_jump_to,
#siteslogan, th.id_group, th.registered, th.posts, th.reg_group, th.reg_date, td.reg_group, td.reg_date,
td.id_group, td.registered, td.posts:not(.unique), td.statsbar.posts,
#approve_list .ip, #approve_list .date_registered, #group_members .date_registered,
#main_content_section .navigate_section, .time,
#header_custom_profile_fields_field_type, #header_custom_profile_fields_active,
#header_custom_profile_fields_placement, #custom_profile_fields .active, #custom_profile_fields .field_type, #custom_profile_fields .placement {
display: none !important;
}Remove #search_form there. Sorted.

[FrizzleFried]

Welp... i do have a small issue.  My top bar is "stuck" to the top (on purpose)... but now with the search bar there it covers part of my logo.  Any way to add padding to the mobile theme but not the larger normal theme logo?

You cannot view this attachment.


Thanks!

[Steve]

Which method did you use? Bugo's or Ant's? Or does it matter?

[Antechinus]

Any way to add padding to the mobile theme but not the larger normal theme logo?

Sure. Just use a media query to add padding when the search form jumps to a new line.

Code Select Expand

@media screen and (max-width: XXXpx) {
body {
padding-top:YYYpx;
}
}

[FrizzleFried]

Which method did you use? Bugo's or Ant's? Or does it matter?

Bugo's.  Testing Ant's (which puts the search bar on the same line as the icons)... i don't do mobile so waiting for others to report.

[FrizzleFried]

Any way to add padding to the mobile theme but not the larger normal theme logo?

Sure. Just use a media query to add padding when the search form jumps to a new line.

Code Select Expand

@media screen and (max-width: XXXpx) {
    body {
        padding-top:YYYpx;
    }
}

Adding this does this:

You cannot view this attachment.

It drops the top bar.  It doesn't add padding to the bottom of it or the top of the logo.

FWIW I did try changing that to padding-bottom too with no luck.

 

[Antechinus]

How is your top bar "stuck to the top"? If it is using position: fixed; then adding top padding to the body tag should work.

ETA: Assuming you have actually specified that you want it at the top...

Code Select Expand

#top_section {top: 0;}

[FrizzleFried]

This is the code I use for the top bar...

Code Select Expand

#top_section {
  border-bottom: 1px solid rgb(187, 187, 187);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  background: rgb(255, 255, 255);
  clear: both;
  position: fixed;
  width: 100%;
}

[Antechinus]

Yes, I know. I was pointing out that you have not told it that you want it to be 0px from the top of the html tag. You should tell it this.

And you don't need the clear: both; in that code either.

[FrizzleFried]

I somehow missed post #9...

...once added all is well.


I know... 1st world problems,  huh?