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

Is transforming lengthy code into a function the way to go?

Unable to implement the `omega/theme.css` file within the angular.json configuration

How can I force an element to overflow without being affected by its parent's overflow style in CSS/HTML/JS, even if the parent is

The components are not anchored to the window

No matter what I try, connecting the CSS file to my HTML file just won't seem to work

What is the best method for extracting the innerHTML value of html tags using a css selector or xpath?

Implementing CSS keyframe animations in a customized Material UI component using React, Material UI, and JSS

What causes the accordion class to activate panels with varying names?

Align the subtext to the right and center it vertically within a Bootstrap dropdown menu item

Develop a distinctive JavaScript solution that enables an image to appear in fullscreen upon loading the page, and then smoothly fade away after precisely

Viewing HTML web pages using Mozilla Firebox

Experiencing excessive CPU usage while utilizing a progress bar in Angular

Challenges with displaying css/bootstrap classes within angular2

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

"Title, background hue 3, and color lined up in a single

Struggling with implementing a materialize modal?

Tips for positioning two divs side by side in block formation

Why Chrome Doesn't Alter the State of li Elements

Tips for animating the box-shadow effect using jQuery

Customizing text appearance with innerHTML in JavaScript: A guide to styling