Blog Customisation Design Help

Design help General
1

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
2

Hey @Chris_Churchill

Can you share your read-only link so I can take a look?

Piter :webflow_heart:

3

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
4

Not the published link. The read-only link. See how here > Share a read-only link | Webflow University

5

Ohhh sorry. here you go https://preview.webflow.com/preview/test-939871?utm_source=test-939871&preview=04f669d9baff1fb580d1d2f797d8aae8

6

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.

7

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
8

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
9

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 > Flexbox | Webflow University

CMS > Intro to the Webflow CMS | Webflow University

Feel free to reach out if you need more help

Piter :webflow_heart:

10

Thank you Piter. I’ll check out the videos you linked.
Cheers
Chris

1 Like