Hide a card, but don't change position?

[alan_sh]

I have a card container with 4 cards in it in the 'card deck' style. They are spaced evenly, which is nice.

What I would like to do is not display 1, 2 or 3 of those cards but still have the ones displayed retain their relative position, as if the others were there.

I tried 'hiding' a card, but the others just expanded to use the space.

So, is what I want possible?

thanks

Alan

[alan_sh]

I think I've found a possible solution - use 'grid', not 'card deck'. But in 'grid' mode, there's no breakpoint. [and I don't want to introduce a page based breakpoint]

[edit - that didn't do what I wanted].

Alan

[Pablo]

Instead of control the visibility (which will remove the card from the layout) you can try to set the opacity instead.

[crispy68]

Just curious, why would you want to have say the first 3 columns blank and only show a card in the 4th? Would the number of cards displayed change in breakpoints? Would there be a breakpoint I would see card #2 but card 1,3,4 would be hidden?

[alan_sh]

Instead of control the visibility (which will remove the card from the layout) you can try to set the opacity instead.

Thanks, I will try that.

[edit - where do I set the opacity so it covers the card content?]

Alan

[alan_sh]

Just curious, why would you want to have say the first 3 columns blank and only show a card in the 4th? Would the number of cards displayed change in breakpoints? Would there be a breakpoint I would see card #2 but card 1,3,4 would be hidden?

I don't, I would be happy displayinhg them in columns from left to right.

What it is, I have articles ready for publication, linked from cards which provide a hint as to what to read and a link. But I only want to publish the artcles once a week. I've got them all ready in a card container and just want to 'pop up' a new one next to the existing ones when it's time to publish.

Alan

[crispy68]

Have you tried to set the max-width of each card to 25% and then just hide the other 3 cards? This seems to work for me. They will naturally go from left to right.

[alan_sh]

Yes, but at small widths it looks wrong. The best way I have found is to set the container to a maximum size (say 500 px for one card) and hide all the others.

Alan

[alan_sh]

This is what I've ended up with: https://www.the-photo.org/bobsarticles.html

I did hide the cards and it worked OK on my local web site. When I copied the files up to the online site, the cards did not hide and it looked horrrible. I don't know if I missed some files to copy or the server didn't like my event, but it didn't work. So, I removed the other cards and republished.

Alan

[Pablo]

There is no difference between preview and publish. In both cases, the exact same files will be generated.
So, if it looks different then you most likely did not publish all files. Or you will need to clear your browser cache.

[alan_sh]

Thanks Pablo, I know I did something wrong, but I didn't have time to fix it. I will revisit it when I find more time.

And it wasn't a difference between preview & publish. I always publish to a local web server (my NAS box), test it out and then copy it using Filezilla to my live web server. In this instance the live web server is in Germany and I know it has limitations - for example, it does not support PHP (I know, why would any one not do that!!!). So, analysing the fix will take time and effort that I don't have at the moment.

Alan

[crispy68]

@alan_sh,

Why not just set the card container to use Grid, set column count to 4 in default and then in the breakpoints just change the column count? This way you have control over how wide the card will look.

update: I just saw your note about not wanting to use a breakpoint. I would still say add a breakpoint or 2 to get the look you want. That's what breakpoints are for and they will not slow down your site.

Only other option is to add custom CSS to the page to control the width of the cards at browser sizes. For example, you would set initially the cards to be max-width of 25% (4 across) and then add something like this:

Code: Select all

<style>
@media only screen and (max-width:970px){
#CardContainer1 [class*="card"]{max-width:50%;}
}
@media only screen and (max-width:480px){
#CardContainer1 [class*="card"]{max-width:100%;}
}
</style>

What this will do is when the screen goes below 970px, it will set the max-width to 50% and below 480px, it will set the max-width of the cards to be 100%. You can adjust the percentages and add as many media queries to adjust the size where you want it.

[alan_sh]

Crispy,

That is really neat code. Thank you. I wish I knew enough to do that.

Alan