How do I hide my title and description on a specific card?
If you'd like to hide your page title and/or description on a specific card on your home page, or in a card block on a secondary page, we'll have to get clever. Nucleus doesn't add unique classes or anything for each card that we can target, so we have two options. We can target the card by it's position (nth-child), or we can target the card based on it's permalink. I much prefer the latter, because the code will still apply if you change the order of your pages. It'll also apply to the card anywhere it is present on your website, not just the homepage. Let's jump right in with the code, which you'll place in the Code Injection area of your Nucleus settings:
Hide the title & description:
<style type="text/css">
a[href$="card-permalink"] h2,
a[href$="card-permalink"] .card-ribbon {
opacity: 0;
}
</style>Just hide the title:
<style type="text/css">
a[href$="card-permalink"] h2 {
opacity: 0;
}
</style>Just hide the description / ribbon:
<style type="text/css">
a[href$="card-permalink"] .card-ribbon {
opacity: 0;
}
</style>Then, simply replace "card-permalink" with the permalink of the page that card is connected to. You can find the permalink at the bottom of the page while editing that page.
If you want to hide your descriptions/ribbons across the board, on every single card, then you could do something like this:
<style type="text/css">
.card-ribbon {
display:none;
}
</style>And if after hiding your ribbons, the title needs to be vertically centered:
<style type="text/css">
.card h2 {
margin: 0 !important;
}
</style>Only on Mobile or Only on Desktop:
If you only want to hide the title and/or description of a card on mobile or desktop specifically, we need to wrap the code in what's called a media query. Nucleus changes from desktop to mobile when your browser viewport is 1185px or smaller. So for mobile-only, we want a media query that targets everything up to a max-width of 1185px. And for desktop-only, we want a media query that targets everything 1186px and greater:
<style type="text/css">
/* Only on Mobile */
@media screen and (max-width:1185px) {
a[href$="card-permalink"] h2,
a[href$="card-permalink"] .card-ribbon {
opacity: 0;
}
}
/* Only on Desktop */
@media screen and (min-width:1186px) {
a[href$="card-permalink"] h2,
a[href$="card-permalink"] .card-ribbon {
opacity: 0;
}
}
</style>And that's it! If you want to target multiple specific cards, you'll need to do this for each card's permalink. Just remember that for the media queries in the code above, you only need one media query wrapping around everything. As always, if you have any trouble with this, join the Nucleus Insiders group on Facebook and start a discussion there - I'll more than likely see it. 👍🏻
