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
}
Related
I would like to give defined horizontal gap between three containers. A Gap right and left of the middle container to keep the sections full width. No padding.
Live-view: http://live.bernhard-schrammek.de/#projects
Thank you for help and regards from Berlin
Tibor
You can add a margin right to each element and cancel it on the last:
.item {
margin-right: 15px;
}
.item:last-child {
margin-right: 0;
}
Or you can just add it to all except the last:
.item:nth-last-child(n+2) {
margin-right: 15px;
}
Pertinent to the description, you may use margin-left or margin-right CSS properties, for example, margin-left:10px; (absolute) or margin-left:1%; (relative).
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 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%; }
As an example I'm trying to create a thumbnail, but my automatic img css as listed below is applied
img, img a {
border: none;
margin-top:10px;
margin-bottom:10px;
}
I can't make sense of it in my mind for some reason. I know the syntax is probably simple, but I can't seem to remember it.
Thanks
Chris
The reason you can not add margin to your images is because img elements are, by default, inline. It means you can not give them dimensions, or add margin from the bottom or top (and some other stuff you should probably read about).
This means that in order to give img element margin from top or bottom, you need to declare it as a block, or rather inline-block. This is achieved using
img { display: inline-block; }
Then you can add away your margins, and viola:
img {
display: inline-block;
margin: 10px 0; }
Are you trying to style all images a certain way, then exclude images within a certain container div? If your container div is called #wrapper, then do something like this:
#wrapper img,
#wrapper a img /* assuming that's what you meant rather than img a */
{
/* undo what you did above for images inside #wrapper */
margin-top: 0; margin-bottom: 0;
}
Such loose selectors for img can be troublesome because images are used all the time in different contexts. I prefer to style only images that are inside a #content div, or similar.
Might be a bit too early in the morning for me but I struggling to figure out what I've done wrong here.
I have a page with 9 boxes and I would like them to be positioned with 3 on one line, 3 on another and 3 on the other.
Have a look here: http://dev.tim-morgan.co.uk/other/Untitled-1.html
Right now you can see, the list bullets are showing and each box looks like it's going down like a staircase since I put in float: left;
Any ideas of what I'm doing wrong?
Thanks
You need to:
Move float: left from ul.tabs2 a to ul.tabs2 li.
Add overflow: hidden to .tabs2 to clear the floats.
Add clear: left to every 3n+1 li using :nth-child, try this:
ul.tabs2 li:nth-child(3n+1) {
clear: left
}
If you need to support Internet Explorer 8 and lower (no nth-child support), you can use http://selectivizr.com/, or just add the clear: left rule yourself to each relevant li.
You might want to remove the default styles on your <li>s, they could be interfering with the floating of the <a>s in the <li>s.
I’d suggest:
ul.tabs2 {
list-style: none;
}
ul.tabs2 li {
margin: 0;
padding: 0;
}
For getting three in a row, #thirydot’s answer looks good. If you know how wide you want each box to be, you could set that width on the <a>s, then set a width on the <ul>:
ul.tabs2 {
width: 300px;
}
ul.tabs2 li a {
width: 100px;
}
In your css add this
ul.tabs2 li {display:block;float:left;width:33%;margin:0 0 10px 0;padding:0;}
and also add overflow:hidden and list-style:none to your ul.tabs2 if you don't want bullets.