Hey guys,
I’m still very novice and new to Webflow, despite using it for awhile to get my portfolio website up and running.
Recently I’ve run into a challenge that I just can’t seem to figure out, no matter how many tutorials or Webflow University videos I watch.
Hopefully for those of you who are more experienced with WF, this will be a piece of cake.
Here’s what I’m having trouble with:
The goal: I’m trying to create a grid-like view on my projects page with 3 cards/tiles/whatever you prefer to call them across per row. The content of each is filled with dynamic content from a CMS collection that I’ve made with all of the titles, subtitles, photos, descriptions, etc in it.
-
What is the best practice in this case for creating a layout like this? I currently have a Collection List Wrapper with Divs inside each list item so that I could stylize the cards themselves by stylizing the div. Preferably whatever the best practice is would also allow the cards to display responsively on a mobile phone by showing one card at a time in a vertical manner that’s more ideal for mobile scrolling.
-
For some reason, the 4th card in the collection jumps down a row, rather than taking its proper place underneath the first Design Challenge card. I can’t figure why it’s not just taking that next available space down there in row 2, and is instead jumping down the the third row on its own.
-
No matter what, I can’t seem to get the cards to center themselves on the screen. They remain left-justified with a large white space to the right. I had the CL wrapper in a container at first, but I wanted the cards to be bigger/expand outward further than the containers maximum default width.
-
Is there a way to make all of the cards a default size that won’t break regardless of the content that’s entered? In the screenshot provided below, you can see how the left-most card with the Design Challenge has a taller height than the other cards. I would love if every card could be constrained to a universal width and height, so they all appear uniform.
Thank you so much in advance. I’m not up on all of the WF best practices, but I know it’s an incredible and powerful tool.
Any help you can provide is appreciated!
Here is my site Read-Only: Webflow - Daniel's Portfolio
(how to share your site Read-Only link)