I have a strange problem, and I can't find the cause! I have the following webpage:
http://uk.translation-vocabulary.com/de-german
and the perceived width of the page is perhaps 300px greater than the width of the content. So a horizontal scrollbar is present even when the viewport is horizontally stretched to match the visible content.
I have been inspecting elements with Firebug, trying to find the culprit. No success so far.
This effect observed in Firefox, Safari, Chrome. Untested: IE.
Any help greatly appreciated!
Benjamin.
Two ways to diagnose the culprit.
Method A
Open the Chrome dev tools in the Elements tab.
Expand all elements under HTML by hovering over the triangle on the left, then Ctrl+Alt click (Windows) or Option click (Mac).
Hover your mouse over each element and see if it highlights inside the area on the webpage making it too wide.
Method B
Open the Chrome dev tools then hit Esc to open the console.
Paste in this code and hit Enter.
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
This will find all the elements in the page overhanging. Thanks to Chris Coyier https://css-tricks.com/findingfixing-unintended-body-overflow/
Your facebook button is causing this problem (removing the button makes the problem go away).
The facebook iframe has its width set to 575px via the style attribute, which is causing the page to be wider than 100%.
Note that you can add the CSS rule html,body{overflow-x: hidden;} to mask the problem, but instead, you should really fix that button.
Related
I am testing a free Bootstrap template, and I can't fix an issue that I've found with it: the Header element appears to be wider than the page content, and makes a scrollbar appear at the page, when viewed in a Mobile (400x283) viewport (in Chrome Developer Tools):
https://distracted-jepsen-8ac7db.netlify.app/
Template code: https://github.com/tonysepia/so-theme
I have gone through the following steps to investigate the problem:
Used the Element Selection tool in Developer tools to identify the exact element that is causing the page to grow wide:
The offender is within the <header> tag, as expected
However, none of the Styles that I disable in the Developer Console seem to be able to remove the scrollbar at the bottom of the page!
Questions: What is the next step in troubleshooting such problems, and how can I prevent the header from occupying this extra space and make it align with the page content, without breaking the Desktop view?
hi, i found the issue solution regarding the x axis scroll..its because testimonial slider's navigation buttons are outside the frame ...you can fix this using position:absolute;
One of the pages in my website is having an issue where the page is scrollable on x-position which results the content to be cutoff. Other pages on this website is fine except for this one. I've fiddled with the classes and margin but for some reason I can't get it right.
(Live preview on responsive mode [mobile phones]: http://hub.mymagic.my/idea/frontend/explore)
Need another eye for this. Any help is greatly appreciated.
using chrome's toggle device toolbar + inspect source code, i was able to trace this CSS line on frontend.css:
.cbp .cbp-item {
width: 350px;
...
...
...
}
It seems that this width is making the content to extend beyond the size of mobile browser thus making it appear to be scrollable. I guess you can play or override this value somewhere or replace it with max-width attribute.
I want to customize the body of the Wordpress Theme "attitude" in a way to remove the grey gap between the header (white space) and the top of the page. In other words, I want to remove exactly this grey gap and also the grey gap between the end of the body near the footer and the end of the site.
Here is a live demo of attitude: http://themehorse.com/preview/attitude/
Thank you very much in advance and please dont hesitate to contact me if there are any questions.
Best regards
From a quick look using the chrome dev tools, the header element seems to be the culprit. It appears they are applying a 30px top margin to it using the branding id selector.
#branding {
margin-top: 30px;
}
You can change this on line 549 of style.css.
Now for a lecture...
Not really, but I want to show you a few things to help you solve these types of problems in the future - It never huts to know more about the tools available to you.
You can open chrome dev tools by right clicking anywhere on the page and selecting Inspect element, or use the keyboard shortcut for your OS
In the very top left corner of the chrome dev tools panel that pops up there is a mouse pointer in a box symbol. If you click it to enable it and then move your mouse around the page you will see elements being highlighted in various colors.
Here we can see that the grey bar at the top has been highlighted in orange, and a large section below was highlighted in blue.
Clicking the left mouse button while the element is highlighted as above will jump to the element in the Elements tab of the inspection tools. We can see that the element we selected was a header, with an ID of branding
A quick scroll through the styles inspector on the right reveals a id selector for branding and a declaration to set the top margin to 30px. The inspecter is also kind enough to tell us where in the source code the rule comes from; style.css, line:549.
If we switch to the Source tab and open style.css in the inspector (or open the source code in a text editor) then we find the branding id selector on line 549 as promised.
For more information on how to explore webpages i recommend you read the dev tools guides for google chrome or mozilla (which ever browser you prefer to use most)
Firefox: https://developer.mozilla.org/en-US/docs/Tools
Google Chrome: https://developer.chrome.com/devtools
The reason the header is spaced off of the top by a little bit is because the header tag with the id 'branding' has the CSS property margin-top with the value 30px. This causes the header tag to be set 30px from the top of the screen. Just delete that line of CSS code to move the body to the top of the page.
I have encountered a strange bug using my OpenCart website in Chrome. The product images are not showing up but I see the white area where they should come.
If a product doesn't have an image it's aligned to the left but in this case I can see the white area where the picture normally is.
And here's the crazy part, if I click on inspect element, suddenly the image appears.
Some css code
.product-list .image {
float: left;
margin-right: 10px;
overflow: auto;
}
In the CSS you need to set the width and height attributes.
That is weird. Regardless, things to check:
Z-index: The outer box that surrounds the image might be "above" the image itself. Add z-index to the image with a value of 9999 to check
Position: if it's parent container or god knows what else has a weird position it could be affecting where the child element, in this case an image is appearing.
Disable JS - Javascript might be causing an issue here, try disabling it to check.
Also, when you use chrome dev tools, you are technically "hovering" on the image. And you say it suddenly appears. So I'd take a look at your :hover rules as they apply to images. A lot of sites will use a sprite technique that shows one image in normal state, and then shift the background to a different part of the same image on hover. Your normal state could be empty and the hover then moves the bkgd position to the image you want.
Let me know how this turns out.
More scenarios to replicate this issue
1. Close inspect if not already opened.
2. Resize inspect if already opened.
3. Resize browser window.
Just to follow up on this issue, Mary's answer is the correct one, but for our circumstances it was important not to set a width and height in order to maintain responsiveness. But apparently setting width and height to auto works just as well, even though it makes no difference in appearance.
So, since opening the Web Inspector resizes the page in some cases, you should look into:
resize handlers on JavaScript side that might be causing your images to show up
media queries that satisfy certain width and only show images then on CSS side
Picture element having media queries that
aren‘t covering the width you are viewing this with.
For me this was the Picture element having a gap in its media attribute definitions (<source media=(min-width: 1824px)">).
I'm sorry if the title is not very good, any suggestions are welcome.
The entire page is an iframe onto another website (in this case, jquery.com just for demo purposes). I have an overlay "Hello World", and if you click on the X it minimizes it (click again it will open it).
My issue in this case is that it covers the scrollbar on the right.
I assume the reason is I have a CSS positioning the sidebar at right:0, however since it's an iFrame it doesn't count the scrollbar.
What are my options for working around that?
I thought of giving it some extra space, but how do I know if the page really has a scrollbar, or how big the scrollbar is?
Is there a way to place the overlay at a position WITHIN the iframe instead?
There is no way to detect the remote page's height or even if a scrollbar is present or not. Your only option, besides moving the sidebar to the left, is detecting the browser's scrollbar width and permanently shifting the overlay off the right edge this amount.
yes. just set the right to 40 for example right: 40px;
There is an example here that shows you how to detect if an iframe has a scrollbar:
How can I detect a Scrollbar presence ( using Javascript ) in HTML iFrame?
And there is also an example here that measures the scrollbar width
http://4umi.com/web/javascript/scrollbar.php
Once you know these you can place your overlay however many pixels from the right