Why aren't my website images resizing properly?

Store Design
1

When my site is full screen on a desktop, the images are the correct size. When I make the screen smaller, the images don’t get smaller with the screen. Instead, they get cut off. My site is https://calibluedesigns.com/

Thank you!

2

Please place this code at the end of theme.scss

@media only screen and (min-width: 1440px) {
.image-bar__item {
   background-size: contain;
}
}
3

Dear @calliestober

Hope this will help

  • From your Shopify admin, go to Online Store > themes.
  • Locate your current theme and then click Actions > Edit code.
  • After that in the Assets folder, click to open your theme.scss.liquid file.
  • Go to the very bottom of this file and paste the following code:
/* Start */
@media only screen and (max-width: 749px) {
 #shopify-section-1608186109c03ce79d .image-bar { max-width: 100% !important;}
 #shopify-section-1608186109c03ce79d .image-bar--large .image-bar__item { height: auto !important; background-size: cover; }
}
/* End*/
  • Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
  • Save and check your theme by refreshing it.