I have some pricing boxes on this page:
https://www.shiftdivorceguide.com/pricing-plan/
Following code hides the last box:
.price-view-default:last-child {display:none;}
And following code is my assumption for hiding the second to last box:
.price-view-default:nth-child(4) {display:none;}
However, above code does not work. Does anyone know how to hide box using CSS?
.price-view-default:last-child {display:none;}
.price-view-default:nth-child(4) {display:none;}
<div class="page-inner-container lp_hide_general_plans " id="select_style" data-style="vertical_view_1"> <div class="col-md-4 price-view-default 685 ">
<div class="lp-price-main lp-border-radius-8 lp-border text-center">
<div class="lp-title" style="background-color: #2caae0;">
<div class="lp-plane-top-wrape">
<a>Monthly Listing</a>
<p>$39</p>
<span class="package-type">Per Listing</span><br><br>
</div>
</div>
<!--Bottom plan section -->
</div>
</div> <div class="col-md-4 price-view-default 687 featured-plan ">
<div class="lp-price-main lp-border-radius-8 lp-border text-center">
<div class="lp-title" style="background-color: #963693;">
<div class="lp-plane-top-wrape">
<a>Quarterly Listing</a>
<p>$99</p>
<span class="package-type">Per Listing</span><br><br>
</div>
</div>
<!--Bottom plan section -->
</div>
</div> <div class="col-md-4 price-view-default 686 ">
<div class="lp-price-main lp-border-radius-8 lp-border text-center">
<div class="lp-title" style="background-color: #58ee9e;">
<div class="lp-plane-top-wrape">
<a>Yearly Listing</a>
<p>$329</p>
<span class="package-type">Per Listing</span><br><br>
</div>
</div>
<!--Bottom plan section -->
</div>
</div> <div class="col-md-4 price-view-default 1765 ">
<div class="lp-price-main lp-border-radius-8 lp-border text-center">
<div class="lp-title" style="background-color: #ff8000;">
<div class="lp-plane-top-wrape">
<a>TEST Listing</a>
<p>$1</p>
<span class="package-type">Per Listing</span><br><br>
</div>
</div>
<!--Bottom plan section -->
</div>
</div> <div class="col-md-4 price-view-default 119 ">
<div class="lp-price-main lp-border-radius-8 lp-border text-center">
<div class="lp-title" style="background-color: #58ee9e;">
<div class="lp-plane-top-wrape">
<a>Basic Legacy Listing<br>Limited Time Only!</a>
<p>Free</p>
<span class="package-type">Per Listing</span><br><br>
</div>
</div>
<!--Bottom plan section -->
</div>
</div>
</div>
You are looking for the :nth-last-child selector. Which is the same as :nth-child, but counting backwards instead.
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child
.price-view-default:nth-last-child(2)
Related
I am writing in HTML, using Bootstrap 5. I am trying to make a simple row of cards, however there is a lot of empty padding/space. How do I remove this?
Extra Space between cards
Here is my code:
Code\
<div class="row">
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
<div class="col">
<div onclick="locations(2)" id="location-2" class="w-75 custom-card">
<div class="card-body">
<h5>
<div class="row">
<div class="col">
<img style="border-radius: 5px;" src="https://flagcdn.com/fi.svg" width=40 height=30>
</div>
<div class="col">
<span class="fs-5" style="margin-left:-30px;line-height:-20px;">Helsinki,</span><br><span style="margin-left:-30px;line-height:-20px;" class="fw-normal fs-6">Finland</span>
</div>
</div>
</h5>
</div>
</div>
</div>
</div>
I tried using g-0 in the row, however it did not change at all.
I'm struggling with a rather simple task but the lack of CSS experience is getting the better of me:
<div class="row">
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-info pull-right">Offline</span>
<h5>Equipment Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-success pull-right">Online</span>
<h5>Equipment Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOnline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-info pull-right">Offline</span>
<h5>Visitor Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassVisitorOffline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="ibox-content m-b-sm border-bottom">
<div class="ibox-title">
<span class="label label-success pull-right">Online</span>
<h5>Visitor Pass</h5>
</div>
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassVisitorOnline.TransactionCount</h1>
<small># of Transactions</small>
</div>
</div>
</div>
</div>
Above is a row on my view. There are many like it:
I want to split the smallest div to show a second Heading1. Here is base HTML:
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.Income</h1>
<small>Income generated</small>
</div>
Target:
I need to show more information and I see that the div card is empty on the right side. I want to split this div into two. Experimenting with bootstrap classes, the layout breaks.
Afer a bit of trial and error, i realized that the small grid class was the issue. I switched to class-md and got the desired result. So this:
<div class="ibox-content">
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.TransactionCount</h1>
<small># of Transactions</small>
<h1 class="no-margins">#Model.AirportPassEquipmentOffline.Income</h1>
<small>Income generated</small>
</div>
Became this:
<div class="ibox-content">
<div class="row">
<div class="col-md-6">
<h1 class="no-margins">#Model.AirportPassEquipmentOnline.TransactionCount.ToString("N0")</h1>
<small># of Transactions</small>
</div>
<div class="col-md-6">
<h1 class="no-margins">AED #Model.AirportPassEquipmentOnline.Income.ToString("N2")</h1>
<small>Revenue generated</small>
</div>
</div>
</div>
I have three different divs that should be displaying one after the other, but they just jump right up to each other on the webpage. Here is the code for all of them:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="top-section">
<center>
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</center>
</div>
<div class="begin-tour">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>
some text
</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
The best way to explain what happens is through a photo.
I've added the 3 divs into the bootstrap container, took out center(it is not used anymore or supported by HTML5), put each div as a 12 column row(col-md-12 class) so they show up one after the other like you wanted:
<div class="container">
<div class="row">
<div class="top-section col-md-12">
<div class="container" style="margin-top:150px;">
<div class="row">
<div class="top-title">
<h1>Introducing 10/40 Academy.</h1>
<h3>An affordable entrepreneurship course that can double as high school credit.</h3>
<img src="/Man_iPhone_Desk.jpg" style="height:300px;margin:30px;border-radius:4px;" class="raised hidden-xs" /><br>
Watch Video <span class="glyphicon glyphicon-play-circle"></span>
<h3 class="hidden-sm hidden-xs" style="letter-spacing:2px;margin-top:0px;">SCROLL DOWN</h3>
<h1 class="hidden-sm hidden-xs" style="font-weight:100;font-size:30px;"><span class="glyphicon glyphicon-chevron-down"></span></h1>
</div>
</div>
</div>
</div>
<div class="begin-tour col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6" style="margin-top:50px;">
<h2>Interested in small business?</h2>
<h2>We're here to help.</h2>
<p>
Paragraph
</p>
</div>
<div class="col-md-6">
<center>
<img width="70%" src="/MacImageBase.png" />
</center>
</div>
</div>
</div>
</div>
<div class="qualif col-md-12">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Header here</h2>
<h2>Header</h2>
<p>some text</p>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>
Here is the plunker so you can see it.
Please let me know if this helps. I didn't see your image until now so I hope it helps.
The problem is that the 3rd row and the 4th don't center!
<!--|--------------------------------------------------------------------------------------------|-->
<div class="container">
<div class="row">
<div class="col-md-12 imagemFundo">
<!--|---------------------------------------ROWS-------------------------------------------------|-->
<div id="1" class="row rowPrincipal ">
<div class="container" >
<div class="col-md-2">
</div>
<div class="col-md-8 colPrincipal2 borderRow">
<!-----------------------------PANEL-------------------------------------|-->
<div class="panel panel-default panelTop">
<div class="panel-heading">Primeiro Título</div>
<div class="panel-body">
Conteúdo do painel.
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="panel-title">Segundo Título</h1>
</div>
<div class="panel-body">
Conteúdo do painel.
</div>
</div>
<!-----------------------------PANELEND----------------------------------|-->
</div>
<div class="col-md-2">
</div>
</div>
<!--SEGUNDA ROW-----------------------------------------------------------------|-->
<div id="2" class="1 row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">SEGUNDA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--TERCEIRA ROW-----------------------------------------------------------------|-->
The problem starts here!!!!!I have tried every single thing and nothing works. I got a hint that may be divs not closed well but i can't find any error :/ I'm a beginner so maybe that's the problem.
<div id="3" class=" row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">TERCEIRA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--QUARTA ROW----------------------------------------------------------------|-->
<div id="4" class="row rowSecundario ">
<div class="container">
<div class="col-md-2">
</div>
<div class="col-md-8 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">QUARTA ROW</p>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<!--FINAL ROW-----------------------------------------------------------------|-->
</div>
<!--|---------------------------------------ROWS END------------------------------------------|-->
</div>
</div>
</div>
Please help me!! I really can't figure it out by myself...
<div id="4" class="row rowSecundario ">
<div class="col-md-8 offset-2 colSecundario2 borderRow">
<p style="color: white" class="text-center titles">QUARTA ROW</p>
</div>
</div>
I have some social icons on my wordpress theme I am working on, and I am trying to add the ability to select which icons to use. The problem is that when I remove icons, it automatically will mess up the alignment, because I use an offset on the first icon, and an extra class on another. Now I figured out a way around this(although not working as of yet), but after working on it I realized it is a little rediculous for me to mask bad css with a gigantic PHP function to help me work with the the problematic css. This approach can be seen here: https://wordpress.stackexchange.com/questions/126611/cannot-seem-to-get-a-value-or-key-from-array
So I am wondering if anyone could help me fix my social icons so that if I remove them it will not move their alignment from the center. So it always looks centered and even. Here is a JS fiddle of the icons: http://jsfiddle.net/g2SC4/
Here is a look at the HTML. In total there is 6 icons:
<!-- start: social icon -->
<div id="social-icons">
<div class="section-wrapper section-icon social-icon">
<div class="container">
<div class="row">
<div class="social-icon-phone clear-phone">
<div class="span1 offset3">
<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="flip-a">
<i class="icon-facebook icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b facebook">
<span class="icon-back"><i class="icon-facebook icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="span1">
<div class="flip-container">
<div class="flipper">
<div class="front ">
<div class="flip-a">
<i class="icon-twitter icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b twitter">
<span class="icon-back"><i class="icon-twitter icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="span1">
<div class="flip-container">
<div class="flipper">
<div class="front ">
<div class="flip-a">
<i class="icon-google-plus icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b google">
<span class="icon-back"><i class="icon-google-plus icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="social-icon-phone clear-phone">
<div class="span1">
<div class="flip-container">
<div class="flipper">
<div class="front ">
<div class="flip-a">
<i class="icon-github icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b github">
<span class="icon-back"><i class="icon-github icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="span1">
<div class="flip-container">
<div class="flipper">
<div class="front ">
<div class="flip-a">
<i class="icon-pinterest icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b pinterest">
<span class="icon-back"><i class="icon-pinterest icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
<div class="span1">
<div class="flip-container">
<div class="flipper">
<div class="front ">
<div class="flip-a">
<i class="icon-linkedin icon-2x"></i>
</div>
</div>
<div class="back">
<div class="flip-b linkedin">
<span class="icon-back"><i class="icon-linkedin icon-2x"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- end: social icon -->
</div>
Here is the solution.
Remove the class offset3 from the first icon(span) and the following CSS:
.social-icon-phone.clear-phone {
display: inline-block;
}
#social-icons .row {
text-align: center; // remove margin left -30px
}