Help with Image Resizing

Beaver Builder
1

I am building a website with online Bible courses and I am using photos with text on them as the “course poster” on which people click the photo to go to the course.

All is well, but I don’t like how they resize. They get REALLY small on browser resize and I am not yet a CSS ninja to know how to prevent this.

I added a class of .featured-course to try and target them, but didn’t have much luck.

Basically I want them to not get smaller than a certain size, which would mean that instead shrinking, shrinking, shrinking…STACK. I would rather have the stacking happen earlier so that the photos remain pretty close to their original size, they just start stacking earlier and don’t shrink as much.

You can see what I mean http://www.youcanlearnthebible.com/

The posts look awesome as they resize and so I would like the photos to have similar behavior. Suggestions? Thanks!

B

2

Hey Bodie,

Loving the look of the site! :slight_smile: So for those images, you can change the columns’ width when it hits the medium breakpoint. This can be changed under the Advanced tab > Responsive layout. You can change it to 50% per column, so when it hits the medium breakpoint, by default at 992px, they switch to a 2x2 layout. Then completely stacks when it hits the small breakpoint.

Ben

3

Ben!

You rock!

Thanks for the kind words, it is coming along nicely. That tip for the mobile goodness worked great! However, I want the breakpoint to happen earlier, at 1140px. How would I do this? I was thinking:

  1. Take the .featured-course class off of the images and add it to the columns instead
  2. Go into my custom css and add:

@media only screen and (max-width: 1140px)

.featured-course {
width: 50%;
}

I am going to give that a whirl, but let me know if you forsee any issues. Thanks for getting back to me!

Bodie

4

Well that didn’t work! Ha ha.

They are still shrinking down a lot before they go to the 50% width. When they do, they look awesome, but I can’t seem to keep them bigger for longer.

Love some help! Thanks!

5

Hey Bodie,

You can change the medium responsive breakpoint under Tools > Global Settings > Responsive Layout. Change it from 992px to 1140px. :slight_smile:

Ben