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 2 years ago.
Improve this question
when ı set the position: fixed; div is disappearing so what can ı do
Before code
Before Page
After code After page
I think I know what happens, for what I can see from the screenshots.
Why?
This happens because when you set a element 'fixed', their position is not relative to their parent any more. It is relative to the html document. You could also say it is taken out of the 'normal' content/document flow.
Since I miss some information on what you would like to achieve, a suggestion is using the value 'sticky' in the property 'position'. This will keep it inside the flow of the document and is 'fixed' relative to their parent. IF you want to achieve this and I would suggest reading into it because using it can be tricky.
Example:
.container {
width: 100%;
height: 90rem;
}
.container-child {
position: sticky;
top: 0; /* Needed, because this way you'll let the browser know when to get sticky when the viewport(top) of the user 'touches' the element. */
}
Source: MDN position: sticky
Beware that the browser support is limited or quirky in some browsers.
I would also suggest setting a codepen example for your problems with a description of the expected behavior. That makes it easier to understand and replicate your issue. ;) https://codepen.io/
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 4 years ago.
Improve this question
I need some help here. My final project is due tomorrow and the mobile responsive view of the app is completely off. I don't know how else to explain it other than just giving you the link to the URL.
https://venpresath.github.io/FinalProject/#!/home
It appears that the animation that I put onto the spinning record is making the width of the screen larger than the background is.
I tried overflow: Hidden; but it didn't correct the issue.
One work around is to hide the overflow of the record, something like:
.homeContent{
overflow-x: hidden;
position: relative;
}
Try placing overflow: hidden; directly on the body tag, this should ensure that whatever happens in the content the body shouldn't scroll horizontally.
you can use transform scale and transform origin css. please add below css. this is the demo http://recordit.co/UK63B2vKiR
.homeContent{transform: scale(.8, .8);}
body{background: darkslateblue!Important; overflow-x: hidden;}
*{max-width:100vw;}
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
On this website I would like to fit the picture for the entire div width.
(If you scroll down you'll see the blog section)
As you can see from the picture there are some white space on left and right.
How can I achieve this?
Note: I can't edit the HTML structure of the website. I can only work via CSS or JS.
Many many thanks
You only have a max-width: 100%- So if you set width: 100% it'll work, like so:
img.scale-with-grid, #Content img {
max-width: 100%;
height: auto;
width: 100%;
}
As can be seen here (updated css in chrome devtools.)
Just give img.scale-with-grid, #Content img : width:100%
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 having an issue with a site we launched recently. There's a 25 pixel gap at the bottom of the site that I cannot explain, and I've exhausted all troubleshooting techniques I could think of trying to figure this out.
http://bit.ly/1I2m3ZD
Here's what I can tell you is NOT causing it:
1) There is no margin or padding on the body or HTML tags.
2) The footer does not have a bottom margin or padding.
3) The height of the footer is static.
4) There are no elements within the footer that are hanging outside of the box.
5) When I eliminate the both the footer and the content area, the gap is still there.
6) There are no 3rd party apps installed which would affect page layout (and if there were, any dynamic changes would show in Inspector).
I'm using Firefox inspector to troubleshoot this. Inspector is showing nothing that indicates the space should be there, and when I remove elements one at a time by deleting them through the inspector, the gap does not go away. What am I missing?? Either I'd like to learn how to use inspector for troubleshooting better (because I'm obviously not troubleshooting effectively), or I'd just like to find out what could cause this gap and not show up when I try to hunt it down.
I should elaborate. The problem is caused by the code <iframe name="google_conversion_frame"...
Because this iframe is in the flow and has layout, it is being added at the bottom of the page and adding the space. Your best bet would be to apply a style to it, giving it position: absolute; and a left: -5000px; or similar style to remove it from view.
There seems to be an iframe at the bottom of your site named 'google_conversion_frame' causing the added spacing. I would suggest adding the following to your CSS:
iframe[name="google_conversion_frame"] {
height: 0;
clip: rect(0, 0, 0, 0);
visibility: hidden;
position: absolute;
}
I have heard that using display: none can cause issues with iframes and tracking pixels but that information may be outdated and so display: none may be fine.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I took a WP theme and have customized it for my needs. I have got into a issue now with CSS.
It looks fine on full size
However when resized or when viewed on iPad, the header is getting distorted. As you can see the RSS icon on the top right has gone past the colored header.
Any pointers in this regard would be appreciated.
Please let me know if you need some more information.
In case you need to check with Firebug/other inspector tool, here is my site
If a block overflows, it does not scale the parallel ones. Putting div#header div#menu and div#footer into div#content parallel to the container should solve the issue.
CSS alternative way:
Add floated fixing to the container and all childs, in this case:
#top-overlay, #header, #menu, #content, #footer {
float: left;
min-width: 100%;
}
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
Why is the pseudo class not working?
Here is the fiddle with the code:
http://jsfiddle.net/Midtone/DCDVM/
It seems simple enough but I can not get it to work in any browser. Is this a Coda bug? Thanks.
Since it seems that you're trying to absolutely position the elements with left: 0; right: 0; then you'll need to add.
position: absolute;
Then you can start to see what you're playing with... Beyond that... I can't really decipher what you're trying to do aside from display the css you're working with.
http://jsfiddle.net/DCDVM/2/
You haven't specified any dimensions (in that context) for those pseudo-elements. That's why they don't appear.
top and left are ignored for elements with position: static (the default).
jsFiddle.