How can I eliminate the border from the last child in a row within a responsive framework?

Question

How can I eliminate the border from the last child in a row within a responsive framework?

Put simply, I am trying to target not only the last child in a parent div, but also the last item in a row that adjusts based on screen size. I have a row of 4 elements (divs) with borders on all but the last one using :last-child. However, when the screen size is reduced, the row becomes 2 rows of 2 divs each, requiring me to remove the right border from the second and last div in each row.

This request is similar to a question answered using :last-child (Remove border from last child css), but my situation adds the complexity of removing borders from specific children below a certain screen size.

Is there a way to accomplish this with CSS without resorting to a media query for such a small, specific case? Any input would be appreciated as I have searched for a solution without success.

css twitter-bootstrap-3

Answer 1

Answer №1

To achieve the desired outcome, utilize a few media queries.

For tablets and larger screens, incorporate the existing border styles from @DarrenS' bootply:

@media screen and (min-width: 768px) {
    .col-sm-3 {
        border-right: 1px solid black;
    }
    .col-sm-3:last-child {
        border-right: 0px;
    }
}

For smartphones, apply :nth-child(odd) in your media query to create the desired effect:

@media screen and (max-width: 767px) {
    .col-xs-6:nth-child(odd) {
        border-right: 1px solid black;
    }
}

Answer 2

To achieve the desired outcome, utilize a few media queries.

For tablets and larger screens, incorporate the existing border styles from @DarrenS' bootply:

@media screen and (min-width: 768px) {
    .col-sm-3 {
        border-right: 1px solid black;
    }
    .col-sm-3:last-child {
        border-right: 0px;
    }
}

For smartphones, apply :nth-child(odd) in your media query to create the desired effect:

@media screen and (max-width: 767px) {
    .col-xs-6:nth-child(odd) {
        border-right: 1px solid black;
    }
}

How can I eliminate the border from the last child in a row within a responsive framework?

Answer №1

Similar questions

Dynamic container elements (already arranged)

Creating a personalized scroll bar for an Angular Material Table while retaining the original table styles

Restrict page scrolling to the vertical position of a specified div [Using jQuery, javascript, and HTML]

Are Your Padding Styles Missing?

Tips for showing more rows by clicking an icon within an Angular 2 table

What is the best method to eliminate the 2px flaws on the right edge?

Is there a significant time-saving benefit to utilizing nested rules in CSS, particularly when using HAML or LESS?

Ensure that a specific value is maintained for a property of an element throughout its animation

Attempting to align two div blocks side by side to occupy the entire page

Retrieving CSS properties of an element using JavaScript

Adjusting the height of the navigation bar in BootStrap

Grid of images as background using Bootstrap

Move the divs within the overflow container by sliding them, then take out the initial element and append it to the end

Customizing the Style of Mat-Form-Field

Setting column heights and spacing in Bootstrap

The Tailwind Typography plugin simply maintains the default font size of heading tags without altering their style

What is the method for incorporating a link in an accordion header next to the toggle button with Bootstrap?

Transform the text with a stylish touch within a 'textarea' element

I am looking to implement user authentication using firebase, however, the sign-in page is currently allowing invalid inputs

Why @font-face doesn't display on older versions of Internet Explorer like IE 7 and IE