I´m creating a page with Bootstrap and I need to make 4 columns leaving a space between each column of 5px!
I followed this tutorial ( http://andre-abt.com/2013/11/26/how-to-use-the-bootstrap-3-grid-system-with-column-margins/
). But for me doesn't work fine because if a put a link inside of the column to wrap all column is also possible make click outside of the column. (It's possible click in that 5px of margin).
jsfiddle.net/andresgl/2f7Lhmwd/ (Conferences, Summits, Events)
I hope some can help me.
Thanks!
Overcomplicated example for what you want to achieve, but if you want to keep it as it is add
.item-menu {
position:relative;
}
http://jsfiddle.net/2f7Lhmwd/2/
a{ margin:0;padding:0; }
This will remove all padding and margins from the anchor tag.
Related
I have a WordPress website with a custom post type that I need to display in a Bootstrap grid.
Here's what I mean :
I need to create a gutter in the center, but obviously if I add a padding-left, it moves every element. I only need to add padding to the item on the right. Since the content is dynamic, I can't just add a class and type
.right-elements { padding-left: 10px; }
Is there a CSS property for even elements or something ?
( since the issue is not really unique I don't feel like I should add the code, but tell me if you need it )
Thanks !
If you're only interested in modifying even elements, you can use the :nth-child() rule:
.my-class:nth-child(even) { padding-left: 10px; }
I am pretty new to css and html and I am trying to create a drop-down menu that has 3 or 4 columns of links per drop down. I want the columns to be inline with each other. I have managed to accomplish that but the links in each column are going on two or more lines and I'd like them to display on one.
I've been messing around with the css but can't seem to figure out how to make them display on one line per link.
In my codpen, you will see what I am working with: http://codepen.io/anon/pen/vLQGqM
The best I've been able to do is make
.tlgnav .tlgnav-column {
width: 100%;
}
, but this makes the columns stack on top of each other, which is not what I want.
I am thinking it might have something to do with my .tlgnav li being set at width of 16.66% but if I change that, my menu doesn't fill the width of the screen.
Can anyone tell me what I am doing wrong?
You can use white-space : nowrap to avoid the line breaking, but maybe it's a better way to doing this. I answer with this solution but if someone gets something better follow it.
http://codepen.io/anon/pen/BjGzgZ
.tlgnav h3 + ul li {
white-space:nowrap;
}
Have a table set up, with a table nested in most of the cells, basically a pyramid matrix type structure. Issue i'm having is the cell borders don't line up and in some cases double up, so i'm a little confused as how to fix it, having already used border specific values, ie, border-bottom and border-right, etc.
Codehttp://jsfiddle.net/WgRs6/5/
PS: I'm new to this so not sure how to post the CSS and HTML like in other user posts, where they're boxed in and you can scroll through, so just attached the
The problem was that you had a padding set..
So, remove the padding for the <td>
Kindly check this fiddle
I,ve added
td{
padding:0;
}
to your css
UPDATE
See the fiddle
I've found out the problem in your code..You used several tables inside a <td> which created such a problem.In my fiddle i've done the whole thing with just one table using rowspan and colspan.Check it..
I'm sorry that i accidentally mis placed your table values while copy pasting and because it took a lot of time i was not able to complete the html.So kindly follow the same procedure inorder to generate the full table..
Just set the td padding to 0px:
td{
padding: 0 !important;
}
http://jsfiddle.net/WgRs6/7/
Please have a look at http://jsfiddle.net/kV7Uq/1/
.productList div.grid:nth-child(4n+5){
clear:left;
}
What I'm trying to achieve is to create a 4 column grid. The above code used in the fiddle seems to be just fine - but if you look at that fiddle there is no 4 column grid.
<div class="pageNav"></div>
<div class="pageHeading"></div>
The above two divs that are also child divs of the container div, and located prior to the grid divs are causing a conflict. If those two divs are removed, the grid comes out just fine. I'm not sure if this is even fixable, please help - thank you.
Just offset it by 2 to compensate for those divs. Instead of +5, use +3.
.productList div.grid:nth-child(4n+3){
clear:left;
}
http://jsfiddle.net/kV7Uq/2/
If you don't want the very first box to have the clear: left then it would be +7.
I need your help.
The Title in the green Box "News" appears right under this Link.
http://www.mjart.ch/category/news/
But because of this weird Template I'm using, there are sometimes some imperfections. On this Site here
http://www.mjart.ch/portfolio/
the Green title seems to disappear behind the padding border. I really don't know why.
What I found out is that there are 2 different CSS styles. The first one that works is a .blog-title and the second one is a .single-title. But both are same styled. I would be happy about some help.
Hi if you dont want to change the structure of the template you can add this css rules
.page-id-21 .single-page{
margin:0;
}
.page-id-21 .single-page .single-content{
margin-left: 25px;
}
I added a .page-id-21 class, otherwise in the contact page you will add a margin.
This can be a solution, another is to search the correct template page, if it's a premium plugin it will have it, and you dont need to add the css rules.