Clever Geek Handbook

Nth-child expression to remove margin-bottom does not work in responsive mode

What I want to do is create an nth-child expression to remove the bottom edge on the last line when viewing the desktop and just remove the bottom edge of the last item in responsive view, here's an example or you can check out a live demo here

Html

<div id="wrapper">
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="box">
            <p>Test goes here...</p>
        </div>
    </div>
</div>  <!-- end wrapper -->

CSS

.box{
    border: 1px solid  #DFDFDF;
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
}

So I am trying to make the code below:

.col-md-3:nth-last-child(-n+4) .box {
     margin-bottom: 0;
}

It works fine on a large screen, but when displayed responsively, it doesn't work. Hope someone can give me some advice.

+3


source to share


4 answers


For this you need @media

queries.

For selection usually use the selector .col-md-3:not(:nth-last-child(-n+4)) .box

to set margin-bottom

. He will select all but the last four div

s.

For a responsive view, use a selector .col-md-3:not(:last-of-type) .box

to set margin-bottom

. This will select everything except the last one div

.

width

.col-md-3

was found using JavaScript which 991px

.



CodePen

.box{
  border: 1px solid  #DFDFDF;
  padding: 20px;
  text-align: center;
}
.col-md-3:not(:nth-last-child(-n+4)) .box {
  margin-bottom: 30px;
}

@media only screen and (max-width: 991px){
  .col-md-3:not(:last-of-type) .box {
    margin-bottom: 30px;
  }
}
      

        
        
        
      

    
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="wrapper">
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
  <div class="col-md-3">
    <div class="box">
      <p>Test goes here...</p>
    </div>
  </div>
</div>  <!-- end wrapper -->
Run codeHide result


0


source


If you margin-bottom

only want to delete up to the last item, don't use -n+4

in nth-last-child

, use only 1

.



0


source


Not sure if this is what you mean. You can try using percentages. They change to different sizes as you tweak your browser, or if the pill / phone interest rate might work better. Exact pixels take up precise space as percentages take up a percentage of the page.

Example:

.box{
    padding: 5%;
}
0


source


Not sure what the maximum width of your mobile view is, but you can play with that. Use the below CSS:

.box{
  border: 1px solid  #DFDFDF;
  padding: 20px;
  text-align: center;
}

@media screen and ( max-width: 600px ) {
  .col-md-3:nth-last-child(1) .box {
     margin-bottom: 0;
  }
}
0


source






More articles:


All Articles