So i have build quite complex website but it's all based on standard bootstrap template without any changes done to bootstrap.css
The thing is, for some reason navbar is always 15px wider than rest of the website. While on PC you cannot see the difference, on mobile there is this weird white space next to the container. Why is that? How do i limit navbar?
i tried overriding max-width of .navbar to calc(100%-15px) but it doesn't make any difference.
Did you use the col command on the div below the navbar? If yes remove it. Of it still doesn't work, try clear: both command for the div under the navbar (not the white one). Hope that helps!
PS: It would be a lot more helpful if you post the CSS code (and HTML if necessary) so it will be easier to debug.
Change from position fixed to absolute.
.navbar-fixed-top, .navbar-fixed-bottom { position: absolute; }
Related
I've made my own static website from scratch using html5 and css(3) only.But I have got 2 issues.
The first one is the white space between the top's menu and header's image bottom.I've tried everything.
Maybe the only solution for that is float:left; but then the image goes into the navigation tag or negative value on margin's property but I've heard that this technique is bad.
The second issue I'll display via image http://www.filedropper.com/discoversite that's my simple WebSite. I know my css is awful but I'm still a beginner. The second issue is here. http://postimg.org/image/5adp6379d/ . As you can see the text is going out of the box. (I am using % in css for more responsive). I will be glad if anyone can help me.
I can only have a guess for your first issue as I don't know the exact code for your website (create jsfiddle :D ). Try to apply vertical-align: bottom; or display: block; to your header image. Why? Because images are placed like text and some letters like g, j, q and p are going underneath the bottom level. Your browser will leave a tiny space for these letters. Also setting a min-width is a good solution like Kirk Logan said.
And for your second problem there are multiple solutions (depending on what you want):
You can handle your content with overflow: hidden; or overflow: scroll as Kirk Logan suggested. But this wouldn't make any sense in the case you have shown us in the picture.
Or (is a little more complex) you could remove the white borders on the left and right side (just when the screen is too small) in order to gain more space for the text. This can be done by:
#media only screen and (max-width: 768px) {
#BigBorder1 { border-width: 0px; }
#BigBorder2 { border-width: 0px; }
}
Everthing inside the outer brackets will only be applied when the screen's width is smaller than 768px. But to be honest this is usually done the other way round: When the screen is bigger than 768px then something happens. This simplification is only in order to make it easier for you.
I'm having trouble removing a margin in CSS .
I am working in a MVC .NET project and have implemented the summernote editor.
It uses the following CSS files:
summernote.css
font-awesome.css
bootstrap.css
as well as the default css files for an MVC application.
I have inspected the page and it states I have a margin to the right on the .note-editor class. I have then set the margin to 0 for that div (and class), but so far it has been impossible to remove it.
Here is the link to my screenshot (since I require 10 reputation to post images):
http://imgur.com/gallery/cNlqLTi
I would be more than grateful if someone could help!
It is not the margin it is just the empty space inside the container .col-md-10 which is shown in screenshot. For better understanding I created this fiddle
Here the parent element .container has some max-width and it is aligned center and the inner element .inner-container has max-width: 90%; and there is a remaining space of 10%. If you inspect it you will see it as orange same as your example, which you thought it as margin.
In your scenario, the parent element .col-md-10 has some width and the inner element .note-editor has max-width:95%. Here, there is a remaining space of 5% which you assumed it as margin.
To remove it, remove max-width or if you give max-width:100% or width: 100%, your issue will be resolved.
Ok so I found what the problem was. The .note-editor was displaying as a block.
I changed its styling to display:inline-block and width:95%. This fixed it nicely. Thanks to everyone for helping out!
The following css worked for me.
.note-editor{
display: inline-block;
border: none;
}
Try in Site.css file or try directly to type style="margin 0 0 0 0" or try to apply another class to current.
EDIT - As requested here's the Fiddle jsfiddle.net/daghene/eq4tfzLn/
I've already searched a lot on Stackoverflow and Google to find an answer to this but even if there's plenty I don't know why they're not working nor if I'm handling this layout correctly.
Basically I'm using Skeleton responsive framework to make a one-page layout and I have a section where there's a row with this image on the left and text on its right. Below it there's a small twitter paragraph with the latest news.
Basically my problem is: when the first row gets too small and the text starts getting long the image gets way too small and I thought the best solution is to vertically center it, but both it and the div's height are responsive(most solutions requires at least one of the two to be fixed height).
What's your suggestion and far more importantly am I handling this layout well on a logical perspective or is it ok to have paragraphs get THAT long with the image simply sticking to the top?
Note that it displays fine on desktop, tablet and smartphones, there's just that little part where it gets kinda weird...here's the screenshot of how my layout is acting, the third one being the one that I think should be fixed since it's kinda ugly to look at and maybe centering the image would help.
P.s. one thing I forgot, haven't put my code since Skeleton, as most responsive Frameworks, simply requires a .container class with .row and .X columns inside it to give the divs size and centering and I didn't add anything on top of that yet. The only thing I think I'll do is put the sections in a fixed height's div because I plan on making the user scroll them as slides and they'll always need to be 100% viewport height or at least a fixed height like say 600px scaling.
P.s.2 if the only solution is js since we don't know the paragraph's and img's height at all times go ahead and propose a solution, I'm asking if this could be done with CSS since I'm not that good at js yet.
I would give the thanksup row an id - eg vertical and then you can use the following styles to achieve vertical alignment:
#vertical {
display:table;
width:100%;
}
#vertical > .columns {
float:none;
display:table-cell;
vertical-align:middle
}
#media (max-width: 565px) {
#vertical > .columns {
display: block;
}
Updated fiddle
The website I am making is here: diyhelp.es
If you re-size the browser you will see the white background behind the content actually get smaller (even though the div gets larger) I've looked in the CSS and cannot see a problem. Since I don't know what is causing it I cannot paste any code (unless you want me to paste the full CSS?).
It's only a plain white background - no image.
In your css.css find line:438, that looks like this:
section.content, aside.sidebar, .footer-col { float: none; width: 100%; }
remove the float:none; and it should solve your problem. Why? I'm not sure totally, but float:none; is known to mess up other floating divs. It is better not to use it. I can't even think of a reason why you might need it. In you markup, you don't need it there, because when floating div is set to width:100% there is no room for anything to float beside it anyway.
I have a site I made really fast that uses floats to display different sections of content. The floated content and the content that has an additional margin both appear fine in FF/IE, but on safari one of the divs is completely hidden. I've tried switching to padding and position:relative, but nothing has worked for me. If I take out the code to display it to the right it shows up again but under the floated content.
The main section of css that seems to be causing the problem is:
#settings{
float:left;
}
#right_content{
margin-top:20px;
margin-left:440px;
width:400px;
}
This gives me the same result whether I specify a size to the #settings div or not. Any ideas would be appreciated.
The site is available at: http://frickinsweet.com/tools/Theme.mvc.aspx to see the source code.
I believe the error lies in the mark up that the color picker is generating. I saved the page and removed that code for the color picker and it renders fine in IE/FF/SF.
Have you tried floating the #right_content div to the right?
#right_content{
float: right;
margin-top: 20px;
width: 400px;
}
Sorry I should have mentioned that as well. I tried floating that content right and additionally tried floating it left and setting the position with the thinking that both divs would start out at left:0 where setting the margin of the right would move it over.
Thanks
A few things you should fix beforehand:
Your <style> tag is in <body>, when it belongs in <head>
You have a typo "realtive" in one of your inline styles:
<a href="http://feeds.feedburner.com/ryanlanciaux" style="position:realtive; top:-6px;">
Try to get your page to validate; this should make debugging the actual problems far easier.