This question already has answers here:
How would I remove the gap between the image and the Bootstrap Nav bar?
(3 answers)
Closed 8 years ago.
Using Bootstrap 3, I've followed their examples to put a navbar at the top and then immediately followed it by a carousel. I've removed the margin-bottom:20px from the navbar but there is still a space of exactly 20px between the bottom of the nav and the start of the carousel.
If I put a margin-top:-20px on the carousel container then the space is gone.
Chrome inspector doesn't show any element accounting for the gap.
Why is the space there and what is the right way to remove it please?
Example is shown here: http://temp.hak.webfactional.com/
Thanks
This is caused by this rule :
body {
padding-top: 70px;
}
As your navbar as a 50px height (and what have we got here ? 70 - 20 = 50 !), change this padding accordingly and it'll be fine.
Add this css in your code
body {
padding-top: 50px;
}
Edit your css name- suntrek.css, line no 1
body {
min-height: 1024px;
padding-top: 51px;
}
Related
I have devolopped a responsive website with Twitter Bootstrap 3. However i have noticed that there is a scroll bar at the bottom of my screen due to a right space on the page. Even though i used
body {
margin:0px;
margin-top:0px;
padding:0; margin:0;
margin-right: 0;
}
I still have a right space and a scroll bar under my page as shown in the picture below
Please How to remove the right space from a bootstrap built website ?
i looked in to it what i think is, its the navigation bar which is causing it.
try reducing the px for nav bar. look at the picture , reduce the px from 1903 to 1980 may be !! let me know what happens
First of all, elements with classes articles_text2 and articles_text4 aren't placed properly, they create some extra space on the right. For example, you can set them left: 50%;. However, I'd suggest that you re-define positions for all articles_text elements because values like 57% and other look like some magic numbers taken from nowhere.
Secondly, you should remove padding: 0; from #full-width because it breaks Bootstrap Grid System. What I can suggest in order to remove left and right padding is to do the following trick:
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
It should help.
I have strange problem with website responsiveness.
When on desktop resolution no horizontal scroll appears at Chrome.
When i resize it to lower resolutions 400px width and less the horizontal scroll appears.
I think some element is forcing width bigger than actuall screen size but i cant find it!
Please help.
Here is website link
I checked your code,
You have to get rid of this code in your footer styles. Your margin-right is making your content overflow.
Try using padding, or something similar instead.
It appears you are using bootstrap for that.. So the best way to do this would be to overwrite this by creating a
#footer > div.row {
margin-right: 0 !important;
}
or if you have bootstrap locally then you can probably delete from there. But i just overwrite it using `!impornat
.row {
/* margin-right: -15px; */
margin-left: -15px;
}
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 7 years ago.
Im trying to center a (pumpkinvector.jpg) image inside a .div using this classic trick:
.pumpkin{
position: relative;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
It seems to work fine on the very bottom div where background is red.
However, that was just a test, it is not were I need the image to center.
I need to center pumpkinvector.jpg image up top in "grid2" div that inside "grid 6 october" div. October div has additional code and inner class to give background image and make it resize proportionally in height and width %. Using the same centering code above, the pumpkinvector.jpg now flows to the next line and starts to position outside of the .october div. Can someone why this is?
Please bear with me here. I thought the addition of images helps you visualize my problem so I uploaded to my own site instead of js.fiddle.
Here is the link:
http://jingsportfolio.com/october.html
Please view source to view code. Thanks.
This question is different because it asks how to center div in the context that its parent div has complex markup that makes any traditional centering off and throws in on a new line below parent div.
Check this little example probably will be useful, how to center a image inside a div
The html code:
<div class="parent">
<img src="http://45reu03dndd711szsx3satxn.wpengine.netdna-cdn.com/wp-content//uploads/2015/08/Top-10-best-CSS-development-tools-2015.png"/>
</div>
The css code:
.parent {
text-align: center;
width: 100%;
border: 1px solid #ccc;
}
img .picture {
width: 40px;
height: 40px;
}
This code is running here
Horizontal alignment is really easy with CSS:
the item you want to align has to have "margin: auto"
And the item wrapping has to have a fixed width.
Vertical alignment is a little more tricky:
This trick only works if your wrapper has a fixed height and your content to align is a textual tag like span or p or h1
use the line-height css attribute of the wrapper andset its value to its own height and it's done.
OR
if your content to align has a height of 300px use margin-top: calc(50% - 150px)
change 'margin-top' for absolute "position" and "top" attribute if needed
Please bear with me...though I've been stalking Stack Overflow for years and have had hundreds of my questions answered, this is my first post.
My main content column is 880px. Right above it are the H1 and breadcrumbs which look fine on a desktop. But when I shrink the screen size or look at it on a mobile device, the text is not wrapping or centering. It's off the screen.
Here is the code in my child theme (the width in the main theme is 590, not 880):
#heading, .archive .cat_head {
float:right;
width: 880px;
text-align: center;
padding: 0 10px 0 0;
}
When I remove text-align: center; it all works on mobile, but not on laptop.
Any thoughts on how I can get the heading/breadcrumbs to center in the 880px space on all devices? Thank you!!!
Instead of setting the width:880px use percentage. Set width to 100%. width:100%;
I am working on the following website http://bestofdesigns.be/studioregenbogen/index.html.
Can somebody please look at the css and tell me why the footer is not attached to the content and why there is a gap between the menu and the contentwrapper?
I have looked at this for 2 days and cannot seem to find what goes wrong.
Thanks,
Ben
#footer p {
padding-top: 5px;
margin: 0;
}
why there is a gap between the menu and the contentwrapper?
The gap is due to the margin applied by default by each browser to the list <ul> element and the title <h1>.
Remove it or adjust it
Screenshot
hi now give to #footer overflow:hidden and give to your footer p tagmargin :0;`
as like this
#footer{
overflow:hidden;
}
#footer p{
margin:0;
}
I am suggesting one more thing did you ever opened your design using firebug and checked how your middle content looks. It's bad design. Use div tags extensively don't use padding much.In the body style put text-align:justify property.
Your error is in
#footer p {
padding-top: 5px;
margin: 0;
}
Divide the content wrapper class into two vertical div classes and then divide the below vertical classes into another two vertical classes. Divide the first vertical tag into two horizontal div classes. In that put your image in first horizontal tag and in second your paragraph. In the bottom vertical class your second paragraph.