cards.css about bulma-templates HOT 13 CLOSED

It's in CSS folder of templates:
https://github.com/dansup/bulma-templates/blob/master/css/cards.css

from bulma-templates.

Hmm adding this cards.css file gives me a really cool animated background but it actually made the cards more disorganized. I probably should start from scratch, I may have omitted something important. Thank you for your help.

from bulma-templates.

I noticed that this demo site (https://dansup.github.io/bulma-templates/templates/cards.html) has the same issue - the layout compacts down to 1 card width in Chrome when adjusting the page width - but does not work on an actual mobile phone (keeps 3 card layout).

from bulma-templates.

@lowlevelm could you please take a look at this issue?

I am weak on making pages responsive.

from bulma-templates.

The problem is the "flow" element. When it gets deleted, everything is restored. I believe it is because the flow element is 200vw wide, 2x the screen width. Changing the width to 100vw breaks the flow element.

from bulma-templates.

Add right: -50vw; to the flow element, this would fix the issue.

from bulma-templates.

@phranb would you please make a PR?

from bulma-templates.

@joshrosenhanst please, could you take a look @ this, mate?

from bulma-templates.

No problem I'll take a look

Also, it looks like when the templates got updated to bulma 0.8 some of them are using the wrong CDN for bulma.css (cards, contact, and showcase are affected). I'm gonna submit a PR to fix the bulma CDN issue in a sec

from bulma-templates.

@diomed I think we should get rid of the tacky background animation, and clean up the cards a bit. I have some idea for different style cards instead of a grid of the same style.

from bulma-templates.

ok, no problem. amend them as you wish.

from bulma-templates.

Another issue is that the template is missing the responsive meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">

If you add that and remove the background animation #flow elements, it fixes the responsive card issues.

from bulma-templates.

@joshrosenhanst we welcome pull requests and merge them As Soon As Seen.

from bulma-templates.