Insights says that this touch elements are not sized appropriately. How could I correct it without breaking the blog theme? The CSS sheet is at this link: https://www.fotov60.com/wp-content/themes/fotov60/style.css?ver=4.4
Well for starters, i’d replace that javascript in the search box with a proper placeholder. (All of the major browsers have had support for placeholder since at least 2012…)
Instead of linking to the CSS, which we would get anyway, why not link us to the page where these problems are reported?
Because the problem occurs on all pages of the blog in the mobile view, as it is a menu element of that web view. I thought it was more useful to link to the CSS sheet where they can possibly find the settings related to this element since media queries are used according to the screen size and thus avoid the version optimized by the Litespeedcache plugin that messes up the CSS content making it difficult to search, and I don’t just limit myself to leaving a link to the homepage of my blog. If I was wrong in my reasoning, I apologize.
Your CSS file is 2500 lines long and contains CSS for all parts of the site, for which we have no context of the HTML structure of, so we dont know if an element above the target element is applying some rule.
Show us the actual page, in situ, and the Document Inspector can make our search for the problem as simple as a right click…
This is the main page (in mobile view, where the issue occurs) and where you can use the Document Inspector. https://www.fotov60.com
So it’s complaining that the button overlaps the search box. Which makes sense, because they are sibling elements, not containers, and you’ve overlaid them on top of each other.
Is there any reason these elements shouldnt be side-by-side?
I’m not entirely sure, as someone else who I no longer have contact with took care of it. I interpret that it is placed like this so that it is identified as the button that initiates the search entered in the box below. And perhaps also to save space on small screens, where the search tool and the menu button would be so close together that they would appear as a single line. In any case, can it be fixed?
Well you tell me. The problem that Insights is reporting to you is that the search box and the magnifying glass button are on top of each other. What solution, if any, do you want to implement?
Is there any way to overlay them as they are visually now and not have that error? The simple solution would be to put them side by side, but in smaller screen sizes it would get stuck to the menu pencil and visually would be confusing. The idea is to have that search box, which was built for me by overlaying the two images so that it appears to be a single image where you can enter the search term and click the magnifying glass to search.
The error reported to you is that the elements should have space around them and not overlap other elements.
You want to overlap them.
So you just… ignore the message.
Its not possible to merge theme in a unique item by some way?
How do you propose a browser merge a textbox and a button, while keeping the functionality of both?
I dont know, that’s why I’m asking if it’s possible somehow.