I am trying to solve the mobile usability error that says "Content wider than screen"
A video showing the same is: https://drive.google.com/file/d/19hv0TrEG7utIG8gskm0c98VBdBhNoI6l/view?usp=sharing
Sample page: https://askanydifference.com/difference-between-state-and-federal-prison/
I have tried a number of CSS and layout fixes but this error never goes away.
Now I want to see if ads are causing this layout issue. I am using WordPress CMS.
To further complicate this, the horizontal scrollbar doesn't always show up. This means sometimes, the page doesn't have content wider than the screen issue.
Can someone please take a look and advise the direction in which I need to move further while diagnosing this issue.
Thanks
It is probably because fix width of the container (text), by default containers are responsive. Remove fixed width and make width 100% or leave it there as it is.
Related
Got a strange layout problem on my website. This only occurred in responsive and only on an article page. On the start page everything is fine, but when i open an article and watch it on my phone or the responsive-emulator from chrome developer-tools, i can scroll to right.
I tryed to debug this, watch the dom-highlighter from the dev-tools but i cant find a reason why there its possible to scroll to right. The insepector shows me no margin or padding.
Startpage: https://pokefans.online
Article-Page: https://pokefans.online/artikel/kyogre-leichter-zu-fangen-mit-neustem-update/434/
Really appreciate for your help.
The one causing the issue is the .article_trainer_row, particularly the .article_traier_text as it has a fixed width of 335px.
Using width:100% should fix it. (maybe with a max-width so it doesn't go bananas on higher resolution)
My navbar overlaps/wraps to a second line when the screen resizes/reduces. This looks messy. I have used a toggle button for media devices, but this doesn't address the issue of when people resize the window.
There are two websites I can give an example of what I am hoping to achieve with my navbar/page:
https://www.facebook.com/
http://www.dailymail.co.uk/home/index.html
Note with both of these websites, that when the screen is resized, the page remains the same; although the window is reduced, nothing on the page is reduced. The navbar remains the same.
This is what I would like to achieve, but I'm not sure how?
And is it possible to achieve this with just the menu/navbar? Rather than making the whole website fixed in position?
All replies will be much appreciated!
Thanks!
John.
Try to style your navbar elements with display:table-cell and parent should be display:table.
Or you can go with flex.
I am having an issue which I just cannot seem to pinpoint with my code.
My page is located at seamonkeymedia.co.nz/secondary.php
The problem seems to only occur when the WINDOW HEIGHT is large, you can try it out by shrinking the height of the page and watching the gap below the navbar disappear.
Essentially I need that bottom bar to be fixed to the bottom of the window - almost like it would if this was an iPad app.
Any suggestions would be helpful. I have been playing around with paddings and margins on all container elements but that shouldn't really be the issue. I am all out of ideas here.
Because I am using boilerplate & respond - it is far easier to view my code in the Browser. Please forgive me if this is an issue.
You have a height of 15% set on the #footer element. That should be 88px since that's the size of your background image.
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
I have a layout of fixed-pixel width (960px) with a navigation bar that has five items in it. The width of the nav div is set to 100%, but its content ends up taking exactly 960px. The navigation is a bit complicated with a set of drop-downs and links. The problem is that zooming the page out at all causes the navigation bar to get clipped and move on to the next line.
Anyone have tips for how to avoid this?
Thanks a lot.
The only sure way I've found to do it is by defining all padding and widths using 'em'. This means everything will be relative to the font size and expand/contract smoothly as you change font sizes in the browser.
Here's a simple template I put together years ago that does the trick.
Since most browsers now zoom instead of only change font size, it's not as much of a concern, but older ones like IE6 still need a little help.