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;
Related
I've created a static portfolio site for myself in GitHub Pages that is incredibly simple to keep maintenance easy. I have a 3-line title at the top of every page that acts as a navigation. However, I've somehow created a small (10 or so px) shift between the home page and all of the interior pages.
When I inspect the code in DevTools, I can see that the content for both pages is 600px wide with a 25px padding on either side of the content. The horizontal content margins are set to auto to center the main content block on each page, but on the interior pages, the margins are slightly different than the home page.
The home page - https://www.parkermyers.com
An interior page with a single img - https://www.parkermyers.com/about.html
An interior page with multiple img tags - https://parkermyers.com/nighttrain.html
Hopefully you can see that there is a shift in the margins when navigating from the home page to either of the two provided interior pages.
The furthest I've gotten in troubleshooting is that it's probably related to the img tag that is present on all interior pages but not the home page (could possibly be the surrounding figure tags as well). For example, on the /about page of the site, when I delete the lone img, the content margins shift a bit and realign with the home page.
So my best guess is that there's something to do with the width or size of the image that makes the content slightly larger and thus affects the margins, but I've messed around with the width to no success.
The comment that mentioned the scroll bar helped me troubleshoot more efficiently to find a solution for my problem! The issue was not directly the img tag, but the vertical space that the images took up meant that there was a scroll bar on the interior pages and not the home page.
After using that knowledge to dig further, I found that
body {
overflow-y: scroll
}
created a permanent space for the scrollbar whether it was being used or not. This solved my alignment issue! A small side effect is that the space for the scroll bar is not invisible when not being used, but it's a small price to pay for consistent alignment.
I have an browser app that dynamically shows content that can be shorter or longer than the available screen size.
On desktop browsers, this causes vertical scrollbar to appear/disappear, which makes the content "jump" left and right.
To avoid this, I add style="overflow-y: scroll" to the body tag, which forces the scrollbar to always display - the scrollbar is just disabled if the content is shorter than the screen.
The problem comes when I use the material-ui SwipeableDrawer component to show a sliding option menu. Viewing the DOM in the browser inspector, it seems material-ui actively removes my overflow-y styling on the body tag when it shows the menu, but then doesn't put it back when it removes the menu.
Example app published on Netlify
Source code
The screen-shot below shows the content is stable at first when the disabled scrollbar is visible, then shows the content jumping left/right after the menu has been displayed.
This only happens on desktop, reproduced with both Chrome and Firefox. It doesn't happen on mobile (iOS, for example) because the scrollbar on mobile devices is displayed "on top" of the content.
I don't want to track what material-ui is doing and add/remove padding - I'm pretty sure material-ui does this behaviour for other components as well (poppers, tooltips, etc.) Tracking all those components and fiddling with padding will be error-prone (not to mention tedious).
Can I somehow make the vertical scrollbar display "on top" of the content like it does in a mobile browser? I'd have to add padding to make sure nothing gets obscured, but at least it'd be static - so once the problem is fixed it'll stay fixed.
One possible workaround is to disable the scroll lock:
<SwipeableDrawer disableScrollLock={true} ... >
A downside of this is that you'll have to remember to do this everywhere you use any material-ui component that has the disableScrolllock functionality - so that means everywhere you use popovers, popups, etc.
But you can override the default props for components. The following worked for SwipableDrawer (because Drawer extends Modal):
export const theme = createMuiTheme({
props: {
MuiModal: {
disableScrollLock: true,
},
},
});
Note: the disableScrollLock setting appears to not be needed anymore with mui (i.e. material-ui version 5) - but you do still need to set style="overflow-y: scroll" in your root body element or somewhere similar.
One possible workaround is to
make the vertical scrollbar display "on top"
by setting the width of the body to the full view:
<body style="width: 100vw;">
This means the body element will extend all the way "underneath" the scrollbar (same as how it works on mobile browsers).
A downside of this is that content that appears on the right hand side of the screen may be obstructed by the scrollbar.
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.
The menu of the following website https://www.thedegreetracker.com/ has the following issue. The menu seems to be wider than the rest of the page. This is causing a horizontal scroll bar appear at the bottom of my browser's window. When one scrolls over (or maximizes the browser page on a very wide computer screen), it causes other parts of the page, such as the banner and the footer, to disappear when you scroll over.
By way of contrast, the following page does not have the same problem: https://www.thedegreetracker.com/about_us. This second page is how I want the first one to work in terms of the banner and footer resizing correctly, and no horizontal scroll.
As far as I can tell, the HTML and CSS code between the two pages is nearly identical. The differences I have found don't seem to make a difference. I have spent hours trying to figure out what is causing this issue and I am now asking for fresh eyes. I'm using Bootstrap 3 and Laravel, for what it's worth.
I'm hoping this is an easy fix that I'm just missing. You'll probably have more luck using Chrome Dev Tools on the actual web pages to figure this one out, but below is the HTML for both pages. As far as I can tell, the CSS is exactly the same for both pages.
Here's the code from the broken page with the wide menu and horizontal scrolling
view-source:https://www.thedegreetracker.com/login
Here's the code from the page with the menu, banner and footer that work correctly
view-source:https://www.thedegreetracker.com/about_us
The problem is the within the form, not the menu. You have wrongly used the container class (reserved by Bootstrap for setting width of page) inside your form.
Also, your form has a class of .container but you're overwriting the max-width property. This will likely cause responsiveness problems. Try not to touch width, max-width and min-width on classes that a framework uses for setting the width of content and layout, in general. If you must, use an inner-container.
Getting back to your problem, you should have probably used no class at all for your containers inside the form. As a rule of thumb, try to use class names that do not collide with the class names of your framework.
To fix your issue, either remove container from inside your form or, as a general patch for this type of error, add this CSS:
.container .container {
width: initial;
}
If you go on to my website, lookaroundyou.net and click on USA (which is where there are more video's than anywhere else on the site), the websites layout changes completely.
Does anyone have an idea as to why this happens?
I don't want to visit your site if it's crashing Firefox, but if the problem is indeed due to more content causing a scrollbar to show up and thus changing your page width, one easy way to sort that is to always display a scrollbar (it will be disabled if there is not extra content below). In this way, the width of the page will be the same regardless of length.
<style type="text/css">
html { overflow-y: scroll; }
</style>
I'm sure there's some other non-standard setting with IE that will do the same; that's left as an exercise for you.
It's causing a scrollbar because there are more videos.
I'm using chrome and I don't see any difference other than the page shifts when the scrollbar on the right appears.....