Twitter's Bootstrap, right/left column margin's uneven - html

I am trying to make 2 columns with an image in each and although the 2 images are the exact same size, I noticed that they have uneven right/left margins, the left one is slightly larger, how can I fix this?
HTML:
<div class="container">
<div class="row">
<div class="col col-lg-6">
<img src="logo.jpg">
</div>
<div class="col col-lg-6">
<img src="profile.jpg">
</div>
</div>
</div>
CSS:
.container img {
width: 35em;
height: 35em;
}

It is because you have applied width to the img tag. you can fix this by setting the width to 100%.
when image size is larger than the width of the div image overflow. And the div tag that contain the img tag, have left and right padding. if the image's width is larger than div width image will overflow. and even if you set overflow to hidden image will show to the innerWidth of the div.
Making the img width 100% will make the image remain in the div.
Hope this solves your problem.

Since I don't have enough reputation to comment, I will answer your question that you asked in the comment section below HasithaC's answer.
First of all, like what HasithaC said, give your image a width: 100% so that the image will remain in the div.
You mentioned in the comment that the images don't stack on top of each other when resized. It's because you inserted col alongside with col-lg-6. col-lg-6 stands for "column-large-6", which will create 6 columns layout when the screen size is 992px or above. If the col classes weren't alongside with col-lg-6 in the first place, the images (columns to be exact) will stack on top of each other when the screen size is below 992px,1 but the col class is there, so it will then take over to style your div when the screen size is 992px below as col-lg-6 is meant for 992px or above. Moreover, col has a flex-grow: 1. According to CSS-Trick:
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.
You have two col in the same row and both of them have flex-grow: 1, so they will have the same width, but they won't stack on top of each other because there are no media queries controlling it, unlike col-lg-6 which is only meant for screen size 992px or above. Remove col will solve the problem.
Jsfiddle example

Related

Show image with its maximum width only if it doesn't fit the div

I'm using Materialize framework and I'm interested in the Cards component (The small version).
The code goes like: (the small class limits the height of the card to 300px)
<div class="card small">
<div class="card-image">
<img src="images/sample-1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
This is a link
</div>
</div>
Here's what I want to achieve:
The image must be in the center of its parent
If the image has a width that's smaller that the cards width, then it should be used with it's full width in the card
If it's larger than the cards width then it should be cropped to fit the card
It should be responsive (using responsive-img class)
The image must be in the center of its parent
This can be achieved by applying margin: 0 auto; to .card-image and setting a max-width that is smaller than the max-width of .card.
If the image has a width that's smaller that the cards width, then it
should be used with it's full width in the card
Does this mean the image should not be larger than its original size? If so the demo below should fulfill the criteria. .card-image is set to have a max-width of 400px and .responsive-img has a width of 350px.
If it's larger than the cards width then it should be cropped to fit
the card
This can be achieved by setting overflow: hidden; to .card-image.
It should be responsive (using responsive-img class)
The demo below uses .responsive-img on the image. To center the image even when it's cropped, you may set top, bottom, left, right values to -100% and margin to auto. Be sure to set .card-image to position relative and .responsive-img to absolute.
Here's a demo:
https://jsfiddle.net/suefeng/updr2ehp/1/
If you resize the window, the image should crop when the window is narrower. The image is 350x300px.
Linked a jsFiddle with examples. Hope this helps.
If it's larger than the cards width then it should be cropped to fit the card
When you specify the card-small, the height will be constrained. To modify the width, you just need to specify the number of columns to use.
<div class="col s6">
If the image has a width that's smaller that the cards width, then it should be used with it's full width in the card
Some images that are too small will be distorted, see the third example with a jpg in the jsFiddle.
It should be responsive (using responsive-img class)
The responsive features baked into Materialize should provide you with some features, for example in second card.
<img src="any.jpg" alt="" class="circle responsive-img">

Fixed position div inside reponsive div with angularjs and bootstrap

I have a page layout that involves a fixed sidebar to the left and a main container on the rest of the page to the right. Inside that right side container which is a div I have 2 elements
<div class="col-sm-12 col-md-5 col-lg-3">
<custom directive>
</div>
<div class="col-sm-12 col-md-7 col-lg-9">
<another custom directive>
</div>
The content of the second div is long so scrolling is implied.
What I want to do is make the first div sticky. So I applied a position:fixed to it in css but that takes it out of the context of the right side container which means the css classes responsive width don't work anymore. Also the 2 divs overlap.
I am looking for a clean way to handle this. The best I thought of is using a dummy div like so :
<div class="col-sm-12 col-md-5 col-lg-3 dummy-div">
</div>
<div class="col-sm-12 col-md-5 col-lg-3 sticky-div">
<custom directive>
</div>
<div class="col-sm-12 col-md-7 col-lg-9">
<another custom directive>
</div>
With this I thought of creating an element directive that uses jquery to set the witdh of sticky-div to the width of the dummy-div.
I still think this isn't a very nice solution though, and was wondering if there is a cleaner way?
First off do not duplicate Class you should just have one class="" with all of your class' inside it.
Instead of creating a dummy div to compensate from flow removal you should just give the non fixed <div> a margin or padding to compensate for the loss of the fixed <div>.
You could just use j query to gram the width of the container and inject like you mentioned.
another idea would be to use dynamic widths and match them up to the container.
e.g. 50% couple that with calc and I don't see any reason why you cant achieve the exact width of the so called parent of the fixed <div>.
The solution I went for in the end was keeping the dummy div and then calculating the width of the fixed div with media queries.
#media only screen and (max-width : 1200px) {
position: fixed;
width: 30%;
margin-left: 1.3em;
}
#media only screen and (max-width : 992px) {
position: relative;
width: 95% ;
margin-right: 1.3em;
}
I also needed the div to not be fixed for small screens where the layout goes vertical.

Div with background color inside container has less width than its container

I am using bootstrap, the container is 915px width, I am running in mobile browser.
The problem is the div with background color is supposed to occupy the whole width, but there are some white margins.
how can i extend the div a few pixel in each side?
<div class="container">
<div class="" style="width:100%;height:90px;background-color:Red;margin-left:50px;">
</div>
</div>
Have you tried using a different container class from Bootstrap?
Perhaps "container-fluid" as described below and on the Bootstrap component page - http://getbootstrap.com/css/
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container.
<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport.
<div class="container-fluid">
...
</div>
You could also mix and match via Media Queries and JavaScript if you wanted to. For example on certain Media Query dimension triggers compensate for the style overrides you wish to be used.
Reference:
http://getbootstrap.com/css/
Try adding a negative margin
margin-left: -15px;
margin-right: -15px;
From what you've posted, it looks like the inner div is 100% of the container.
Either put the inner div outside of the container or make the container 100% width (there are other bootstrap containers for this).
You can try use .row:
<div class="container">
<div class="row" style="
width:100%;height:90px;background-color:Red;margin-left:50px;">
</div>
</div>

Twitter Bootstrap reducing well and field widths

I found some code online for a registration form that I am trying to tweak for my needs.
I am trying to make the well width smaller but I notice that <div class="well well-sm"> and <div class="well"> does not change the size of the well.
Setting a fixed with, e.g. <div class="well" style="width: 600px"> makes the well left aligned on the page instead of centering it which is what I want. How do I make the well width smaller?
Also, what is the proper way of fixing the width of the textfields to prevent them from becoming too wide on browser collapse/grow?
Demo.
well-sm does not make that much of a difference since it's not meant to alter the proportions so drastically, but only to make minute difference in forms.
You can add a width value, but to centre it you have to also add margin: 0 auto;. Here's a fiddle showing what I mean.
Regarding textbox resizing: The problem is that the element you're using (col-sm-6) sets width to 50%, but this only works when the browser has at least a width of 768px, check out this following CSS:
#media (min-width: 768px) //for this to work, at least 768px are needed
.col-sm-6 {
width: 50%;
}
When you have less than 768px, the second class (col-xs-12) becomes active. This takes 100% width. If you use col-xs-6 instead, it will resize to 50%.
So what you need to do, is to change the class containing the text fields from col-sm-6 col-xs-12 to col-sm-6 col-xs-6.

Foundation 5 re sizes two images in a row

I am working on a full page foundation 5 site that will work on mobile. Everything is going fine except for one issue.
HTML and CSS
<div class="row collapse" id="banners">
<div id="cityView" class="large-6 columns small-6 columns">
<img data-interchange="[images/voip_site_top_img_box_left_2014_small.jpg, (default)], [images/voip_site_top_img_box_left_2014.jpg, (large)]">
</div>
<div id="cityOrange" class="large-6 columns small-6 columns">
<img data-interchange="[images/vi_site_top_img_right_2014_small.jpg, (default)], [images/vi_site_top_img_right_2014.jpg, (large)]">
</div>
</div><!--End Row-->
<div class="row" id="information">
<div id="informationContent" class="large-12 columns">
Content
</div>
#banners{
}
#cityView{
height:inherit;
}
#cityView img{
width:100%;
padding-bottom:1px;
}
#cityOrange{
height:inherit;
}
#cityOrange img{
width:100%;
}
When I load this in my browser, the image on the right gets re sized and becomes a few pixels smaller then the image on the left.
I cant recreate it in jsFiddle so here is a screenshot
I cant just set the size in the CSS because then on the mobile version the images retain that and are way too large. How can I fix this?
This is happening because the images are not the same width.
In your HTML/CSS, both images are contained within equal width fluid containers (e.g. the classes large-6 columns). This means that no matter the viewport width, those two six column containers will ALWAYS be the same size (e.g. 50% of viewport).
In your comment you said "The image on the left is 949 x 362 and the image on the left is 971 x 362". Since the images scale proportionally to fit their container (max-width: 100%), they must be the same width or they will not scale at the same rate because the ratio of image width to container width will be different for each image.
The solution is to cut the images to be the same size (e.g. combine them and then cut that in half so they both have the same width, likely 960px) so that they scale at the exact same rate (e.g. ratio of image width to container width is identical).
I hope that makes sense. It may be a little confusing to wrap your head around but this is a pretty crucial core concept when it comes to RWD.