I have a problem displaying a portfolio on my site. I would like to display more than 3 in row, like here.
Is there any easy CSS command to change it?
Yes there is.
Simply change the width of the li elements to something smaller or equal to 25%.
.home-section ul li {
float: left;
margin-right: 5.63%;
width: 20%; /*changed this value*/
Related
I tried some code snippets to split wordpress sub-menu into two colums and I got some success. But they are not fully splitted. There is white space beneath odd menu-items and white-space above even menu-items. Link for Menu
In the above web page, Menu --> Nawishta Prime Time --> Season 2
It seems the menu-items are not in line and creating white gaps. Following is the CSS code I used:
.sub-menu-columns ul.sub-menu li {
clear: initial;
display: inline-block;
float: left;
width: 50%;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
float: left;
margin-right: 300px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
float: right;
}
I applied this class "sub-menu-columns" on the menu item "Season 2" in wordpress menu settings.
What I need is to remove gaps like:
There is not enough space for your elements to be next to each other. With using margin you are taking up the space, so it breakes to the next line.
Please remove the margin-right: 300px; This is not the right way to go.
There are multiple ways to achieve what you like.
You can set a width for your menu, so the child elements now how to stretch the 50% you have defined:
.sub-menu { width: 480px; }
Using this, your columns will align next to each other.
If you do not want to use a fixed width, you can for example use CSS grid to define how the child columns should look like:
.sub-menu { display: grid; grid-template-columns: 1fr 1fr; }
I have a list of items displayed in 3 columns. The items are of various heights which is causing problems with their alignments, forcing larges gaps. I would like them to display tight to each other vertically. You can see what I am talking about at my site Matthew Grenier Consulting. I would like the "Bright Beginnings" item to be directly beneath the "Yes We Do Coffee" item and the same in the first column. Any ideas how I can do this with CSS? I have played around for a couple hours without luck. Thanks.
Simply use display: inline-block; together with vertical-align: top; instead of float: left;.
div.appico ul.sp-portfolio-items > li {
background: transparent none repeat scroll 0% 0%;
padding: 0px;
margin: 0px;
/* float: left; remove this! */
display: inline-block; /* use this */
vertical-align: top; /* and this */
}
Also, remove float: left; from div.appico .sp-portfolio-item, or replace it as well.
This is the visual result:
If you want the fourth box even closer to the first one, I suggest you restructure this part of the page so that the boxes are beneath eachother (using three columns) instead of to the right of eachother, or you could set a fixed height.
.sp-portfolio-item:nth-child(3n+1){
clear:left
}
I want to make each LI equal width and fill 100% of the width on Bootstrap tabs.
I have been reading that you need to have
ul{display:table}
li{display:table-cell}
But this just isn't working for me, i am not sure if it is Bootstrap that is causing this or not. But i need to be able to accommodate 3 - 5 tabs depending on the product page.
I have a fiddle here http://jsfiddle.net/xQ8Q8/1/ to shows what i am trying to do.
There is a float: left defined in .nav-tabs > li. Set float: none in your CSS to override that behavior:
.nav-tabs > li {
float: none;
}
Now you have to correct the UL height:
#productReviewTab {
display: table;
width: 100%;
margin-bottom: 31px; // Just to maintain your initial height
}
Yes, I removed the height property, you could set it to 44px if you want. For what I test, is the same.
I'm building with grids for the first time and wanted to stretch the bootstrap nav element to so that the links are wider. I can't quite recreate it in the fiddle exactly:
http://jsfiddle.net/yjyTq/
Basically I want to the nav elements to be a bit larger and the entire nav area to fill the 6 columns specified, but when I over-ride the bootstrap code the nav li elements won't stack up when the browser is narrowed.
.nav{
width:100%;
}
.nav-pills>li{
width:23%;
font-size:1.1em;
}
Any ideas how I can achieve this without breaking everything?
TIA
You can always add padding-left and padding-right to your nav li a elements to increase the size of the li
So this:
.nav-pills>li>a {
text-align:center;
padding-left: 50px;
padding-right: 50px;
}
looks like this: http://jsfiddle.net/yjyTq/1/
Going to be quite difficult to explain this so I've created a JS-Fiddle so you guys can see what I mean...
If you look under the 'products' tab the second link in the list I've made quite long, the result is that it overflows out the boundaries of the list. How can I make this that if a link is very long, that the width of the containing ul stretches to contain the link?
Again having a look at the JSfiddle will make things more clear in what's happening and what needs to be done.
PS - Need to get it to work without editing the HTML at all!
//Ignore this
Just remove the fixed width of your list:
ul li {
display: block;
position: relative;
float: left;
width: 140px; // <-- Remove this
height: 25px;
}
It will make your default width for your list become auto and you're done.
Demo: http://jsfiddle.net/Kpxpf/5/
Just change the width:140px; to min-width:140px; in ul li
Demo :
http://jsfiddle.net/Kpxpf/6/
You're constraining the width of your <li>s from the style on the top-level menu. This will keep your intended width: 140px; on the top-level menu and allow the sub menu to size based on its content.
jsFiddle
ul#menu li ul li {
width:auto;
}
You are setting a fixed width on the nested lists.
Change the ul li styles to:
#menu > li {
display: block;
position: relative;
float: left;
width: 140px;
height: 25px;
}
This will remove the fixed width from the nested uls allowing them to take as much space as needed.
jsFiddle