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 don't want a width-scrolling bar on my website and wanted to know if you know whats causing it and how to fix it(code).
I already tried this:
html, body {
max-width: 100%;
overflow-x: hidden;
}
Your div row bg-about have css margin-right: -15px just wrap the row bg-about in another div .container-fluid and everthing will works fine.
Tip.
You shoul always wrap row inside container, container-fluid or col-*-*
The reason is this rule in your CSS:
.row {
margin-right: -15px;
margin-left: -15px;
}
It adds 30px the 100% width of .row
remove it...
Your div with class row bg-about has a margin-right of -15px which causes your page to be larger than 100%.
Just remove the row class from this div and the problem should disappear.
Related
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
So I'm developing a web page and the top section of this page has a tiny column in the right side, and to the left of it an image which is occupying the rest of the section and causing my problem.
The issue is that the image extends beyond the device's screen size missing up the layout of the page. Now I don't want to resize it to fit, but rather crop the extra width from the image according the screen size, so that it look the same but you can't horizontally scroll through the page which is what I'm experiencing right now.
I don't really know if that makes sense but if you have any idea on how to solve this please write it here and I will try it.
To crop the image without resizing it you have to apply overflow: hidden; to the parent element.
To counter the padding of the parent element you have to set a negative margin that equals the padding of the parent.
div {
padding: 20px;
overflow: hidden;
}
img {
margin: -20px;
}
/* for demonstration purpose only */
div {
border: 1px solid red;
}
img {
display: block;
}
<div>
<img src="https://via.placeholder.com/900x200.jpg">
</div>
You change your img tag for a div with background of the img (I suppose you have img tag, you didn't specify). The div then won't exceed the boundaries regardless the img inside it.
<div id="img"></div>
<style>
#img {
background: url("your img");
}
</style>
// Use this instead of <img src="your img">
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 working on a theme which has a dynamic menu when we scroll it goes hide. I want to fix it on the top just like w3school website. Any idea?
Is it a good option to use a plugin like Sticky menu
Here is the website link
https://spaceunlimited.in/
CSS
.ehf-header #masthead {
z-index: 30;
position: relative;
}
When using the following for masthead you can keep the brown borders on the side.
#masthead {
z-index: 30;
position: fixed;
background: whitesmoke;
top: 0;
left: 20px;
max-width: calc(100% - 40px);
}
Add this css
.ehf-header .headroom--unpinned{
position:fixed !important;
top:0px;
}
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'm using a mobile first approach to create a responsive website. I'm currently working on my navigation menu and I'm satisfied with it on mobile (though it's far from perfect). However, when styling my navigation menu for web use I'm not able to position my dropdown content below the element in my menu. It's currently popping up in the upper left corner.
I'm using jQuery to create my clickable menu (don't know if that's relevant).
I also experience a bug on mobile where i cannot close the dropdown after opening it again. If anyone has an answer for that too, that would be great but I'm satisfied with it for now.
Any help is greatly appreciated, thank you :)
Not a perfect example, but you are best off removing your use of floating and replacing with a display led approach.
Something along these lines:
#media only screen and (min-width: 900px) {
nav > a, .dropNav, nav > div {
display: inline;
position: relative;
}
.dropList {
left: 0;
right: 0;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
padding-left: 0;
}
}
Example: https://jsfiddle.net/davcpas123/mjukghz6/1/
This will achieve something similar to this:
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I´m using this tumblr theme:
http://flataura.tumblr.com/
And I want the slide menu at the right of the text "Flaty" that opens when you click on it, to be always opened. Is there any solution for this?
Here is the javascript of that slide:
http://static.tumblr.com/ssdtkch/gT6nanpl7/pageslide.js
Thanks!
Seeing from a comment that you are familiar enough to edit the CSS. Add this to the bottom of your CSS and it should show the menu AND hide the button that animates the show/hide:
body {
margin-left: 281px;
}
div#side {
display: block !important;
left: 0;
right: auto;
position: fixed;
top: 0;
height: 100%;
z-index: 1000000;
overflow-y: scroll;
width: 280px;
background-color: rgba(33,63,82, 0.93);
border-right: 1px solid #213f52;
}
a.open-sidebar.nav-button {
display: none;
}
Yes, there are ways to do this. But since it doesn't seem like you're very familiar with websites, the solution is too complicated via StackOverflow. Let me know if you would like to get in contact, and I can walk you through this.
In a nutshell, the #side element contains that left bit, but is always hidden. The #pageslide element is what gets shown, and as soon as you click the first time, the contents of #side get cloned into #pageslide. Then, jQuery (Javascript) is used to animate the transition, introducing a margin to your entire body element.
All of this can be overridden, but it is several steps. If you know a web developer, that information above should get them started. Otherwise, let me know if you want to get in contact.
Good luck!
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 creating a "sketchpad" mini-project. Most features are working so far, but I'm having one issue. The sketchpad uses a 16x16 grid by default. When I fill in the bottom row of the grid, you can still see a tiny white line. I have no idea where it could be coming from.
This is an image of the issue I mentioned above
Here is the code: JSFIDDLE
#grid {
height: 450px;
width: 450px;
margin: 10px auto;
background-color: #fff;
display: block;
overflow: hidden;
font-size: 0;
}