How do I edit the Hero Image Dimensions on the Venture Theme?

New Member
5 0 0

Hey all, I am looking through the liquid files on the venture theme, (which is a pretty versatile theme btw), but the biggest drawback is the size of the hero slideshow. It's monopolizing all of the available real estate. My intention is to reduce the height of the slideshow, to allow more above the fold content to be displayed on our homepage. How would I go about doing this? If it's at all possible, I'd actually like to change the aspect ratio of the hero slideshow banner to be more of a "boxed" layout rather than full width, IF POSSIBLE!

 

Thanks in advance, guys!

0 Likes
Shopify Staff
Shopify Staff
18 0 4

Hey Karthik! Congratulations of you first forum post!

You can find the dimensions of the hero slideshow between lines 20-46 of your slideshow.liquid section. You can find this be going to Online Store > Themes > "..." > Edit HTML/ CSS > Open up the Sections forlder> slideshow.liquid > Line 20. 

The Heights and widths are in pixels, and you can edit them here!

 

1 Like
New Member
5 0 0

Hey Andra, thanks for the fast response. Okay, there are actually 4 different places for pixels. I'm not sure which one I'm supposed to edit......... 

   background-image: url('{{ block.settings.image | img_url: '150x' | format: 'jpg' }}');
                }
              }
              @media screen and (min-width: 151px) and (max-width: 300px) {
                .hero__image--{{ block.id }} {
                  background-image: url('{{ block.settings.image | img_url: '300x' | format: 'jpg' }}');
                }
              }
              @media screen and (min-width: 301px) and (max-width: 600px) {
                .hero__image--{{ block.id }} {
                  background-image: url('{{ block.settings.image | img_url: '600x' | format: 'jpg' }}');
                }
              }
              @media screen and (min-width: 601px) and (max-width: 800px) {
                .hero__image--{{ block.id }} {
                  background-image: url('{{ block.settings.image | img_url: '800x' | format: 'jpg' }}');
                }
              }
              @media screen and (min-width: 801px) and (max-width: 1000px) {
                .hero__image--{{ block.id }} {
                  background-image: url('{{ block.settings.image | img_url: '1000x' | format: 'jpg' }}');
                }
              }
              @media screen and (min-width: 1001px) {
                .hero__image--{{ block.id }} {
                  background-image: url('{{ block.settings.image | img_url: '2000x' | format: 'jpg' }}');

 

 

 

Would it be safe to assume that these values are representing the size the images will appear on various screen sizes? I'm kind of confused here. XD

0 Likes
Shopify Staff
Shopify Staff
18 0 4

He Karthik, 

 

Yes those are just copies of the same code that represent each Hero Slideshow image!

 

 

0 Likes
Tourist
4 0 0

Just picking up on this thread.   How do I change the width of the hero image.  Would I just update the width on each - or adjust the height of each too so the image still looks correct?

0 Likes