Having a hard time figuring out why my website scrolls way left in the mobile version!
I have checked all of my widths and even tried some suggestion on here but the site still scrolls to the right of the screen! Made sure common viewport code is in the head tag but to no avail. This is a WordPress site based on the twentysixteen theme
There should be no scrolling left or right on the mobile version of my site.
I've been debugging other css issues and this problem is becoming a major headache. Any clue as to what may be causing this width issue with the mobile css?
https://phoenixim.com/liveinhomecare/
CSS Style Sheet
https://phoenixim.com/liveinhomecare/wp-content/themes/twentysixteen/style.css?ver=5.2.2
Your problem comes from:
.banner {
margin: 0 -600rem;
padding: 0.25rem 600rem;
}
This code tries to break out of the container using the negative margin/padding trick. To fix this, try:
#main {
overflow: hidden;
}
Related
So an old friend of mine who knows nothing about programming asked for help with his site. someone has built it for him long ago, here it is - http://challengetours.org/
The problem is with the site's width.
As you can see there is a scroll bar at the bottom of the site, which leads to a huge empty space.
There is no problem with that in particular, but when you open the site on mobile it's zoomed-out to see the whole site including the empty area.
what would be the easiest way to solve this ? I have some background but I've never used WP/JS/PHP/CSS :)
Thanks,
Itai
If WebElaine's comment above doesn't work, you can do the following.
You have two elements setting rules in the CSS:
Your div with id ___plusone_0 has an inline style set to "left: -10000px;".
Your iframe with the id st_gdpr_iframe has an inline style rule of "left: -5000px;".
Removing these two styles gets rid of the scrollbar.
If you are using Wordpress but aren't too familiar with it, you can add your own CSS IDs allowing you to target these elements and override the inline styles if there's an issue with the Wordpress theme itself that you can't otherwise access.
For example:
#st_gdpr_iframe{
left: 0px;
}
#smthemes_share .inner{
left: 0px;
}
As the title says, the website is scrolling to the right when there is no content there.
I can only recreate this when using it on an actual mobile device.
Currently working on transferring it over, that's why the link is currently like that.
http://georgecohen-co-uk.php5.hostingweb.co.uk/
If anyone could help it would be greatly appreciated!
It may be a problem with animations? Maybe div which is sliding on the load expand ur page in horizontal.
Learn more about animations.
Or in CSS add
html, body {
margin: 0 auto;
padding: 0;
width: 100%;
overflow-x: hidden;
}
Please try this
overflow-x:hidden;
It might fix your problem
Try coloring your divs and /or respective borders so you can track down the issue. I would maybe use firebug or other equivalent plugin/ embedded browser tool
I've more or less finished a simple bootstrap site for a client, however I ran into an issue where the body element seems to have an extra 160px on the right side! I've spent like 3 hours already trying to find an answer.
To partially solve this problem I added the below css to the head:
html, body { overflow-x: hidden;}
This got rid of the extra 160px however on mobile devices (only tested iOS) the scrolling action is now incredibly sticky - rather than the fluid scroll we expect on a mobile device. Instead of one fast flick of the finger making the page continue scrolling, now when the finger leaves the screen the page stops dead.
In terms of user experience this isn't really acceptable and has been a real pain to try and solve.
I've put the site here for you to try on a mobile to feel the 'stickyness' goo.gl/yEI3rn
On desktop you can use inspector to disable the overflow-x:hidden; on the body to see the extra pixels on the right.
If anyone can investigate the site and tell me any one of the following it would be very useful:
Which element in the body is causing the body to have the extra width?
Why the body element has the excess width?
Is there an alternative to overflow-x that will not create mobile scrolling issues?
Any other areas to investigate to try and solve this issue?
Thanks so much for any insight here!
you can try adding this to your css to see which element goes all the way:
* {
outline: 1px solid right;
}
I'm new to web development, so maybe this is an easy issue to resolve, but currently I'm stumped.
I'm making this website - http://www.astranavis.com, and can't get the browser scrollbar to work. (I don't want to have to insert it into the globalContainer div tag, I want the scrollbar to automatically appear in the browser if the browser window is minimized).
I've tried inserting overflow-y:scroll into the body tag in css, and while it creates the actual scrollbar in the browser, it doesn't actually scroll.
Thank you for your help!
Your problem is the position: fixed; in your global container. the way you're centering it is.. strange to say the least. Instead, use margin: 0 auto; to center it horizontally. Also, get rid of the negative margin.
I am working on a site. The problem page in question is here:
http://bit.ly/I4YR2T
Currently I have the images in a table. I am also using Shadowbox for these images.
When I minimize the browser window in Chrome and Safari, the images scale down nicely.
However, the images are not scaling down nicely when I minimize the window in Firefox.
This page has the most images and is the most troubling, though I notice that the site as a whole does not scale down as nicely in Firefox as it does in Chrome & Safari. I have not yet checked IE.
I know this must be due to some shoddy CSS on my part.
Can anyone guide me on how to resolve this problem?
Thank you so much!
see this answer "Max-width does not apply to inline elements so you will get inconsistent behaviour cross browser...you may achieve it if you set div img { display:block } and then align the img... tags with floats instead of standard inline." That probably means getting rid of your table or setting the table cells to display as block.
Had same problem with Firefox. I got it to work in Chrome but Firefox wouldn’t display the code. So here is what I did:
/* begin HeaderObject */
.banner-img {
display: block;
margin: 0 auto;
max-width: 99%;
left: 50%;
}
/* end HeaderObject */
I changed the max-width to 99% and it displayed correctly and resized correctly. The header object was placed inside the header on the CSS, so by chance I tested to see if I could get it to work with a smaller width, as it was “nested” inside the header. Then I added the left: 50%; code because I wanted my image to display centered. Working great now.