issue with responsiveness for widgets

After a certain width and before the tablet breakpoint, the search bar disappears completely and the user cannot see what they are typing.

https://www.takeabook.gr/wp-content/uploads/2025/10/search_bar.mp4
its for this website: https://takeabook.gr/

Can you please suggest a fix?

Hello,

Browser resizing is not a standard way of checking the concern for the responsive viewports.

You can check your Site on a real time device (Mobile/desktop/tablet) and check the issue.
You should check the site on a Real device or check the site here in the Responsinator:
http://www.responsinator.com/

Best Regards,

Excuse me, what exactly do you mean?
First of all, a resized browser is a “real” device and additionally, the resizing of a browser in the case of multiple windows on a desktop is a realistic scenario.

Of course we have tried it to other devices and of course the issue is still there.

How is the search input disappearing, not an issue worth looking into and instead you brush it off by saying “its not a real device”.

Have YOU checked it in a smaller viewport? Perhaps in a smaller laptop of chromebook?

If you are not able to help, please forward this issue to someone who can, or just say so.

I have posted this as a public post for a reason, and this reason is that everyone should be aware of it (and aware of your reply as well).

Please take a look at it again.
Thank you

Hello,

I have tested your site on various breakpoints and tablet screens, and it is showing fine.
See Screenshot for clarification: https://postimg.cc/NyX27fzL

Could you please share the screen size (resolution) where the issue persists? Also, share the WP admin login details so I can further check your site and give you a possible solution.

Best Regards,

Guys, come on now…. Lets focus a bit and sort this, we are not talking about the search bar in the header, but the search widget.
Did you even watch the video I uploaded in the first post?

We are showcasing the exact problem.
In your screenshot, you are already in a tablet breakpoint, in which the shop filters sidebar is activated with the burger button.

However, if you check the search widget in the provided video, you’ll clearly see that the input almost disappears BEFORE you hit the tablet/mobile breakpoint.

https://snipboard.io/ktMjBn.jpg

A very simple UI fix would be to have the widget in a column layout after a certain viewport width.

I understand that this is nothing critical and obviously you want to focus on the more important aspects of the theme.
If you consider this to be of minimum importance for you let me know so I can sort it with an external developer.

Hello,

Try to use this custom css code in Theme Settings > Custom CSS:

@media (max-width: 1240px) and (min-width: 803px) {
    .searchform.wd-with-cat input[type="text"] {
        padding-inline-end: calc(var(--wd-search-btn-w) 15px) !important;
    }

    .searchform.wd-with-cat .wd-search-cat {
        position: static !important;
        width: 100%;
        margin-top: 5px;
    }

    .searchform.wd-with-cat {
        display: flex !important;
        flex-direction: column !important;
    }
}

Best Regards,

I’m not sure this is correct as you can see here:

https://snipboard.io/yzdmsZ.jpg

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

thank you, I’m adding the credentials

Hello,

I have further investigated the issue on your site and found that the search widget content is being cut off due to the sidebar width. The widget’s content area is wider than the sidebar itself, which causes the cutoff.

To fix this, please navigate to Theme Settings > Product Archive > Sidebar and set the Sidebar Size to “Large”. Then check if the layout appears correctly.

Alternatively, you can apply the following custom CSS globally to adjust the widget layout and make it display properly in the sidebar:

.sidebar .searchform.wd-with-cat,
.wd-sidebar .searchform.wd-with-cat {
  display: flex !important;
  flex-direction: column !important;
}

.sidebar .searchform.wd-with-cat .wd-search-cat,
.wd-sidebar .searchform.wd-with-cat .wd-search-cat {
  position: static !important;
  width: 100% !important;
  margin-top: 5px !important;
  margin-inline-end: 0 !important;
  border: 1px solid var(--wd-form-brd-color) !important;
  border-radius: var(--wd-brd-radius) !important;
  height: auto !important;
  min-height: 42px;
}

.sidebar .searchform.wd-with-cat .wd-search-cat-btn,
.wd-sidebar .searchform.wd-with-cat .wd-search-cat-btn {
  width: 100% !important;
  border: none !important;
  justify-content: space-between;
}

/* Reset button positions */
.sidebar .searchform.wd-with-cat .searchsubmit,
.wd-sidebar .searchform.wd-with-cat .searchsubmit {
  right: 0px !important;
  left: auto !important;
  bottom: 50px;
}

.searchform .wd-clear-search:before {
  bottom: 25px !important;
  left: 100px !important;
  position: relative !important;
}

Best Regards,

[Author]

Posts