Overflow-y not working with wrapper mobile [closed] - css

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
On the mobile version of the website, you can scroll to the right to the navigation, which should actually only be accessible via click. How can this be changed?
(URL removed)
I have already tried many different solutions that I have found, but nothing works so far.
I am looking for help in this individual case.
Thank you very much :)

By moving your .main-nav element with transform to the right you extend width of the visible content, and since your scroll properties are default it will enable you to scroll the entire visible content, including that menu.
What you want to do is clip everything that is outside of your html or body element.
CSS
html {
overflow-x: hidden;
}

Related

CSS drop down menu appearing behind an image [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
On chrome the drop down menu appears behind the top most image at this page I am playing with.
http://www.audiobookreviews.com/genre2.php
I messed with the z-axis and set all z-axis for the menu to 999, then also tried making the image bigger/smaller but still happens.
Replace center tag with section since center is obsolete. You need to set your element's z-index in such a way that element that has to appear on top has higher value of it. Something like this:
.w3-dropdown-content {
z-index: 999;
}
section {
z-index: 1;
}
P.S. I know you provided a link to your website but it's more useful to have a certain chunk of code you are refering to posted here.

Unexpected margin/padding on the right side of my website [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I am using vuejs and bootstrap framework for my website; however, there is a white space on the right hand side of the entire website which I do not know how to get rid of. I try to eliminate the margin or padding, but nothing works. Please help.
Testing website link
This (as mentioned) has nothing to do with VueJs. You seem to have several elements that extend the width. One quick way you can fix that is using this css
#app {
overflow-x: hidden;
}

IE 11 issue with Flex [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I've been looking through here and other forums, trying to fix this IE bug with no luck. Basically, the gray buttons below "FIND THE RIGHT TOOL" (using "cards" in Zurb Foundation, with the Flex grid) are displaying oddly in IE11--as if they have no width set:
http://www.mindtools.io
Here's how it's rendering in IE11: http://imgur.com/a/VwWIl
Any help would be greatly appreciated--thank you!
I can get the "cards" to be the right width by setting #find-a-prog to width 100% and .disorder to width: 100%. But there are other issues in my view of IE too, like the button bumping up into the cards and the #find-a-prog aligning to the right of the startchange div.
EDIT: corrected a mistake. Also I would suggest making the hero container display block and centering the items in it a different way, maybe with margin: 0 auto;

one class seems to block visibility of another? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I'm using the Semplice theme on a self-hosted Wordpress-site and have a problem with displaying the sub-menu.
I have only quite poor css-knowledge, but after hours of try & error I have managed to make the disabled sub-menu re-appear again - at least it shows up partly. According to the visual overlay of my browser the sub-menu items are there, but only one of them gets displayed, the rest seem to be blocked by a different class!?
I've attached a screenshot to show you what I mean?!
The submenu (vertical drowdown) sits under "units" and has six sub-nav items, but only one gets displayed, the others seem to be be hidden by the (hidden) responsive menu?!
I've tried the z-index but to no avail and now I'm really lost. I would greatly appreciate any help with this! Here's the site I'm working on:
http://s363619762.online.de/
You have the following style:
.navbar-inner {
height: 131px;
overflow: hidden;
}
Remove the overflow: hidden; and it should work (This is just a solution for the current problem, don't know it it affects other places)

sidebar is hanging over page wrapper tag [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
In my attempt to be terribly clever and have my #secondary sidebar sit on top of the slideshow on my homepage, I have somehow made the area dangle over the #wrapper on all the secondary pages. Have added a removed a whole bunch of div tags, nudged things around and tried everything else I can think of. Anyone have a suggestion how to fix this?
This is the homepage: http://emgraphics.net/joyful/ and the sidebar dangles on any other page (the shame!) Thanks!
You won't have a problem once you add content to those pages, though. Not sure what the issue is. An absolutely positioned element is taken out of the document flow, so the wrapper will not take any notice of the sidebar. You could alternatively float it and give it a negative top margin on the home page.

Resources