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)
Related
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.
I'm experiencing a problem with mobile devices I have a white area in the right of my website and a scroll bar also. So far that I have read this issue is creating cause of an element, but I can't find the solution on it. I have checked my CSS rules and my width is all good in every part. Can anyone suggest me anything else so I can fix that issue?I used the developer options and I was deleting elements to see what element is causing the problem but I didn't find something. My repo is : https://lazospap.github.io/LazPap/ . EDITED : https://github.com/LazosPap/LazPap here are the files
Please put this code in your style
html,body{overflow-x: hidden;}
I have built a website that works perfectly, but I am experience a very odd problem that I can not fix no matter how much I play with the code.
Each page in this site has a side-menu on the left. The following is an example:
http://mtschools.net/cadences
It works fine in full window viewing, but when you re-size the window to <= 768px, the side-menu moves to the center top (as it should), but the bottom link of the side-menu, in this case "Interrupted Cadence," stops working.
Does anybody know how to fix this?
Many Thanks.
I think you should put a higher z-index at the left-menubar div.
For example:
<div id="left-menubar" style="z-index: 99999;">
It worked when I tested on my Chrome.
I'm working on a project. There is an issue on the front end side. The site is responsive, but when I view it in mobile width (specially for iPhone 4 & 5), the vertical scroll doesn't work.
I'm not using any div that needs scrolling, the whole page is not scrolling vertically, I'm afraid I can't provide the code. The thing I wanna know is why does this happens? and what would I've possibly done wrong?
1) I have added -webkit-overflow-scrolling:touch on body tag but my chrome browser is not picking it up and saying invalid property.
2) I have added body{overflow-y:scroll,position:relative} Now its showing a scroll but there is no bar between the scroll, and its pretty much stuck there.
I think its because of position and z-index the z-index value make problem in your small screen.
Its possible that the element which have high z-index value. stopping you for scroll.
and It can be possible you have overflow:hidden in wrong place. It will be good, If you show some code of line or your site link.
I'm having a little trouble here: ..
Everything seems to work fine (had a small problem with the divs moving around when I resized the window but managed to fix it with a little help from the users of StackOverflow) but I have run into another problem now.
I'm using wordpress for this website with some modifications to a basic theme that I've made. Everything works fine except when you make the window quite small, the horizontal scrollbar appears but when you scroll the horizontal scroll bar you'll notice that the menu overlaps with the content.
How can I make it so that they don't overlap? I tried to make the position of the sidebar absolute instead of fixed, but the menu is supposed to stay there when I scroll vertically.
Not sure how I should go about this... any help would be appreciated!
Thanks!
As I said in my comment, you will need javascript to prevent the content div from overlapping the fixed menu
To point you in the right direction check out this
plugin on github .. its a great plugin using jQuery to accomplish pretty much exactly what you're after ..
Here is the working version using a small bit of jQuery, I hosted it so its easier for you to see:
The only change to the layout you need to make is to set the sidebar-primary div to left: 0; , it nudges that div very slightly to the left, but I think its worth it given that your original problem is solved with just a tiny bit of jQuery. Let me know if it works for your layout ..