Unable to fix error Google Mobile Usability > Content wider than screen in Google Search Console. I have try chrome mobile layout emulator from DevTools, set width to 320px but no horizontal scroll appears. So, all looks fine in emulator but google raises error. Then, I have add to css:
#media screen {
html, body {
width: 100%;
overflow-x: hidden;
}...
But no effect, error still persist.
Test Live URL tool don't show any error, all pages mobile friendly.
Any idea how to fix this? I'm sure this is google bug, but how to avoid it?
I have remove all "position: absolute" from classes, doesn't matter if absolute element fits on small screen fine. But that classes were assigned to hidden content what fit fine on smallest smartphone screen, also most of them were not connected to any page element, because elements were password protected.
I found a way to quicker render pages, not waiting long time after clicking "request indexing". First create new page, using site template and css, text on page should be unique(Lorem Ipsum Generator help with that). Second, create one more sitemap file with only one url pointing to new file, submit it and in a 5 minutes you'll have crawled and indexed page. That helps a lot while searching a bug in template or css.
Edit:
Since removing absolute position broke UI design, I set it back with javascript.
Check in real devices instead of emulator. Delete every section and check iteratively, you will understand which one is causing horizontal scroll
Related
as Im making my new React Web App, I noticed when open on an Iphone, if the user drags horizontally it renders some blank space and makes the website functionality awfull, for androids though, this doesnt happen, do you guys have any hints?
My website URL-
https://werepairsuporte.com.pt/
PS- I dont have a SSL certificate yet as my website is not fully ready, hope you can understand that.
The problem is that one of your elements is wider than the viewport of the iphone, using the console delete elements one by one til you find the offending one then use breakpoints to amend the width.
either to just add this to your css.
body {
overflow-x: none
}
My image grid on my Wordpress site for some reason does not resize fully to the max-width of the browser when I click an internal link to the homepage (eg. I click on an image then click back on the logo). It goes back to fullscreen when I resize the browser. It also works fine if I go into my website externally (from typing in the url). I have tried using:
#site {
max-width: !important;
}
but doesn't work. I'm not sure if if it is the theme that is the issue or one of my custom css. I have tried isolating some css with the inspector tool and seeing if any of them caused the problem but I couldn't find anything.
Unfortunately I don't have access to the full backend of the theme and I'm not a developer.
So if anyone has any idea that would be great!
Link is http://imconniehuang.com/
Your image gallery's width is calculated and set by Javascript. Have a look at the surrounding div.vc_row, the width is set inline there. So no point in using CSS here. Seems like the script waits for a resize event to recalculate the gallery's width.
The prefix vc_row indicates that you are using Visual Composer. I think the problem is with this plugin. I therefore recommend getting support from the plugin provider-
BTW:
max-width: !important; is not valid syntax. 'max-width' sets the maximum width of an element. You can have a look at the syntax here.
I'm currently working on a html email for various clients, and having some strange issues using gmail (yay) - specifically, when viewing an email through the browser. (No issues in the app)
The issue only really comes about when using the browser on a small screen (eg mobile) - all the images are displaying too wide, despite a max-width, meaning the layout is stretched and requires horizontal scrolling. Whilst it causes no issues on desktop, the same thing happens to the code
On my images, I've set
style="max-width:100% !important;"
inline on each image. I also have a <style> block in the head with
img {max-width: 100% !important;}
When inspecting the image element (both on my phone and pc), I'm seeing no sign of the max-width from the head, which is not totally unexpected.
What's weird is that each image still has a max-width set inline- BUT it is no longer in %, but in px.
Inspected in the pc browser, the inline max-width now says
max-width: 1920px;
Viewed on my phone (android, inline max-width is
max-width: 767px;
In this case, the image is now WAY too wide and is breaking the layout. The same thing happens on all images, regardless of their actual size.
I'm not seeing any message telling me that the email has been adapted for my screen, or any option to turn this on or off.
Has anyone had this happen before? Any ideas on how to prevent gmail messing with the max-width, or getting it to respect the max-width in the head? (I've avoided using classes or id's to attach styles from the head as as far as I know, google strips these out)
Even weirder (or maybe I'm losing it...) I'm SURE this was working yesterday...
UPDATE: think I've solved why it was apparently working yesterday - it wasn't - changes I'd made in dev tools weren't clearing when I reloaded, so the max-width I'd added in as a test (replicating a max-width in the head) was still there...
After a bit more playing, adding width: 100% !important; inline on all wide images seems to work as a fix - gmail doesn't mess with the value. Would still be interesting to know why it changes the value of the max-width though, if anyone has any clues!
Gmail is notorious for misusing its maxwidths for set layouts.
try and avoid setting max-width to a percentage value for elements that aren't high level containers. you will run into weird rendering on things like gmail app as well. typically gmail app converts all widths into max-widths so it can crunch your content but still maintain the structure at higher screen resolutions.
gmail webapp does something similar. it restricts the widths you can set an element to so you can't add things that are wider than your display, at which the gmail web app is displaying at 100%.
gmail mobile app - forces your content into a 320px/480px wide box
gmail desktop app - forces your content to never exceed your screen res
Gmail desktop treats styles in the head quite strange anyway, it completely ignores most classes/id's (don't listen to people that say it strips them completely) if you use other tags as identifiers other than #id and .class it will apply those styles. e.g.
* [lang~="identifier"]
lang is pretty much the only tag that you can use that wont get in the way of tags that are being used, i.e. Alt, Title and Href.
Just be careful, if you are using media queries or anything that starts with "#" in the style tag gmail may potentially (depends on how its feeling that day) completely remove that style tag. You can avoid this by adding those styles in a style tag in the body though.
in conclusion. Don't rely on max-width to control your layout from inside out, set pixel values to limit width="100%".
Hope this helps
I have a problem with a theme in drupal. The documentation says it is responsive but when I check it on a mobile, although it resizes everything, it also creates an empty space on the right side of the page. I really don't understand why.
http://nexus.techsaran.com/ This is a link for the demo of the theme when you use the emulator in chrome to see it like if you were on a mobile it creates the empty space and it also does it when you check the link directly from your phone
Thanks
This caused by your adsense div.
Try to generate responsive ads from your adsense account or add this code to your css :
.adsense {
width: 100% !important;
}
Im makin' a mobile website for a friend - and im using media queries to adjust her website for a more mobile feeling when watching it on any smartphone.
Feels like im done with the webpage - but when i view it on my phones iphone 3gs and htc incredbile S its like that you can scroll 2-3 pixels horizontally.
Some element is messing with this and im growing gray hair since i can't really find out which it is.
how do i solve this?
webpage link
http://www.linaahlen.se/
Had a quick look with the inspector in Chrome and it looks like it's this property:
div.entry {
padding: 0em 1em;
}
Line 106 of style-responsive.css - it's pushing the content just a few pixels wide, changing it to be padding: 0 0.8em; worked for me.
Oh, and just for the record, it's scrolling horizontally, not vertically!
Late, but for future reference.
I would like to point out the way to go searching the cause for the problem.
Open the site using Google Chrome Device Mode. Then check to see that the problem exists there (this solution relies on the problem to show up in the Device mode). Then start setting "display: none" to the elements one by one starting from larger elements like header, content container and check after hiding each element if the unwanted scrollability has dissapeared. This way you can track down the cause of the problem.
I had the same problem and tried to identify the cause at first by looking at the CSS code of every single element, wasted a lot of time and didn't find the cause. Probably a browser can render a page better that a human reading CSS...