cards.css
credej opened this issue · comments
Is there any chance you can upload the cards.css file? My cards don't seem to be responsive on mobile, the 3 column layout persists on all devices.
It's in CSS folder of templates:
https://github.com/dansup/bulma-templates/blob/master/css/cards.css
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.
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).
@lowlevelm could you please take a look at this issue?
I am weak on making pages responsive.
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.
Add right: -50vw; to the flow element, this would fix the issue.
@phranb would you please make a PR?
@joshrosenhanst please, could you take a look @ this, mate?
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
@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.
ok, no problem. amend them as you wish.
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.
@joshrosenhanst we welcome pull requests and merge them As Soon As Seen.