Image jumps in size at 767px - how to change?

Support
#1

Hi there,

When my screen goes from 768px to 767px, there are two images that go from the size I want to way too big, and not centered. See screenshots below:


How do I get the images to stay relatively small—and centered—when I move into this new screen size?

Thanks in advance,
Jena

#2

Hello Jena,

Thanks for asking. Hope you’re having a great day :slight_smile:

To adjust the image size in screen resolution 768px to 767px, you can take advantage of CSS media queries. First I suggest you to add a class name to both the elements under Customize tab. Here is a screencast that you can take a look. https://cl.ly/343X1I1O4140

After that use CSS media queries to adjust the width and look of image. For ex:

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .image-width-class{
` /* CSS codes goes here. */` 
}
}

You need to replace image-width-class with your class name and / CSS codes goes here. / with the CSS code.

I am sharing few resources that you can take a look to learn more about media queries.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

https://www.w3schools.com/cssref/pr_dim_width.asp

Hope that helps. Have a Nice Weekend. :slight_smile:

Thanks.

#3

Thank you, Prasant, I appreciate you giving me resources to be able to educate myself for future issues, rather than only telling me how to solve it. Have a great day!

#4

You’re welcome!
We’re glad we were able to help you out.

#5

So…what CSS code do I actually put in the area marked “CSS codes go here”? Still learning all of this CSS stuff… :slight_smile:

#6

Hey There,

Thanks for updating in!

You can use this code instead:

@media only screen and (min-width: 768px) and (max-width: 959px) {
  .x-image.FounderImage {
    display: block;
    max-width: 320px;
    min-width: 320px;
    margin: 0 auto;
  }
}

Please let us know if this works out for you.

#7

Yes, that worked! Thank you!

#8

We are delighted to assist you with this.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.