Article cards width


Does anyone know how I can get these article cards to look the same at different widths? I’d like them to look like the first picture that has a square white background. The thinnest width chops the white background top and bottom off.

Many thanks

Alter the size of your image embellishments (people) so they aren’t so huge on the smaller sizes. On the widths that show them side by side (card and people), with smaller sized people image you can make those columns narrower (smaller size like 2 or 3 max) and change the card size to add up to 12. That should help some there.

Get rid of the embellish images on the phone size, or make them very small and that should fix that.

Also be sure to make the images smaller by resizing them and using the alternate sizes in the code for each size change needed. Don’t just change the dimensions for the same image. Makes the page run much faster that way.

Hi, thanks for your help. I liked the sizes of the images as they were. It was just the view on mobile where it chopped the top and bottom off the white background, so I tried this and it worked: In mobile view in bootstrap, I clicked the first column and in the appearance settings, set the padding top and bottom to 60px, and did the same for the other two, this has fixed the issue. Thanks for helping me get there, I appreciate it.

Without seeing your code, this is just a guess. You might have some classes with 0 margin or padding on smaller screens. Look for something like my-0 my-md-2 (or py)

Or post a live version on the bus server and someone can take a look for you

1 Like

Should have been BSS server, me not checking my autocorrect.

ahh I see! I think I got it to work by toggling some of the padding buttons in appearance when it was in the mobile view…not entirely ideal but I’m happy with how it looks for now.

I need to watch tutorials again and practice so that I know what I’m looking at in the html/css/id/class names and how to edit them, I’ve got a general gist and have started a basics coding course but have a long way to go! Thanks for all the help. Was the website link here ok? I still don’t know what you mean upload to the bss server…sorry! :face_with_open_eyes_and_hand_over_mouth:

Be sure to read the Docs too, the info there is much newer than some of the videos so you may find some better info and even some new info on things you didn’t know about :slight_smile:

1 Like

Thanks for all the tips! :grin: