Display search form on mobile devices

Started by Bugo, May 16, 2022, 11:30:55 AM

Previous topic - Next topic

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
@media screen and (max-width: 720px) {
#search_form {
display: block !important;
width: 100%;
text-align: center;
}
}

Result:
You cannot view this attachment.

Jongo21

#1
Nice trick, thanks for sharing Bugo!

FrizzleFried


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
/* 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?
DO NOT pm me for support!

Antechinus

Quote from: FrizzleFried on May 16, 2022, 06:15:42 PMAny 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.
@media screen and (max-width: XXXpx) {
body {
padding-top:YYYpx;
}
}

FrizzleFried

Quote from: Steve on May 16, 2022, 06:31:22 PMWhich 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

Quote from: Antechinus on May 16, 2022, 06:40:23 PM
Quote from: FrizzleFried on May 16, 2022, 06:15:42 PMAny 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.
@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...
#top_section {top: 0;}

FrizzleFried

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

#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. :D

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?

Advertisement: