Card Flow Design 2 | How to keep Cards/Images from Cropping

[SBCWeb]

Our church is trying to copy the style of the [NorthPoint. org I found a thread where another was doing the same.

I have watch both videos, but not figure out how to keep my cards/images in the column from cropping as the screen size gets smaller or bigger. Is there a way for it to keep is shape and absolute size, while not cropping the image?

This is what I what to accomplish.
https://drive.google.com/file/d/13r8H55HTnte5PbA0kEtOirUbYfCsJYf6/view?usp=sharing

This is what I have
https://drive.google.com/file/d/1U9uCTmarohFsFMpl5CqdY6wAwjrAgQS5/view?usp=sharing

If all of the placeholder images are the same size as original, why aren’t the conforming to the same size. Obviously, I am doing something wrong. Any help would be appreciated. We’d like to upload announcement graphics, church fellowship pictures, and not have them cropped when the viewports change. Instead, just change the layouts.

I will add my login as a secure note. Feel free to do whatever.

[marc_a]

Hi Joshua,

Thanks for reaching out!

The google drive links you provided are not viewable because we need to request to view them. I suggest that set the link viewable to anyone who has the link. Once it is now viewable in our end, we can give you an advice on how you can do it.

Thank you.

[SBCWeb]

@marc_a

The links should be viewable now.

I think I am close, but not quite there. Is there anyway to create an image placeholder? If I create a “frame”, I can drop any picture in there, and it crops to that frame always, but stays to that aspect ration everytime.

Also, the same with the text in the boxes. Right now, the text size sort of gets smaller, but then looks squished and not sharp. I found some CSS docs that explain how to use the Calculate and Viewport equations, but I am still not sure what to type.

Also, my Custom Fonts are not showing up when I go to chose a Font.

[tristup]

Hi Joshua,

For the images and the texts within boxes you need to adjust the breakpoints as per your need. You can find the details on the custom media query breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a
On the other hand, I have checked the Headline element and found the Custom Fonts named Futura and Futura 2 are loaded. Please find the screenshot below.

Thanks

[SBCWeb]

Thanks for the link. I read it. Understanding it slightly, knowing I need to input code.

However, is there a video or a document I work through to show me how to do that?

[tristup]

Hi Joshua,

The following articles may help you on understanding how to implement the media queries and the breakpoints.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Thanks