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.

enter image description here

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..

    How to compare two css files and copy just the differences?

    How to change scroll bar position with CSS?

    js Find Class Within Div + toggle CSS/Hide One Show Other

    How to make a collapsible with a single css drop shadow in Jquery mobile?

    How to inherit Image width and height to video tag

    How can I apply some css for all readonly elements on focus in IE8?

    How to exclude last child in css psuedo class selector

    How to use Resource bundle(Client Bundle) in JSNI?

    Show hidden image with jQuery

    How to Make the Content 100% height and equal height columns in this layout?

    CSS: How to ignore an element so parent's padding will accomodate to other elements?

    Google fonts and twitter bootstrap 3: where should I load the fonts, and how to use it in css file?

    CSS how to get a div to the right side and a div exactly in the middle?

    How to reorder DOM elements with CSS only?

    How do the Sass variables get assigned to CSS selectors with Foundation 4?

    CSS - How to select nth-child of form element?

    How to set background color in AppGyver Supersonic?

    How to achieve this header with html and css?

    How to set cursor off screen?

    CSS clearfix how to over come the inability to center an element using it

    How to center FontAwesome icon in css before content vertically

    How to make a space between tags (icons) in table?

    How to make horizontal division using html div tag and css

    How to find all elements with a particular CSS style, without a JS library?

    How do I align tables with HTML?

    How to show div of google maps after hidding it

    how to specify a different image in css depending if the user visits on a desktop or a mobile browser

    CSS, how to create a label width of the longest containing text?

    How to dynamically colour svg images in a webpage? [duplicate]

    How to arrange divs by css floats?