I am new to responsive design, I want to make responsive menus, images, blocks and every thing in the website templates.
I ready that all width should be in percentage, I make this example
http://jsfiddle.net/hQBR6/
How can I make the form with it's input respond to different screen size without going below the ul??
Problem is, that you are mixing margin set in PX and widths set in %. When screen is resized below certain dimensions, there isn't enough space left for elements with margin that big and input falls below.
You should set your margins in % - if you are working on repsonsive design.
Here is how I modified your code to make it work:
ul#menu{
border:1px solid black;
display: inline-block;
float:left;
max-width:50%;
margin-left:5%; /* changed to percentage */
margin-top:36px; /* should be percentage as well*/
list-style-type:none;
}
ul#menu li{
display: inline-block;
float:left;
margin-right:36px; /* should be percentage as well*/
width: auto;
}
#header form {
display: inline-block;
margin-right:1%; /* changed to percentage */
float:right;
width:10%;
}
#header form input{
margin-top:28px;
background-color: #e0e0e0;
border-radius:4px;
border:none;
height: 26px;
color:#a6a6a6;
}
note: I played only with left/right margins and real dimensions are up to you.
Hope this helps
For your quick start please go through below link you will find nice examples to start responsive design.
http://twitter.github.com/bootstrap/
Related
I would like to raise the width of my input type text in my boostrap navbar, and keep it responsive, but don't know how to do that . Seem to be completely impossible
Here is the sample of the code
http://www.bootply.com/klx0LnIMF9
I used to watched this post:
Bootstrap 3 - How to maximize input width inside navbar
In fact the code given by Bass Jobsen is the exact same code , somehow it 's workinb for bootstrap 3.0.0 but not for bootstrap 3.2.0
If anyone can help, it could be great,
Thanks in advance
Anselme
well, it's not the same solution you have in that link, just a quick fix I've made for this question and may need a few adjustments to fit your needs, but take a look at your forked example
Only one tiny change in your HTML (that inline style you don't need at all and it's more annoying than useful) and a bit of CSS as follows:
.navbar-form {
padding:0;
margin-right: 0px;
margin-left: 0px;
display: inline-block;
width: 50% !important;
border: 0px none;
}
.form-group {
width:100%;
}
.input-group-addon:first-child {
border-right: 0px none;
width: 30px !important;
}
.navbar-form .input-group {
vertical-align: middle;
display: inline-table;
width: 100%;
}
As you'll probably notice, I just get rid of the float and replace elements properties by inline. Once done, I have the ability to better play with responsive widths. You'll probably notice the !important definitions. You may or may not need them (Bootstrap has a few !important declarations, so be sure to test), but basically I'm applying this to ALL sizes, so you may probably want to change that width: 50% !important; in .navbar-form to width: 100% !important; for 768px and under, but anyways, here you have the tools to play around and adjust as you like
hey i have set some breakpoints and ive set list item in percentage and it fits well in different breakpoints.
but my default one which i haven't set is displayed like this.
here is my sass code.
li
{
width:20%;
padding: 2px;
float:left;
#include media($xl-desktop) { // As defined in _grid-settings.scss
width:10%;
}
#include media($mobile) { // As defined in _grid-settings.scss
width:33.3333%;
}
}
Please tell me where am i doing it wrong.
thanks.
Here is my Demo
Demo Link
can you try this layout?
to make images responsive you need to add width: 100% (you did the exact oppsite);
Make an image responsive - simplest way
http://jsfiddle.net/95EfW/
css:
ul{
list-style: none;
}
li{
float: left;
padding:0;
margin:0;
width: 20%;
padding: 4px;
}
img{
width: 100%;
height: 100%;
}
thanks for the demo, it helps. So here is the issue, the issue is each of your image is different size, hence when you float left it brings the remaining pictures down in different screens. To fix the issue, you have two methods, using inline-block (rather than float on li) or setting a static height for different size screens. here is a small demo for setting heights jsfiddle.net/f5cgT/2 – ravitadi 1 hour ago
This will prevent the floats to drop as you clear each row.
.galleryList li:nth-child(6n+6) {
clear: left;
}
But the images original size should be the same 500px x 750px as well. Than you would not have the gaps in the first place...
I want to divide my webpage horizontally in to 2 parts, my monitor layout is 1410 X 752, if I write css code like this
.left{
width:210px;
}
.right{
width:1200px;
}
it wont work correctly in other monitors and also when I zoom in/out the browser the page structure will be totally out of order I mean the left DIV moves down and it will be to under the right DIV !
I know I must use % but when zoom in/out the browser scroll bar doesn't appear, please check this address to see what I said. what shall I do ?
thanks.
First of all, you aren't telling your divs to go anywhere. They are just stacking themselves on-top of each other.
You do however have the correct start and methodology, though it should be modified to fit current best practices. Let me elaborate...
To make your code work you need to add a float property change your code to this:
.left{
float: left;
width:210px;
}
.right{
float: left; /* could also put "right" here as a value */
width:1200px;
}
Now with that said... a better option that will produce the same result is this:
.left{
display: inline-block;
width:210px;
}
.right{
display: inline-block;
width:1200px;
}
Let's go a step further.... While this will "work" it will look terrible on other peoples screens. What if my resolution is 1280x1024, which isn't as wide as yours. I'll have to scroll to the right to see your site. That will encourage people to LEAVE your site. We can fix this though...
.left{
display: inline-block;
width: 20%;
}
.right{
display: inline-block;
width: 80%;
}
Now, no matter how big your browser window is your divs will take up 80% of the right side of the screen, and 20% of the left side of the screen. NOTE This will depend on a good reset.css as the width of an element is by default does not include any padding, margin or border space. If you add a padding or margin or border, the above method will break. To get around that there are a few options. You can use % values for your padding and margins but that breaks if you add a border.
A common solution is to add this property to your css:
.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
}
.right{
display: inline-block;
width: 80%;
box-sizing: border-box;
}
This will fix any padding or margin space issues mentioned above, but you still have to account for margin space. Let's say you want a 5% gutter between the two, then you need this code:
.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
margin-right: 5%;
}
.right{
display: inline-block;
width: 75%;
box-sizing: border-box;
}
Notice how I subtracted 5% from the right column to incorporate the margin space. if you add it all up 20+5=25 25+75=100% 100% means it works, if its more than 100% it will break.
For additional reading so some research (google) Responsive Layout/Web Design.
Info on float property -> http://www.w3.org/wiki/CSS/Properties/float
Info on display property -> http://www.w3.org/wiki/CSS/Properties/display
Info on box-sizing property -> http://www.w3.org/TR/css3-ui/#box-sizing
A good resource to determine browser compatibility is http://caniuse.com/
You should be using % instead of px here is a simple example.
If you are using 1200 of a 1410 monitor then we use math to get the % relative to that width
(1200 * 100) / 1410 = 85% (more or less... the right answer will be 85.71428571428571 %, but really don't matter).
HTML
<div class="left"></div>
<div class="right"></div>
CSS
.left {
float: left;
width: 15%;
background: green;
height: 300px;
}
.right {
float: left;
width: 85%;
background: blue;
height: 300px;
}
Live example.
As everyone says , you should use percentage, cause your window browser will never do the size of your screen, unless it is set on full screen.
Then scrollbars might show up.
% percentage are quiet safe if you manage a little less than 100% all together (calculation from percentage dow to pixels, can add extra pixels).
Differents ways to build ypour layout can help to use pixels, as :
display: table-cell:
you need to set the size of the smallest in pixel and set others to 100% to shrink small one to its size.
float:
set float and width on first element. second element can remain in the flow with no size and overflow:hidden; to keep aside float element and use all space left.
If you need a fiddle to get the idea, ask.
Have been trying to sort out a centering of the navigation bar, just above the banner (link). Ran through a few solutions on here, and I have played around with custom CSS to try certain variations, but still cant get what i am after. Put simply, i am just wanting to get the menu centered. I have read that it had to be fixed width, but then heard otherwise. Hopefully the solution is something i can get my head around.
Thanks
You need to remove some of css rules from your style sheet and add few - see below css to get desired layout.
CSS:
#header #navigation {
/*float: left;*/ /* remove this property*/
}
#header #navigation {
background: none repeat scroll 0 center transparent;
box-shadow: none;
clear: none;
/*float: right;*/ /* remove this property*/
/*width: auto;*/ /* remove this property*/
width: 285px; /* add width here to get the actual width of menu so we can make it center*/
}
See screen shot:
I'm trying to place 6 images one next to another with css,
the whole thing should be able to scale pretty well in most displays (except for mobile for the moment)
so I've made this:
http://pelloponisos.telesto.gr/galleryTest/test/gallery.php#
(apparently I'm trying to make yet another carousel)
most of my images have a bigger width than height so when I scaled them I just put
width:x% in the li container and 100% for the image width.
but the sixth image is different and it causes quite a bit of trouble
I tried setting the height too but you can only scale the images based on one of the two.
The only thing that worked so far was to put a static height in the ul and then scale in both width and height but then it's not a fluid grid.
is there any way to make all li elements have a fluid height and then scale all images based on that? or if not
is there any way to make any image with different ratio scale to the one I specify in the css?
I stripped down your code a little bit, but this seems to get closer to the idea. The trick is to set the width in the container (.upper ul li) then for the images use: max-width:100%; height:auto. Also, the padding is now in %.
#carousel{
position:relative;
}
#wrapper{
margin:0 auto;
}
#slides{
width: 100%;
}
.upper ul li{
width: 200px;
max-width: 100%;
list-style:none outside none;
float:left;
padding-bottom:5px;
padding:2%;
}
img.galleryThumbnail{
max-width:100%;
height:auto;
}
.info{
display:none;
}
#buttons img{
position:absolute;
top:90px;
}
#buttons #prev img{
position:absolute;
left:29px;}
#buttons #next img{
position:absolute;
right:21px;
}