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.
Related
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
This is visual demonstration: Image
I'm trying to put in my laptop column(col-md-8) second column, but when I try, the other one went under the column of the laptop, how can I put a second(col-md-6)column inside a laptop column, and that column laptop still has its full size.
Do you want like this? It's a very short and a messy description you have. So I hope i'm right.
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-md-6 col-sm-6">
Laptop Image
</div>
</div>
</div>
</div>
"col-md-8 col-sm-12" classes will keep your column content as you like in tablet view+desktop view but when it becomes smaller like smartphone view, it will expand to the column to full width and you will still able to see your stuff inside of the laptop column.
Please read the bootstrap documentation from here. Anything else you want quick google will fix your issues or we're here at stackoverflow to help you out. :)
Update
This is what you want isn't it?
https://jsfiddle.net/5jrt314r/2/
Now Whatever goes inside of that .inside class will depend on the laptop image size you have. It will automatically horizontally and vertically center based on the .laptop class you have.
You said you want it responsive so you have to:
Keep your laptop element aspect ratio the same as the image.
Have a screen element that will always fill laptop's screen even if laptop image size changes due to it filling parent element.
If I am right you want this:
HTML:
<div class="row">
<div class="col-xs-8 laptop">
<div class="row">
<div class="col-xs-offset-3 col-xs-9 screen">
This column need to go in laptop screen
</div>
</div>
</div>
</div>
CSS:
.laptop {
background: url('http://devel0p.com/damir/wp-content/themes/helium/images/portofolio/macbook.png');
background-size: 100%;
background-repeat: no-repeat;
/* Padding will keep element aspect ratio so we always show image in it's original aspect ratio */
padding-bottom: 89.32%;
}
.screen {
background: red;
/* Make sure this element is always the size of the screen */
padding-bottom: 64%;
}
I calculated image aspect ratio to be 89.32~% by dividing width by height which is respectively 2084px and 2333px.
Here is a codepen example http://codepen.io/anon/pen/aNqKZL
UPDATE
In the first example .screen element would go beyond laptop screen because of it being stretched by it's content. Here is a version that deals with it http://codepen.io/anon/pen/qZxKRo
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.
I'm a beginner in css and I have a little problem. I tested different methods to handle a responsive 4 div grid with css, and I failed.
I want to responsively arrange the 4 divs as an grid with 2 columns and, if the display is to narrow it should be floating to a one column layout.
Here is a sketch of the responsive grid:
Here is a simple responsive grid with 4 div boxes in plain CSS and HTML it aranges from two to one columns when the browser width becomes smaller :
DEMO (resize the result window to see the effect)
Note that the max-width value on the #container is set to 450px so that 2 blocks + their margin can fit by width in two colmuns.
When the widow is smaller than 450px the width of the #container adapts to the window width and as the block can't fit anymore, they rearage to one column.
#container {
text-align: center;
max-width: 450px;
margin: 0 auto;
}
.block {
width: 200px;
height: 200px;
margin: 10px;
display: inline-block;
background: #00CC99;
}
<div id="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
You may want to check out Bootstrap, and specifically their Grid System. You can easily accomplish what you want with that. Otherwise, you'd want to look into writing your own CSS Media Queries to handle the different screen sizes.
Here's a JSFiddle showing how this can be achieved using Bootstrap. Just drag the side of the Result container to make it smaller and you can see the blocks shift. This may need some tweaking but it should get you going.
<div class="row">
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">1</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">2</div>
</div>
<div class="col-sm-2 col-sm-offset-3 col-xs-12">
<div class="block">3</div>
</div>
<div class="col-sm-3 col-xs-12">
<div class="block">4</div>
</div>
</div>
In the above code, I'm creating a Bootstrap Grid which uses 12 columns. You can specify the column width at different screen sizes, for example the class col-sm-2 is saying use 2/12ths of the width for small screen sizes, then offset it 3 to center it. col-xs-12 says to use the full width for extra small screen sizes (essentially moving each block to its own row for extra small screens). Note the row class as well which is also Bootstrap specific.
Hopefully this helps!
Bootstrap is a great tool to do this as the above answerer said. Bootstrap allows you to position items in a grid layout (as you want).
Another way to do this is create media queries in css that will take effect when the browser has a smaller or larger min-width.
I recommend using Bootstrap as all of the heavy lifting is done for you and you would just have to make small tweaks to ensure it looks like you want it to.
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.