This is the webpage I am designing using Bootstrap. For the life of me, I can't figure out what is causing that small blank space to the right of the screen, which makes the website be scroll-able horizontally. Would anyone take a look please?
Your help is much appreciated.
This image is causing your problem
You can set that img with width: 100% that will make your UI fit again. (It also depends what you're expecting from your designs)
Try using * { outline: 1px solid black } to see which element is overflowing your site. This should help you to identify it.
Above both methods are usable to get answer as well as to identify the problem by using border. and I would suggest you to always insert width and height of the image and also insert some text inside alt:""; so if your image will not load you may see this text so you can find the problem for the same.
for this you can add width: 100% and height: auto;
Thanks,
Happy Coding...
Related
I have this div that starts off at a distance from the top:
The problem is that, when I start to scroll up, the rounded image is hidden:
I am very sorry that I could not reproduce the issue, as this is a custom CSS used on Notion -- meaning that I couldn't duplicate a website for testing purposes.
What I want is for the rounded image to appear on the top of the page, as opposed to being partially cut off as in the second image. The image should be perfectly round, even if being scrolled up.
In more simple terms, I want the rounded image to display even outside of the notion-app div, which is shown in the first image that starts off at an offset from the top.
Do anyone have a suggestion of removing the problem?
EDIT I already tried z-index, but that doesn't help.
Thanks in advance.
Give the #notion-app of overflow: visible;
#notion-app{
overflow: visible;
}
https://www.w3schools.com/css/css_overflow.asp
read sample docs on w3school for reference
here is my url www.hotelchurch.org. Above each of my content boxes is a slightly gradient bar that i want to either remove to just make it transparent. I can enter CSS custom code but can't figure it out and the developer is having trouble too. Seems like it should be simple to isolate it using the web inspector and then doing some simple CSS... but I'm not succeeding. Any advice? thanks.
This was the original code that was given to me by the developer to try. I'm stalled out. I tried the other suggestions below but nothing
.otw-sc-contentbox .otw-contentbox-title .otw-regular-title{ background: none !important; }
Im not sure how this code was laid out, try going to the elements/box model with the border and typing
border-style: hidden;
This should just hide the border completely while not collapsing it.
If you cant identify the elements with the border try adding.
* {
border-style: hidden;
}
though this will hide ALL the borders on your web page.
:) hope this solves your problem
I hope I can explain this properly. I have the home page. It has 4 widget areas on it. Each widget area has something in it (you'll see in the screen shot I'm including). Three widgets just text with crazy CSS going on and have a header w/a box around the header (including text). The 4th widget is irrelevant because it's just an image.
One widget's header has a box, radius, background color and it's left/right justified with the rest of the information inside the widget. Two other widgets - the header is not justified left and right 100% w/the entire widget area.
See the image as it'll make more sense.
here's a direct link to the image for a alrge view: http://postimage.org/image/ofdqc1sa7/
The wdiget section "New customers" - see how it's left/right justified. It stretches the entire width of the whole box. Now see the Existing and Why - how it's not stretched all the way across left and right. How can I get it to stretch all the way across? Iv'e been going over this soooo many times with change this/change that. My Firebug in Firefox is o fire, but I can't seem to get the correct CSS code to make this happen. Driving me crazy.
Any help is appreciated. Thank you in advance for your reply...
Change this style
.cl-content {
margin: 8px;
}
To this
.cl-content {
margin: 0px;
}
However, this will cause some alignment problems with your columns. But, that class is what is causing your problem.
[ Edit ]
If you change the #text-17 and #text-18 widths to 670px, it should resolve your problem.
I would also change #LoginWithAjax to #LoginWithAjax { padding: 5px; }
Initialy I'd say there may be a padding issue. Is there a live link that I can firebug to troubleshoot further?
This is some html and css, you can see what it does:_ (The first box is really the one that matters)
http://jsfiddle.net/rcGsH/2/
The problem is to make this work properly with the image there, I have to use some tricks to get it to work properly that don't seem very good... like
floating the img left or right so it's not really taking up space.. (is there another way around this? or is it fine how i'm doing it?)
.ad img {
height: 175px; width: 175px;
float: left;
}
And making another wrapper div around the text inside the ad_info div and setting it to bottom: 175px so that the text stays in the transparent part... is there another way to this as well?
If anyone has proper fixes to these problems or these are fine please tell...
OR I have another idea where i could put the image as a background image with JQuery, (since the image will come from php), i have a good idea of how that would work but could anyone tell me which solution is better?
Thanks!
There is a lot of ways to do this, you are doing right (maybe some extra divs), but I thinks this is what you are looking for:
Boxes, images and captions
Like an extra, they use a little bit jquery, to animate the boxes ;)
I need a purple line along the top of the site. Instead of using an image I'm using the border-top property on the body. This works in full view but when I resize the browser window the purple line appears only in the viewport, when I scroll to the right I get a white space. Here's the fiddle so you can see what I mean. I've tried width: 100% on both the body and the container, but to no avail. Can someone suggest ways to accomplish what I need?
Thank you.
Not sure if this is the best way to accomplish it, but you can add position: absolute; to the body. This may have some undesired side effects.
If you know your documents width then you can specify a min-width.
body { min-width: 960px; }
Try the body border hack :)
http://css-tricks.com/558-body-border/
Designed for fixed position but should work for you as well.
Adding display: inline-block; to both body and container also worked. See http://jsfiddle.net/K5zVq/16/.
A secondary answer, related to skoh-fley's though maybe with less consequences, is to add float: left to the body: http://jsfiddle.net/K5zVq/20/. Though I think I would lean toward my first answer posted here (though you know your situation better than I).