- This topic has 5 replies, 2 voices, and was last updated 10 years, 7 months ago by
.
-
Posts
-
Hi Ernest, please take a look at second block here http://skylarkdev.wpengine.com/collection-3/ the one that says SEARCH BY GENRE.
When you click on the down arrow you would see the portfolio categories configured for search.
Is there any way to display them in two columns instead of the one long one?Thanks.
Elijah.I think I might have a solution without touching the code. Normally it would require adding some HTML elements, but I’ve tried the following CSS on the demo and it worked for me.
[code]
.asp_option_cat {
width: 200px;
display: inline-block;
}.categoryfilter {
width: 420px;
}
[/code]That will make each option 200px wide displayed as inline-block and the container 420 pixels. That means it’s printed to 2 columns like so: http://i.imgur.com/UP0PMHA.png
Thanks Ernest but there are a couple of things missing here:
1. When broswer re-sized the display of Still Lifes and Landscape is cut off (attached C1.jpg)
2. Blocks are not aligned (C2.jpg) – wich is probably related to #3, but this is also weird:
3. There i a block that I had to remove in css:
#ajaxsearchprobsettings11_1 legend {
display: none;
}
…If I don’t remove it then the page will show the empty field as in Legend.jpgPage url: http://skylarkdev.wpengine.com/collection-3/
If has a quick fix – great, if it doesn’t, then I’ll tell my client to use one column (My only worry here is tat if there will be 20 categories and I will use ‘push content down, then it would look pretty bad. So probably in the future it might not be a bad idea to have column layout anyway)
Thanks.
ElijahHow about increasing the width values and perhaps adding media queries for different browsers?
First, try setting the fieldset width to 100%:
[code].searchsettings fieldset {
width: 100% !important;
}[/code]then the options to a min-width of 200px and a width of 45%:
[code].asp_option_cat {
min-width: 200px;
display: inline-block;
width: 45%;
}
[/code]Try different values as well, but this way the width is going to be 45% on bigger screens, and minimum of 200 if it goes down. And if the screen is too small it automatically breaks the line to 1 column.
The space on C2.jpg is because of the line alignment. Since the first element label is broken to two lines because of the 200px width, it icreases the line height, and the second one is printed to the line bottom by default. You can try increasing the line height or the vertical alignment, but as I can see there are more animated elements on the page, including the scrolling, and different vertical alignments may cause blurring in the text (browser bug). There is a good chance you will have to live with it, I don’t see other solution in inline-block mode.
- You must be logged in to reply to this topic.