How to create dynamic responsive four columns with border style?
Tags: javascript,jquery,css
Problem :
I'm working on a responsive four columns and I want to make it dynamic since i'll be creating this one for custom_post in wordpress. Here is my problem.
Since it's dynamic then the maximum column is 4 so I have this list of items I want to remove the border-style of the last element so I can make it using :last-child but my problem is that if the page is being resized then the columns will split into 3 , 2 , 1 and so on and also if I have just 1 or 2 or 3 items how can I target that items and have those borders in the middle and make it horizontally center. Do I need to do this with jquery or I can make it with pure CSS?
Check my fiddle
Note: I can have as many item as possible.
Solution :
You will certainly need @media queries for the borders.
To center the items you could use
#spring-vet-inner {
text-align: center;
}
#spring-vet-inner .sv-list {
display: inline-block;
width:50%;
text-align:center;
margin-top:40px;
box-sizing:border-box;
}
https://jsfiddle.net/stby04/m1x78tL2/
CSS Howto..
Using diff If you are on OS X or LInux, type: diff file1.css file2.css > cssdiff.patch touch diff.css patch diff.css cssdiff.patch ...
Using CSS only: Right/Left Flippiing: Working Fiddle .Container { height: 200px; overflow-x: auto; } .Content { height: 300px; } .Flipped { direction: rtl; } .Content { direction: ltr; } Top/Bottom...
Use this, $(document).ready(function() { $('.button').click(function() { var next = $(this).next('.inner'); next.toggle(); $('.inner').not(next).hide(); }); }); Demo Fiddle Or CSS method, $(document).ready(function() { $('.button').click(function() { var next = $(this).next('.inner'); var cssState =...
Use psuedo CSS selector :first-child Demo .ui-collapsible-content li:first-child { -webkit-box-shadow: inset 0px 8px 8px -2px #AAAAAA; -moz-box-shadow: inset 0px 8px 8px -2px #AAAAAA; box-shadow: inset 0px 8px 8px -2px #AAAAAA;...
turn stuff into a class and then put div class="stuff" around the video #holder { position: absolute; height:400px; width:auto; } .stuff { position: absolute; height:inherit; width:inherit; top: 0; right: 0;...
If you want it to be applied on focus, perhaps you should include the :focus pseudo-class. If that works the next step is to get rid of all those !importants...
Simply add :not(:last-child) to the selector: .container div:nth-child(n+4):not(:last-child) ...
There's no magic here (OK, there is a bit, but behind the scenes). Your Resource interface's implementation is automatically generated by GWT, so when you call res.button().gwtbutton(), it will return...
Your code is perfect. The only issue that was found/caught by the jsfiddle was the broken img tag. Tip! If you can't get the image to load, then you can...
A solution with full IE6+ support. I'll pull out and explain the relevant bits of code. Modern support div.content_columns { width: 320px; outline: 1px solid black; background-color: gold; text-align: center;...
Simply floating the element would be ideal as it will still retain padding information from the parent to align top part correctly with the sibling inline element. Fiddle: http://jsfiddle.net/Varinder/eg7DW/1/ Edit...
When working locally, use http:// instead of the protocol-less // The Google font's aren't loading now... <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lora%3A400%2C400italic%2C700%2C700italic%7CBitter%3A400&subset=latin%2Clatin-ext' type='text/css' media='all' /> ...
You cant float:middle. Use margin:auto to center a block.
Demo css only solution #wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; /* optional */ -webkit-box-align:...
Foundation when used with Compass is what's called a Compass Extension (learn more about Extensions). It's basically a collection of Sass and Ruby files bundled in a way that makes...
You need to include the descendant combinator (the space): form :nth-child(3) { /* CSS */ } Without the space, you're selecting the form-element if it's the third-child of its parent,...
AppGyver dev here! On iOS, it's available via the legacy Steroids API: steroids.view.setBackgroundColor("FF0000") (and steroids.view.setBackgroundImage). Supersonic API implementation is pending Android support for this. API reference:...
I create this: html <h1 class="ribbon"> <strong class="ribbon-content">CAPTURE|WEDDING PHOTOGRAPHY</strong> </h1> css .ribbon { font-size: 16px !important; /* This ribbon is based on a 16px font side and a 24px vertical...
I'd suggest that if you're using JavaScript for this, that you don't need ANCHOR tags because you've already negated the need for them. I'd suggest changing to adding click events...
One method to solve the miscalculation of container height of elements having floating children is to put overflow:hidden on them. The miscalculation occurs because at the time of calculating the...
Use display: table for parent and table-cell for child and alter your css as following: a.button { background-color: green; padding: 5px 10px; color: #ffffff; cursor: pointer; position: relative; display: table;...
Just apply a padding (or a margin, depending on the style you've used) between elements, e.g. td a + a { padding-left: 3em; } ...
Set the float property for each div to be matched, for example left to each, give each of them enough width so that the parent contains them. DEMO...
This finds all elements with text-align: justify and sets the border to red. It should be plenty to get you started. Note: This is not very efficient, but there's not...
tl;dr: Yes, it's a bad practice to use tables align attribute. You should use CSS instead. I would: Use XSLT to transform XML into HTML Use CSS to style HTML...
A common problem, it's an issue of not having a width or height properly set. You have to tell it to redraw the map with something like this google.maps.event.trigger(map, 'resize')...
Im not sure if you want JS, i decided to answer your question if you want CSS3, try this: HTML: <img src="image.jpg" data-src-960px="image-960px.jpg" data-src-1260px="image-1260px.jpg" alt=""> CSS: @media (min-device-width:320px) { img[data-src-960px]...
You have to wrap each label-input combination in a element, and then wrap that element in some container. This container should have a min-width, and display: inline-block;. Then you let...
#svgToChange:Hover #ToChange{fill: #whatever} Edit from question asker: I figured out how to do it, the problem was because I had the svg in an img tag instead of an object...
Add clear: left; float: left; to #bottomLeft and float: left; to the last two. Here's a fiddle: http://jsfiddle.net/5nGUe/2/...