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...
Related
I have successfully created css files for vanilla Bootstrap, selectize, etc.
But now I am having tough times trying to modify default css for Bootstrap-select. Specifically, I am trying to
Remove the border of the element
Change the width of the element so that it fits into the column with given width
As for now, the second column for some reason overlaps the first column. This error goes away if you remove the th.zeon-fixed-narrow-column {width: 1.5em;}.
The think is that I don't want to remove it, I DO WANT the first column to be as narrow as 1.5em !
Here's my jsFiddle
table {
table-layout: fixed;
}
th.zeon-fixed-narrow-column {
width: 1.5em;
}
.zeon-selectpicker{
border:none !important;
width: 1.5em;
}
.zeon-selectpicker:focus{
background-color:red;
}
table {
table-layout: fixed;
}
th.zeon-fixed-narrow-column {
width: 1.5em;
}
.zeon-selectpicker{
border:none !important;
width: 1.5em;
}
.zeon-selectpicker:focus{
background-color:red;
}
If I understand you correctly. You want the width of the dropdown to be equal to your table header right?
To achieve this add this to your css:
.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
width:100%;
}
on default the above bootstrap-select class has a fixed width of 220px.
You can see the result here: JSFIDDLE.
If this is not what you want please tell me, I will try to help you
I have this site header I'm working on but I can't get the logo and the site title to line up horizontally. I'm relatively new to CSS so would appreciate any hand-holding anyone can offer please ;-)
The logo image is styled with:
.logo {
float:left;
}
Whereas the h1.site-title and h2.site-description text is styled thus:
h1.site-title, h2.site-description {
position:relative;
margin-left: 130px; !important
}
I'm pretty sure I need to make another DIV and can't get the positioning right so the logo is at the left, then immediately next to it the site title/description.
(it should be #logo) Floating them both left works
#logo {
float: left;
}
.home-link {
float: left;
}
and remove the margin-left
There are a couple of things that I would recommend changing:
In your HTML, you have logo set to an ID, so in your CSS it should use a # instead of a period.
You do not need to tag qualify your classes in your CSS, meaning the h1 and h2 are not needed, just .site-title and .site-description should work.
Avoid using !important whenever possible. It makes your code very hard to adjust later.
instead of working with .site-title and .site-description work with their wrapping container, .home-link. Float both it and #logo left.
If you want them to line up side by side, you will have to change the width of home-link to something smaller than 100%.
remove the margin-left.
so your CSS would look like this:
#logo { float: left; }
.home-link { float: left; width: 75%; }
Im having trouble lining up the thumbnails (4 blocks). The last block broke to the second line. Is it the width of the container inside div? If I minimize the browser smaller, the blocks are lined up just fine, but no gaps between them. http://magnixsolutions.com/dev/test/test.html.
Also why is the cursor centered in the textfields?
To position the cursor to the left in the textfields, you can use this:
.fname, .lname, .zipcode
{
text-align: left;
}
Yes, it is. Your thumbnails container is shorter than your thumbnail sum their lengths together with their gaps.
Try something like this:
.thumbnails {
margin-left: -15px;
...
}
.thumbnails li {
margin-left: 15px;
...
}
.thumbnail {
width: 220px;
...
}
This is the modification to your bootstrap css file. So if it does not take any effect, apply !important to enforce them.
UPDATE:
you forgot to apply:
.thumbnails > li {
margin-left: 15px !important
}
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/
I am not sure why the about field on my site, sailing down in IE7 (see http://img.skitch.com/20090629-t8mcp6tffd8kpwxrbk1rchc6wu.jpg). (It looks fine in FF for example). Who can suggest a way to fix it?
Steps to reproduce:
Go to http://j-in.org.ua:9000/account/login
Login using data (login: test, pass: test)
You will see same as on attached image :(
From what I can see you need to have two columns just have a containing section and place two floating divs inside of them then they will sit together and you can adjust either to your liking.
content {
clear: both;
width: 950px;
padding-bottom: 10px;
background:#fff;
overflow:hidden;
}
contentLeft {
float: left;
display:inline;
width: 630px;
margin: 10px;
background:#fff;
}
contentRight {
float: right;
width: 270px;
margin-top:25px;
margin-right:15px;
background:#d7e5f7;
}
Obviously you will need to adjust the size of the columns to suit your site as well as colours etc but that should do it. You also need to make sure that your ContentLeft and ContentRight widths do not exceed the Contents width (including margins).