Usability problems in Search Console

Support
#1

Hi,

I need to solve usability problems in Search Console.

For example, for this page: https://mensandbeauty.com/como-cuidar-la-barba

It says that the elements are to near from each other and that the content is wider than the screen.

How do I fix this?.

#2

One more image to show the problem

#3

Hi @ignaciosantiago,

That means you have content larger than the width of mobile, but I checked and there is none. I even checked it here https://search.google.com/test/mobile-friendly?id=dQ2pgNc6dASZb2xqF1ScjA and it says mobile friendly.

But maybe your site is blocking access to some resources and the google-bot can’t properly render it. Please check this https://support.google.com/webmasters/answer/2387297?hl=en, https://productforums.google.com/forum/#!topic/webmasters/MvMc2idOO28

Thanks!

#4

This is what I see

It seems I am not blocking anything important…

This is my robots.txt: https://mensandbeauty.com/robots.txt

#5

Hey Ignacio,

The issue is most probably because of the menu buttons.

They’re minimum width in combination is 400px because of the there are 5 of them each with 80px min-width.

Please try hiding that container using the Hide During Breakpoints feature and check if the issue persists. If it’s fixed, display a Navigation Collapsed element to replace those buttons in mobile view.

If the issue persist, there could be other areas on your site that are non-responsive or having px based widths. In that case, I’d recommend that you duplicate your header, content and footer and load them up in a test page then remove elements one by one to narrow down and see what’s causing the issue.

Thanks.

#6

Hi and thanks.

I am already hiding that container using the Hide During Breakpoints feature

I am trying with another setup (collapse menu), but it should work the way it is.

Other thing are the breadcrumbs, they don´t adjust in mobile view. Try to view this page https://mensandbeauty.com/cosmetica-para-hombres from mobile to see what I am talking about please.

#7

Also, I am trying to make the mobile menu sticky and a little transparent (when I scroll).

I apply the transparent with a rgba(255, 255, 255, 0.85) background, but when you load the page it should be white (and when you begin scrolling it should turn transparent).

Do i explain myself?

#8

Hi @ignaciosantiago,

Sure, it’s doable. In the header where setting HIDE DURING BREAKPOINT is available, please click the Element CSS just under it. Then please add this CSS

$el.x-bar-fixed {
background: rgba(255, 255, 255, 0.85) !important;
}

Hope this helps.

#9

Thanks!!! What about the breadcrumbs?

#10

Hello @ignaciosantiago,

The breadcrumb is too wide for smaller screens, You will need to enable the content scrolling in the bar settings so that you can scroll into the breadcrumbs as the screen gets smaller and smaller.

Hope this helps. Please let us know how it goes.

#11

I had activate that option, and nothing happens

#12

Hello @ignaciosantiago,

Content scrolling will allow you to scroll in the breadcrumb area. It does not collapse or modify the display of the breadcrumbs in smaller screen. You might need hide breadcrumb element in the smaller screens if you do not want to display the long breadcrumbs as it does not have a mobile version. Meanwhile, I will report to our developers as a bug so that they may be able to add a mobile version or allow the breadcrumb element to collapsed version of the breadcrumb.

Thank you for your understanding.

#13

Ok thanks, that will help. I do like how they show in mobile…

#14

You are most welcome. :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.