Simple Machines Community Forum

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:
Aut vel debitis voluptates2 — Firefox Developer Edi.png

Nice trick, thanks for sharing Bugo!

Works great ...

Instead of adding more code, wouldn't it make more sense to just remove the code that causes the issue in the first place?
/* 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.

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?

ScreenHunter 453.jpg


Thanks!

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

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;
}
}

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.

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.

Code Select Expand

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

Adding this does this:

ScreenHunter 454.jpg

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.

 

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;}

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%;
}

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.

I somehow missed post #9...

...once added all is well.


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