Changinge hero image and slideshow size

Store Design
,
1

Hello everyone,

I have been working on my online store design and I’m wrapping it up but I am not satisfied how my hero image and slideshow look on desktop screen, they look to big to me. Can I get your guys feedback on whether you also think so and how can I reduce the size of them? I have tried reducing image sizes but nothing happens, also found a few css code snippets that I put in basic.css file but it didn’t work.

My store url is: https://callalilystore.org/

Any help would be appriciated.

2

Hi @callalily55

It has the option to set the height of Image banner section

Screenshot 2024-07-10 at 13.56.02.png
Screenshot 2024-07-10 at 13.56.02.png1638×661 154 KB

3

It helped with image height but I am wondering how I can make all containers same width on the site. For example now first image banner that is hero image and Vision&Values image banner are full width and other sections are all with a bit space between left and right margins. I would like for these 2 above mentioned parts to also have same space between margins as other sections.

4

Hi,

You need to add custom css rules

Example

/* Adjust the size of the hero image */
.hero {
  height: 70vh; /* Adjust the height as needed */
  background-size: cover;
  background-position: center;
}

/* Adjust the size of the slideshow */
.slideshow {
  max-height: 70vh; /* Adjust the height as needed */
  overflow: hidden;
}

.slideshow img {
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  object-fit: cover;
}

Hope this will help . If still need help and if you want you can contact us through signature