I'm incredibly frustrated by this and it would be a tremendous help if someone out there knows how to quickly figure this out...
What's happening is, I'm working on a site that seems to be extending out to the right of the body. In other words, overflowing to the right such that the horizontal scrollbar appears.
You'll see what I mean:
http://www.lahappy.com/blog/
This is killing me! Would really appreciate someone to call out what I may be missing or doing incorrectly.
Thanks-
The problem is within #fb-root in the right sidebar. If you remove this element, the layout will fit correctly without a horizontal scroll. The child iframe within this element has a width of 575px. You can change this value to auto by setting the style for the iframe in your css as:
#fb-root{
width: auto !important;
}
This line should be placed at the end of the CSS line to overwrite any styles which may disable the width:auto style. Ideally, you shouldn't have to use !important but since you need to override a FB defined style, I'd try it out.
Hope this helps.
Related
So I've been tinkering with this site, and I've got my work cut out, but right now I cannot for the life of me workout why content is displaying beyond the width of the window.
-redacted-
I believe it's something to do with bootstraps row/col guttering but have been unable to fix it, even with dreaded '!important' use.
Furthermore i note that a carousel button is extending beyond the width of the screen.
This basically just makes the site flimsy and seem broken.
Any css whizz out there able to give me some tips of this shit?
If the problem is with one specific tag (e.g. a <div>), add a class/id to that div with the following CSS: .classname { overflow-x: hidden; If it's the whole page, you might want to do that for the body and HTML tag. Note: When you do this last thing, people aren't able at all to scroll horizontally. This is a but user unfriendly, so you want to use that only if it's the only way out in my opinion.
I know it aint short but I fresh in css and I can't solve those questiones for about 2 weeks now...
I can't move my .headline-box to the bottom of the image. I'v tried to change my display and play with, block, flex, grid and changing it to row/column justify/align but nothing. I'v ried to change position to bottom: 0 an squat...
Can any one pls tell how to fix it? And you this solution?
Why nothing that I'v done worked?
And why when I gave position: relative to this class, it went after the image, Down side..?
And besides that, I can really use help to make my code more simple...
I post link but this the url:
Codepen
Thank you all :)
I moved your .headline-box to the bottom as you wished. The problem was caused by a few things, the most important one being that your header/container-fluid/row did not have a height, and because your body did not have a height either, doing this would give no result anyway.
I did the following things:
body & html now has a height of 100% (always do this!)
header also has a height of 100%.
removed the image from your html and applied it as a background-image on your header.
your .headline-box now has bottom: 0, which now puts it at the bottom.
I cleaned up your code significantly and left out the following unnecessary items:
the extra <section> for just one h3.
<div id="main img-div"> did not have an ending tag.
was also unnecessary because you already neatly put your content in a header and section(s).
Here is the updated Codepen.
If you have any further questions, please let me know :)
I'm working on trying to get position: sticky working for an element that is inside of another wrapper.
Here is an example codepen where it is not working (make sure the bottom area is small enough to be scrollable.)
https://codepen.io/anon/pen/aWLrXd
(Notice all dt stick, but not he one wrapped in the div class='broken' tag.)
Any thoughts on why this may be happening?
EDIT:
I've noticed that if I set the display for the wrapper to inline, it works!
I've noticed that if I set the display property for the wrapper to inline, it works!
No clue why.
Hello I do some css positioning to magento eshop. I am using image for add-to-cart button and when I change my browser width this button just move right box element.
See here
I need some idea to make it look better (scaling image down,or just croping or hide it on overflow) because its very ugly how it is now.
Thank you, hope I explain my problem easy to understand.
make the middle element (or whichever needs to be) have min-width: ###px in the css
First i would set all img to max-width: 100%; and then fo fix the problem you are having with the add-to-cart button you should add it's class to the responsive.css stylesheet or how you call it, and play with it's positioning in the various media-queries that you have.
I got an element fixed in the center of the screen, having specific dimensions (let's say 500x500). The element has content, which is larger then the height of the element and thus causes scroll bar to appear, which is fine. In FF/WebKit everything works nice. However in IE 7/8 ... content of the fixed element doesn't scroll, or scrolls with HUGE delay. If I change position:fixed to position:absolute, it starts to scroll fine, but with position:fixed... it's just a pain!..
Is it some known issue? Anyone heard/encountered something like that? Any ideas how to deal with such?...
Only thing any useful I could find on this subject was this, How to create Position:fixed in IE5.5+.
Position:fixed was implemented in IE7. Maybe it still has some issues with it, but there might be something else in your markup or CSS that would cause such behaviour.
It'd be beneficial if we could see some code to help us with your problem.
It turned out that there was additional problem to this - shadow filter beneath that element with position:fixed and scrolling content within it. We couldn't find any solution to this other then either disabling shadow filter in IEs or disabling position:fixed.
:(
.fixDocument
{
position: absolute;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
}
Check this page: http://www.gunlaug.no/contents/wd_additions_15.html