Venture Theme - Hero/Slideshow Images WAY Oversized?

Excursionist
39 0 10

Hi there,

I'm having an issue with uploaded images for use in the slideshow/hero image on my store (www.greatbeard.com.au), using the venture theme, being WAY oversized for some reason. They appear fine on mobile, but when viewing on desktop they appear to be getting blown up to a massive resolution and I can't work out why.

The actual image sizes are all below the recommended size of 1800x1000px, so I can't for the life of me figure out why they're then being blown up to way beyond that size.

Would greatly appreciate if anyone could point me in the right direction to rectify this issue.

 

Thanks in advance!

 

-Dave @ The Great Australian Beard Company

Dave @ The Great Australian Beard Company W: http://www.greatbeard.com.au F: http://www.facebook.com/greataustralianbeardco E: info@greatbeard.com.au
1 Like
Shopify Staff
Shopify Staff
60 0 5

Hi Dave!

I am opening up a support ticket for you today so that we can have a closer look at your account settings together. 

Venture theme is designed to adapt to the viewers monitor size which is what I believe you are seeing. This theme is one of the best for beautiful mobile display however, I do of course understand you wanting to make both desktop and mobile look there best.

Be in touch Dave :)

-Jen

0 Likes
Excursionist
39 0 10

Hi Jen,

Thanks for the response but I did end up figuring out what the issue was (thanks for the prompt to come back and update this in case anyone else runs into the same issue!)

Because my images were smaller than the recommended 1800x1000px, they were being blown up to 1800 wide - given that they were relatively square images though this meant that they were being blown up to around 1800x1800, with the majority of the image being cut off as a result. To address it I have created an 1800x1000px template in which I place the image, either by itself with a black background to centre it or alongside other images to fill out the 1800px width.

Hope this helps someone else!

 

-Dave

Dave @ The Great Australian Beard Company W: http://www.greatbeard.com.au F: http://www.facebook.com/greataustralianbeardco E: info@greatbeard.com.au
1 Like
Shopify Partner
10 0 1

Hello! I actually need help in this matter. My banner doesnt fit for both desktop and mobile version and would really appreciate a run-through on how to fix it. Thanks!

0 Likes
New Member
1 0 3

Hi - I just spent quite a while working to figure this out and what I did was add code to tell shopify how tall to make the image on different devices.

Go to your theme.scss.liquid file in the editor and search for the section that starts like this:

.hero {
  background-color: adaptive-color($color-header, 10%); // default background color
  height: 530px;
  margin-bottom: -($gutter-site * 1.5);
  overflow: hidden;

  @include media-query($medium-up) {
    height: 650px;
    margin-bottom: -($gutter-site * 3);
  }

The numbers for the pixels may be different for you.

After the last } shown here add a section to tell shopify how tall the image should be for small screens. The section should now look like this:

.hero {
  background-color: adaptive-color($color-header, 10%); // default background color
  height: 530px;
  margin-bottom: -($gutter-site * 1.5);
  overflow: hidden;

  @include media-query($medium-up) {
    height: 650px;
    margin-bottom: -($gutter-site * 3);
  }
   
  @include media-query($small) {
    height: 250px;
    margin-bottom: -($gutter-site * 3);
  }

You can adjust the pixels as needed to see what fits best for your screen.

3 Likes
New Member
1 0 0

YOU'RE AN EFFING LEGEND!  This was DRIVING ME CRAZY. All Sorted now! 

0 Likes
Tourist
20 0 1

Hi Sarah

I can't seem to find this section.  Is this from a previous version?

Many thanks

Mark

0 Likes
New Member
2 0 0

THANKS SARAH YOU'VE SAVED MY LIFE

0 Likes