Return to previous page

Search text (inside search box) is too wide in mobile view

This topic has 10 replies, 3 voices, and was last updated 5 years, 2 months ago ago by tuijatuulia

tuijatuulia

Participant

October 1, 2020 at 19:46

Hi,
on my site I wish to use in Mobile Menu the Off canvas type that shows a bit of the page on right side of menu. However, when enabled, the text that is inside the Search (by default “Type here..” I changed to “Search…”) but the text is starting before the field is starting, also there are some buttons on the right that are not shown either. (I would put here picture but you get the idea if I say that you can see in the field, on the left: “earch…” and on the right half a circle. This shows also on my default language, first letter of the word is not shown (language switcher is on menu, if you want to take a look)
Do you have some fix for this that I should do locally or is this general issue? I will update the theme a bit later, I am waiting some other fixes to come for Dokan.

#253445 Copied Theme version: 3.0.1 WooCommerce version: 4.5.2

9 Answers

Olga Barlow

Participant

October 2, 2020 at 11:32

Hello,

Truly saying I don’t understand your issue. Your mobile menu and search looks ok on both languages http://prntscr.com/urt8b2 http://prntscr.com/urt95q
Use the Lightshot screenshot free tool to share the screenshots of the issue and highlight the problem.

Regards

#253517 Copied

tuijatuulia

Participant

October 2, 2020 at 14:09

Thank you for the tip with Lightshot. These are with Samsung Galaxy S8+ using Firefox browser -in private area.

Please contact administrator
for this information.

#253547 Copied

Olga Barlow

Participant

October 2, 2020 at 15:17

Hello,

What device do you use and what browser?

Regards

#253564 Copied

tuijatuulia

Participant

October 2, 2020 at 16:03

This was mentioned in my previous reply: “These are with Samsung Galaxy S8+ using Firefox browser -in private area.”

#253591 Copied
Olga Barlow

Participant

October 2, 2020 at 16:42
Hello,

Go to Theme Options > Custom CSS and add the below code

.et_b_header-search .input-row { display: inline-block; } .et_b_header-search input[type="text"] { width: calc(100% - 40px); float: left; } .et_b_header-search .buttons-wrapper { display: inline-block; float: left; }

Check the search after that. Let me know if it helps.

Regards
#253601 Copied
tuijatuulia

Participant

October 2, 2020 at 17:53

Thanks, added this among other custom CSS, but unfortunately no change in Firefox. Good thing is most people are using Chrome, so not urgent but it is the first thing you click on a page – should look good also in Firefox.

#253632 Copied

Rose Tyler

Support staff

October 3, 2020 at 08:26

Please provide temporary wp-admin access.

Regards

#253666 Copied

Rose Tyler

Support staff

October 3, 2020 at 09:30

Custom CSS code is added incorrectly – https://prnt.sc/usbzw0 Please check and fix the code.

Regards

#253682 Copied

tuijatuulia

Participant

October 3, 2020 at 12:37

Thank you for spotting this. Now fixed and works well.
Sorry that the XStore theme editor is a bit clumsy on my computer, e.g. I am not able to see last rows of the editor without using a mouse (I don’t have a mouse connected now)

#253712 Copied
Viewing 10 results - 1 through 10 (of 10 total)

The issue related to '‘Search text (inside search box) is too wide in mobile view’' has been successfully resolved, and the topic is now closed for further responses

Search text (inside search box) is too wide in mobile view

Explore our best WordPress WooCommerce Themes collection