I am struggling a little bit with customising the design of the CMS lists for the blog. I am wondering how to do the following:
-
On the CMS List page, make it so the images cover the entire background. I can only seem to set the height and width in pixels. Is it possible to set it as a background like you can do with a Div Block where you centralise it and set it to ‘cover’?
-
Make each element (article) block on the CMS list different sizes.
-
Stagger each element so it has a staggered tile design. Is that possible?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
1 Like
Hey @Chris_Churchill
Can you share your read-only link so I can take a look?
Piter 
Hi Piter,
I hope you are well.
Here is the link https://test-939871.webflow.io. There isn’t really much to look at. Just wondering if it is possible to implement the design features I mentioned.
Chris
1 Like
Not the published link. The read-only link. See how here > Share a read-only link | Webflow University
Hey @Chris_Churchill
For the images you can use object fit css code
.img-class {
object-fit: cover;
}
Using this code will give you the option to use real img elements as a background no matter the size of the image. Other thing you can do is just using div with a background.
I would prefer not to use code.
I don’t understand how I can use an div wit a background when using the CMS though. I need to drop an imagine block in to the ‘Blog List’, it doesn’t give me an option to set to cover.
If I drag a Div in to the ‘Blog List’ and go to background, and set an image, it doesn’t give me th option to link it to the blog images… So I don’t understand.
1 Like
Another issue.
For the CMS Collection List When I set the layout from 2 columns to 1 on Mobile view, it change it to 1 column for every screen size, including desktop… isn’t it possible to set different columns for different screen sizes?
1 Like
Let me show you the blog bg image problem first.
@Chris_Churchill Just a quick example of how you can pull cms images and use them as a background. See here > https://www.useloom.com/share/313f1358345f4dcf9a3ec08f69c58d82
@Chris_Churchill You can see how I’m using flexbox to create different layouts for different breakpoints here > https://www.useloom.com/share/4ada8bb020af47499c0f1480d8cb6273
Three columns for mobile and tablet > two for mobile landscape > one for mobile portrait.
I will suggest going to Webflow University There’s a lot of good videos you can learn from just to get the basics.
Intro to flexbox > https://university.webflow.com/article/intro-to-flexbox
CMS > Intro to the Webflow CMS - Webflow University Documentation
Feel free to reach out if you need more help
Piter
Thank you Piter. I’ll check out the videos you linked.
Cheers
Chris
1 Like