Tutorial - Venture Theme Slider Fix

Highlighted
Excursionist
26 0 6

Hi All,

I'm here today to help you fix all your Venture Theme Slider Problems

Common Problems are images are chopped when resized to smaller resolutions and looks horrible on mobile, I've come up a way to show the whole image on mobile mode via animation- scrolling horizontally and fixed oversized images on your Venture Theme Slider.

-----------------------------------------------------------------------------------------------------------------------------------------

Let's begin

Go to your "theme.scss.liquid" Under "Assets"

Note: to find easier, press Ctrl + F within the coding area and input the name of code to find it instantly

---------------------------------------------------------------------------------------------------------------------------------------------

Find "SASS VARIABLES & SETTINGS" (without quotes)

Below are grid breakpoints, meaning elements will trigger when they hit a specified resized resolution

Overwrite your existing code with or Add these values below
(You can change these to suit your site later on after testing, if you don't like my dimensions)

$grid-medium: 750px;
$grid-large: 990px;
$grid-widescreen: 1400px;
$grid-gutter: 20px;


$small: 'small';
$medium: 'medium';
$medium-down: 'medium-down';
$medium-up: 'medium-up';
$large: 'large';
$large-down: 'large-down';
$large-up: 'large-up';
$widescreen: 'widescreen';

We'll now go down to "Hero slider" slider section
(Again Ctrl + F to search and find instantly (search without quotes))

Under the class ".hero", change and add these to the code, change "height" to

height: 270px;

then add the following code below under "overflow:hidden;"  (still within .hero class)
(Again you can change these dimensions later on to your liking after testing)

// Added media queries, all slider images will resize and look good and not anything cut off
  @include media-query($small) {
    height: 250px;
    margin-bottom: -($gutter-site * 1);
  }
  @include media-query($medium-up) {
    height: 550px;
    margin-bottom: -($gutter-site * 1);
  }
  @include media-query($medium) {
    height: 300px;
    margin-bottom: -($gutter-site * 1);
  }
  @include media-query($medium-down) {
    height: 270px;
    margin-bottom: -($gutter-site * 1);
  }
  @include media-query($large) {
    height: 300px;
    margin-bottom: -($gutter-site * 1);
  }
  @include media-query($large-up) {
    height: 400px;
    margin-bottom: -($gutter-site * 1);
  }
  @include media-query($widescreen) {
    height: 520px;
    margin-bottom: -($gutter-site * 1);
  }
  @media only screen and (min-width: 1600px) {
    height: 600px;
    margin-bottom: -($gutter-site * 1);
  }

Now we'll move to the next step - Making sure the images in slider are not chopped off

Ctrl + F and find ".hero_image" (without quotes)


Add the following or you can copy my code-

.hero__image {
  position: relative;
  opacity: 0;
  transition: $hero-image-transition;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%; //change to this instead of "cover", it'll make it fit 100% width and 100% height of slider container
  background-position: top center;
  /*added the following default values for how slider images would display, in this case-over stretched on mobile mode, this will be fixed through scrolling transition*/
  @media only screen and (max-width: 450px) {
    background-size: 200% 100%;
    background-position: 0%; // this is the starting point for our mobile scrolling animation, in this case 0% which is most left, you can change this to 100% if you want to make it scroll right to left.
    transition:background-position 5s; //Animates the Scrolling Effect on Mobile, you can change the duration to your liking.
  }

Now we'll add the transition to slider images when on mobile mode

Add the following code after closing of ".hero__image" class which is after last "img" closing } tag.

//Moves the Slider Images Left to Right on each slide change, only on mobile ver
.slick-active .hero__image{
@media only screen and (max-width: 450px) {
    background-size: 200% 100%;
    background-position: 100%; //you can change this to 0% to make animation scroll Right to left, if you do, please remember this needs to be 0% and background position on ".hero__image" needs to be 100%.
	}
}

So the code in whole looks like below, in case you're confused

.hero__image {
  position: relative;
  opacity: 0;
  transition: $hero-image-transition;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%; //change to this instead of "cover", it'll make it fit 100% width and 100% height of slider container
  background-position: top center;
  /*added default values for how slider images would display, in this case-over stretched, this will be fixed through transition*/
  @media only screen and (max-width: 450px) {
    background-size: 200% 100%;
    background-position: 0%;
    transition:background-position 5s;
  }

  .slick-initialized &,
  .no-js & {
    opacity: 1;
  }

  img {
    display: block;
    width: 100%;
  }
}
//Moves the Slider Images Left to Right on each slide change, only on mobile ver
.slick-active .hero__image{
@media only screen and (max-width: 450px) {
    background-size: 200% 100%;
    background-position: 100%;
	}
}

 

Now we're done with the slider images, let's change some title text sizing and positioning on the slider when resized.

Ctrl + F and find ".hero__text-wrap" (without quotes)

Add or change the following code after "right: $gutter-site / 2;"

@include media-query($medium-up) {
    bottom: 40px; //changed to the value on the left, it'll make the positioning of the captions properly placed
  }

Now we'll change the sizing of the title text

Ctrl + F to find ".hero__title" (without quotes)

Add/Change the following code after @include prefix(box-decoration-break, clone, webkit o spec);

@include media-query($medium-up) {
    font-size: em(60);
  }
  //added toned down size of the title
  @include media-query($medium-down) {
    font-size: em(30);
  }
  //got rid of title on mobile in order to focus on the image more
  @include media-query($small) {
    display:none;
  }

That's it, after those steps your slider should be looking like mine (www.equilstreetwear.com) pass is equilibria if anyone want to see the demo. Message me if I forget anything, I remembered that was all the steps when I made the changes to mine.

For those wondering what size are my images on the slider, they are 1900 x 600px

Thank you all for your time

Regards

Kenwin.Z
 

Highlighted
Shopify Expert
10007 116 1823

Thanks for posting Kenwin.

I do have to note to others: before anyone attempts this please make a backup of the current theme. Also be aware that your version of the theme may differ from the version used above. Don't assume it's the same as yours.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Highlighted
Excursionist
26 0 6

Thanks Jason for mentioning that, people attempting this tutorial- please take note of what Jason has mentioned, thanks

0 Likes
Highlighted
Shopify Partner
10 0 2

Thanks for the fix Kenwin! I followed your instructions. I like that my image is all visible now and doesn't get cropped off or lost outside of the slider area. It looks fine on Mobile too.

However on wider screen displays (I'm on 1920 x 1200) the hero images looks stretched and distorted. I noticed the ones on your website maintains the same nice aspect ratio. I double checked all the steps and didn't seem to miss anything.

Any idea what went wrong there? Or must I select more panoramic images for the hero?

Highlighted
Excursionist
26 0 6

Hi Zorion Pets, Sorry for the late reply, haven't been on the forums lately, does the problem exist on your zorion pets website? If so the problem lies within the image size, i use 1900 x 600px for the slider images, anything less or more will stretch or squash, try cropping and see if it works

Thanks

 

0 Likes
Highlighted
Shopify Partner
10 0 2

Hi Kenwin, Thanks for the reply. Yes it was on my zorionpets website especially evident for this image (4287 x 2858px). But I just realized from your reply that the size you mentioned is a very panoramic crop. I'll try that for all my images. Thanks again for the help!

Highlighted
Excursionist
26 0 6

No problems, hope it works :)

0 Likes
Highlighted
Shopify Partner
20 0 0

any chance you can tell me how to move the slider up?  I moved my logo and nav up and want to get rid of the dead space.  I can't seem to find the code I need. 

 

Thanks. 

0 Likes
Highlighted
Excursionist
26 0 6

Hi Peter, can I access your store to see how it looks atm? i need the password to get pass the landing page if you're referring to your site astraest.myshopify.com, also are you using Venture theme?

Thanks

0 Likes
Highlighted
Shopify Partner
20 0 0

I am using the venture theme, I would just like to move the hero slider up so I can make it a little taller.  There is like an inch of white space between it and the menu now I’d like to remove.  SigmaAstra is the password. 

0 Likes