Search bar display

Hello,

As you can see in the image below the text that is displayed in the search bar is getting cut off by a white border. Is there anything I could do in order to remove it?

Thank you

Attachments:

You must be logged in to view attached files.

Try adding the following custom code to the Global Custom CSS Area to reduce the padding inside the mobile search.

.wd-header-search-form-mobile .searchform input[type="text"] {
    padding-inline-start: 10px;
    padding-inline-end: 37px;
}

Please note that while this custom code will decrease the padding on mobile, some text may still not be fully visible in the search due to the limited horizontal space. For further improvement, it may be necessary to reorganize the header layout.

Kind Regards

Hi

I added it and the problem still persists.

Thank you

We checked your site and confirmed that the custom code we provided earlier is working correctly (screenshot: https://monosnap.com/file/ROcWHvBDl868MpsyvUXWLYvSQF8jb8).

If it is not working on your end, please make sure to clear the cache on your site and in the browser you are using. Alternatively, try accessing the site in an incognito tab.

Kind Regards

Thank you a lot for yor help.

“As a follow-up question regarding the search bar font, when I search for something, the font appears different from the ‘Caută postere’ placeholder text. Could I make them the same? I’ve also attached a video so you can see what I’m referring to. If possible, could you make the changes yourself?

Unfortunately, I don’t see the video. Please add it again.

Regards.

I attached it now.

Attachments:

You must be logged in to view attached files.

The issue you described is caused by a complex combination of font settings and custom code applied on your site.

By default, both text and placeholders in input fields inherit the same font set for the body using the “Text font” option in Theme Settings (https://monosnap.com/file/sx0qJ41LPD85gJJ3VO4VyGApzKt0K7).

However, your site contains custom code that overrides the body font from Poppins to Arial, which in turn changes the font of both placeholders and input text to Arial. This code is located inside an HTML element within an HTML Block, assigned as extra content for your full-screen search (https://monosnap.com/file/7FuB7GuYO6JkwZuaMNLPkvNVCj1oOa).

The only reason why placeholders and input text do not fully match is that your site has another custom code that specifically targets placeholders, forcing them back to Poppins (https://monosnap.com/file/1Ge8tpbsr1Rd9JXcu7QL0syQ6wAfqr).

To fix this issue, you need to:
1. Remove the custom code that changes the body font to Arial (https://monosnap.com/file/sx0qJ41LPD85gJJ3VO4VyGApzKt0K7)
2. Remove the custom code that specifically sets placeholders to Poppins (https://monosnap.com/file/7FuB7GuYO6JkwZuaMNLPkvNVCj1oOa).

As a result, the input text and placeholders will match and inherit the font from the “Text font” option in Theme Settings without any other customizations (https://monosnap.com/file/sx0qJ41LPD85gJJ3VO4VyGApzKt0K7).

Kind Regards

Thank you a lot for your help!

Hi,

As a follow up question, Is there a way to ensure my website’s text size remains consistent across all devices and browsers, even when users have adjusted their text size settings in the browser they are using? How can I prevent unwanted scaling and maintain a uniform appearance?

Thanks

Unfortunately, your question is not entirely clear to us and requires additional examples with a detailed description of the issue.

The only assumption we can make at this point is that your site zooms in when tapping on an input field. By default, this behavior is controlled in Theme Settings through the Viewport Tag settings. This option is located at:

Theme Settings → Other → Viewport Tag (https://monosnap.com/file/9hZEFa8dX7wLGYKN2thjxoXmcGB4uG)

By default, it is set to “Not scalable” to prevent zooming when interacting with input fields.

If your site still zooms in even when this option is disabled, the reason could be that your fullscreen search contains an HTML block with a custom HTML element inside. This element includes custom code that overrides the Viewport Tag settings and enables zooming when selecting an input field (screenshot https://monosnap.com/file/QR8rl4FS4nfcfNfttVdgI66I62NYAQ).

If this is the case, try removing your custom code and check if the issue is resolved.

Kind Regards

Hi,

This isn’t exactly what I was referring to. I’ve attached a video below to clarify.

For example, in Google, you can adjust the text size, and as you can see, if it’s not set to 100%, the website’s appearance worsens. Is there a way to ensure that, regardless of the text size users have set in their settings, the website’s text remains at the default size I’ve set in WordPress?

Thanks!

Attachments:

You must be logged in to view attached files.

Hi,

The browser zoom you are showing is part of the browser accessibility functionality. The purpose of browser zoom is to allow users to increase or decrease the size of web content for better readability and accessibility. It helps users with visual impairments and adjusts content for not-standard combinations of screen sizes and screen resolution. Browser zoom is controlled directly at the browser level without use of CSS, and unfortunately, this functionality cannot be completely overridden or disabled via CSS from within a WordPress theme.

Kind Regards

[accounts-1767]

Hi,

As a follow-up question regarding the search bar font, i again have problems with it, when I search for something, the font appears different from the ‘Caută postere’ placeholder text. Could I make them the same? If possible, could you make the changes yourself? And I think that there might be some problem in the advanced typography theme settings.

Thank you,

• This reply was modified 1 week, 2 days ago by accounts-1767.

[accounts-1767]

.

• This reply was modified 1 week, 2 days ago by accounts-1767.
• This reply was modified 1 week, 2 days ago by accounts-1767.

Hi,

The solution to the issue with different fonts for text and placeholders in input fields on your site was already provided in a previous response (https://xtemos.com/forums/topic/search-bar-display/#post-645816). We checked your site again and saw that you have already made all the necessary changes. At the time of our verification, the Poppins font was globally applied, and both text and placeholders in input fields were using the same font and looked identical.

We recorded a video (https://monosnap.com/file/QDtUwgLPqaumQG5S3Ryfbqip6cRUQW) from your site, where we insert the placeholder text into the input field to demonstrate that the same font is used in both cases.

We also recommend that you open your HTML Block used in the fullscreen search and completely remove the custom code that sets “font-family: ‘Poppins’, sans-serif;” for the body (https://monosnap.com/file/fftuPb2efGDccy1VEP4Uy9dzXSxluV) when the fullscreen search is opened. This custom code is unnecessary because the same font setting is already applied globally through Theme Settings. However, its presence alters the font of both text and placeholders in input fields when the search is opened.

If the font still appears different on your end, please try clearing your site cache, browser cache, or checking the page in an incognito tab. If you are referring to a different issue, please describe it in detail and provide screenshots or a video for clarification.

Kind Regards

[accounts-1767]

Hi,

As you can see in the images attached below below the font is not loading properly when you first enter the site. Only after i click on the search bar the text changes correctly to poppins.

Thank you

• This reply was modified 1 week, 2 days ago by accounts-1767.

Attachments:

You must be logged in to view attached files.

You may still be experiencing this issue as it turns out the Arial font is still being applied via your custom code inside one of the HTML Blocks on your site.

To resolve this problem, follow these steps:
1. Go to HTML Block Elementor #33766 (located fullscreen search). Select the HTML element, completely remove the line font-family: 'Poppins', sans-serif;, and save the changes. (Screenshot: https://monosnap.com/file/fftuPb2efGDccy1VEP4Uy9dzXSxluV)
2. Go to HTML Block Elementor #33759 (located on the homepage). Select the HTML element, completely remove the line font-family: Arial, sans-serif;, and save the changes. (Screenshot: https://monosnap.com/file/ImK6yhzMYAhaK2i9oDyLTJ4iI4LHQk)
3. Check for similar custom font code in other HTML Blocks and other areas of your site.

To prevent similar issues in the future:
• Avoid setting font-family on global wrappers such as html, body, or .wd-page-wrapper, as this can cause conflicts.
• Use only the typography options available in Theme Settings or in individual elements instead of adding custom font styles manually.

Kind Regards

Hi,

I removed those and checked other blocks, but now the “Caută postere” font on the homepage is displayed differently from the other pages. It should also be in Poppins. How can I fix this?

Thank you

Hi,

This issue is caused by your custom code, which overrides the body font to Arial. Unfortunately, since this code was not created by us, we cannot predict all the places where it has been applied on your site. In point 3 of our previous response, we suggested that similar code might be present in other HTML Blocks or other sections of your site.

Currently, in this specific case, the font issue in input fields on the homepage is caused by an HTML element in Elementor that contains similar custom code to the previous cases.

To fix this, follow these steps:
1. Open the Elementor editor on your homepage.
2. Find the HTML element causing this issue. It is located in the section named “Nu te-ai decis încă?”.
3. Select this HTML element and completely remove the line “font-family: Arial, sans-serif;” as shown in the screenshot https://monosnap.com/file/jVqXxLVk4ScWzhNSgwCeRiwcUW6IU0.
4. Check for similar custom font code in other HTML Blocks and other areas of your site if you notice the same issue elsewhere.

Kind Regards

[Author]

Posts