I am new to bootstrap.I a creating website in which i get space after footer when minimize it to mobile size.I made margin:0;padding:0.Still not working.HTML code is
body {
width: 100%;
background-color: #FF9933;
}
#footer_img {
margin-top: -50px;
width: 100%;
height: 60px;
}
.container-fluid {
padding: 0px;
margin: 0px;
height: 100%;
}
.footer1 {
height: 100%;
margin: 0;
}
body {
padding: 0;
margin: 0;
}
<div class="container-fluid section">
<div class="row">
<img class="img-responsive" src="images/Content_bg.png" alt="content image" id="content_img"/>
</div>
</div>
<footer class="container-fluid footer1">
<img class="img-responsive" src="images/footer2.png" alt="footer image" id="footer_img"/>
</footer>
In footer image you have the footer image bound to the top of the page, actually above it. Running your code in jsfiddle from #footer_img I removed both margin-top and height and it appeared to work. Let me know if it doesn't.
If I am understanding your question correctly the problem is that the padding isn't appearing.
Well for starters when using bootstrap you can only have one container, and here you have two.
div class="container-fluid section"
footer class="container-fluid footer1"
This might be what is causing the problem. Correct that and reupload if it isn't resolved. Thanks
Related
Everything seems to be positioned where I want it but the image and video will overlap the jumbotron on the smaller size. I have checked other posts and have not found anything useful to answer my question. I should clarify that it comes out at the right side of the jumbotron.
<style>
body {
margin: 20px;
}
#img_position {
position: relative;
left: 14%;
padding: 15px;
max-width: 100%;
}
#jumbo
{
background-color: #bfff80;
font-family: 'Cinzel', serif;
min-width: 100%;
}
.gw_vid{
position:relative;
padding-top:5%;
max-width:32%;
margin:0 auto;
}
</style>
<div class="container box ">
<div id="jumbo" class="jumbotron box">
<h1 style="text-align: center">George Washington</h1>
<h4 style="text-align:center">The first President of the Untited States of America</h4>
<img id="img_position" src="http://projectmanagementhacks.com/wp-content/uploads/2015/03/George-Washington-Success-Principles.jpg">
<div class="gw_vid">
<iframe width="350px" height="350px" src="https://www.youtube.com/embed/thin1LeCrxY" target="blank"></iframe>
</iframe>
</div>
</div>
I added col-md-12 to my picture and that resolved that issue for now but I tried the col-md-12 with the video and got no good results.
Any help with the video issue would be great.
I put your code into Codepen and It told me i don't need tags, first of all after i took out the style tags i ran the code and it looks perfectly fine. I beleive solution here is to create a new file for the CSS then link them in the head. If you don't know how to do that, here is the code
<link rel="stylesheet" type="text/css" href="nameoffyourfile.css"
**HTML**
<div class="container box ">
<div id="jumbo" class="jumbotron box">
<h1 style="text-align: center">George Washington</h1>
<h4 style="text-align:center">The first President of the Untited States of
America</h4>
<img id="img_position" src="http://projectmanagementhacks.com/wp-
content/uploads/2015/03/George-Washington-Success-Principles.jpg">
<div class="gw_vid">
<iframe width="350px" height="350px"
src="https://www.youtube.com/embed/thin1LeCrxY" target="blank"></iframe>
</iframe>
</div>
</div>
**CSS**
body {
margin: 20px;
}
#img_position {
position: relative;
left: 14%;
padding: 15px;
max-width: 100%;
}
#jumbo {
background-color: #bfff80;
font-family: 'Cinzel', serif;
min-width: 100%;
}
.gw_vid {
position: relative;
padding-top: 5%;
max-width: 32%;
margin: 0 auto;
}
Since you are using Bootstrap, you can use the native responsive embed for your YouTube video: http://getbootstrap.com/components/#responsive-embed
I've been stuck with the problem of trying to align all the content (logos, links and facebook icon) on my navigation bar to all be vertically centered. I've done some research and a good topic from StackOverflow came up, which can be found here: How do I vertically center text with CSS?
I've tried the suggested ideas all to no avail. I'm really at a loss with this one and would appreciate any help in making my navigation look good across multiple browsers (mobile devices also).
Another issue I've come up with is being able to add content in the main body of the webpage. As you can see in the codepen below, some of the content written in the body is hidden by the header. I can add line breaks to fix this but I'm 90% sure the way I've laid out my content (header, main, footer all enclosed in body tags) is incorrect.
CodePen
Here is what I've done to try and fix the problem: headerLeft refers to the logo to the left of the links, and headerRight is vice versa. The header tag had a class of verticalAlignHelper but it seemed to do nothing so verticalAlignHelper isn't really being used now.
.headerLeft {
margin-left: 30px;
margin-right: 40px;
float: left;
height: 100%;
margin-bottom: 0.25em;
vertical-align: middle;
}
.headerRight {
margin-left: 30px;
margin-right: 40px;
float: right;
height: 100%;
margin-bottom: 0.25em;
vertical-align: middle;
}
verticalAlignHelper {
vertical-align: middle;
line-height: 150px;
height: 150px;
}
Any advice is much appreciated. This is my first website so I'd appreciate if the advice was as basic as can be. Cheers.
Prevent covered-up body content
Use JavaScript to set a padding-top on body, just larger than the top height. Like so:
$("body").css("padding-top", $("nav").height() + 25);
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: lightgrey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>Navbar</nav>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
Fix vertical alignment of nav-bar images
Because I can't see the images, the following are only suggestions:
Easiest: Make the navigational bar the same height as the image (or vice versa)
Manually hard-code margins in (only if you know exact heights of everything)
Hardest but best Use JavaScript (dynamic and fun)
$(function() {
var elem = $("#img4");
elem.css("margin-top", (elem.parent().height()-elem.height())/2);
});
* {
box-sizing: border-box;
}
body, html {
margin: 0;
padding: 0;
}
img {
height: 75px;
}
div.navbar {
width: 100%;
height: 100px;
background-color: lightgrey;
margin-bottom: 20px;
}
div.text {
line-height: 100px;
display: inline-block;
vertical-align: top;
}
img#img1 {
height: 100px;
}
div#div2 {
height: 75px;
}
div#text2 {
line-height: 75px;
}
img#img3 {
margin: 12.5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
<div class="text">Uncentered image</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img1" />
<div class="text">Centered by making image full height</div>
</div>
<div class="navbar" id="div2">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" />
<div class="text" id="text2">Centered by making div same height as image</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img3" />
<div class="text">Centered using manual <code>margin</code> manipulation</div>
</div>
<div class="navbar">
<img src="http://www.iconsdb.com/icons/preview/orange/square-xxl.png" id="img4" />
<div class="text">Centered using JS and jQuery (dynamic)</div>
</div>
I am trying to learn how to make a responsive grid layout with images. I feel i am almost there but i am having a few issues with alignment. First of all to make things easier to understand I have made a mock-up of what i am trying to achieve:
(grid will be used to display images/posts. i want to be able to mix and match them.)
Screen-shot of what i have achieved so far:
but when i add a med-box to the grid i have alignment issues. as you can see here:
(the height of the MED-BOX is slightly taller than the SML-box and the SML-BOX does not align properly.)
I also have this problem when i add another 3 x SML-BOX under a column with a MED-BOX in it:
I thought it was something to do with the % width of my "med-box" (see code below) but i have tried adjusting the width percentage and cant get it to work! Another issue I am having is when i go into mobile width, the margin on the left is off and i am not sure why. Please check out my code below or on JsFiddle: https://jsfiddle.net/shiggydoodah/z0og70wn/
I have been stuck on this for awhile now and i really need to some expert advice. If anyone knows how to fix this it would be greatly appreciated if could share it with me.
Many Thanks
Louis
section {
width: 80%;
margin: 20px auto;
line-height: 1.5em;
font-size: 0.9em;
padding: 30px;
color: black;
border: 4px solid red;
overflow: hidden;
}
.row {
margin: 0 auto;
width: 100%;
}
.col {
min-height: 40px;
margin-left: 1%;
margin-right: 1%;
margin: top 1%;
margin-bottom: 1%;
display: inline-block;
float: left;
}
.col:first-child {
margin-left: 0px !important;
}
.col:last-child {
margin-right: 0px !important;
}
.img-responsive {
max-width: 100%;
height: auto;
display: block;
padding: 0;
}
.col.lrg {
width: 100%;
}
.col.sml {
width: 32%;
}
.col.med {
width: 65%;
padding: 0;
}
#media (max-width: 766px) {
col {
width: 90% !important;
margin: 10px auto !important;
padding: 0;
}
.col.lrg {
width: 100%;
height: auto;
}
.col.sml {
width: 100%;
height: auto;
}
.col.med {
width: 100%;
height: auto;
}
}
<section>
<div class="row">
<div class="col lrg">
<img class="img-responsive img-lrg" src="http://i.imgur.com/9nN5kU8.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col med">
<img class="img-responsive" src="http://i.imgur.com/GBKW5ri.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
<div class="row">
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
<div class="col sml">
<img class="img-responsive" src="http://i.imgur.com/KRMgGnK.jpg">
</div>
</div>
</section>
First of all there are a few issues with how you are using your grid. Whenever you float an element you essentially remove said element from the document flow. This means subsequent elements will not know how to position themselves in the natural flow of things. You need to ensure you use a clear in order to negate the effects of a float.
In additional the medium element needs to be set to 66% width to account for the margin on the left and right of your small column class. Please see edited fiddle
CSS:
.col.med {
width: 66%;
padding: 0;
}
I have also added a clear to your row class:
.row::after {
content: "";
display: table;
clear: both;
}
I have also removed the use of the !important statement you've implemented. This is a very bad practice to adopt as if you are using inheritance correctly and the natural cascading nature of CSS then you will not need to explicitly try to override anything using this method.
This issue is due to the proportions of your MED-BOX image.
You should crop it a little bit with some modifications on your .row css properties.
.row {
margin: 0 auto 15px;
width: 100%;
max-height: 455px;
overflow: hidden;
}
I equally add a bottom margin per row as the overflow hidden behavior cause the .col bottom margin property to be hidden by the row overflow.
You have to clear each row when you have floating elements inside of it and overflow: hidden so that it could fill the height.
.row
{
clear:both;
overflow: hidden;
}
I have the following html:
<div class="container">
<a href="url here">
<div class="logo">
<h1>Name</h1>
</div>
</a>
</div>
and css:
.container {
width: 20%;
}
.logo {
background: url(images/ui-sprite.svg) no-repeat 0 0;
text-indent: -9999px;
height: 30px;
width: 150px;
margin: 25px 0;
}
The issue I have is with linking the logo (background image). At the moment the link area you can hover over is the full width of the container div, despite the fact that the logo class has a defined width. Any ideas here on best practice with linking of background images?
Thanks
Found this to be ultimately useful, and less markup too!
http://ran.ge/2012/04/03/css-trick-turning-a-background-image-into-a-clickable-link-take-2/
I have a page with the following structure:
<body>
<div id="page">
<div id="header-container">
<header>
</header>
</div>
<div id="main-container">
<div id="main" class="site-main">
<div id="sidebar-container">
<div id="sidebar">
</div>
</div>
<div id="content-container">
<div id="main-banner-container">
<div id="main-banner-holder">
<img id="main-banner" src="http://dummyimage.com/900x300/000/fff" />
</div>
</div>
<div id="content" class="content" role="main">
</div>
</div>
</div>
<div id="footer-container">
<footer>
<div id="footer-images">
</div>
</footer>
</div>
</div>
</div>
</body>
And formatted with the following CSS:
body {
margin: 0 auto;
width: 70%;
background-color: rgb(0,114,187);
font-family: verdana;
}
#header-container {
padding-bottom: 15px;
padding-top: 20px;
padding-left: 35px;
padding-right: 35px;
height: 190px;
}
header {
position: fixed;
width: 66%;
padding-top: 30px;
top: 0px;
}
#sidebar-container {
height:500px;
width:320px;
float:right;
}
#sidebar {
position: fixed;
color: rgb(211,34,52);
padding: 10px;
right: 16.5%;
top:226px;
}
#content-container {
width: 72%;
}
#main-banner-container {
max-width: 900px;
}
Viewing the page on a widescreen shows the content fine. However, as I reduce the window size, or if I view the site on a lower resolution screen, the fixed image and the text underneath it starts to obscure the sidebar, even though it does scale a little. Furthermore, when the page is scrolling, even though some of the text move to make space for the sidebar, the text below it overlaps when scrolled.
A rough example of the problem can be seen here: http://jsfiddle.net/4WQzP/
What changes do I need to make?
EDIT: To clarify, I was hoping a plain CSS/HTML based fix. Javascript is an option, though I'm trying to avoid it since I haven't really used it in this site so far.
for using an adaptive design used two ways)), the first is to use the bootstrap framework, the second is writing media queries