Change Product Tile Size On Slider | Envy Theme 2.0

Store Design
1

Hey All,

I recently added a slider carousel to my homepage on the new 2.0 envy theme but I am not sure how to change the size so that it looks like my current live theme’s slider. I am sure it is an easy fix but I’m just not sure where to look. Can anyone point me in the right direction? I will attach screenshots and my sites URL’s.

Current Slider (Ideal look/feel):

https://wearthepeace.com/

Current Slider.png
Current Slider.png392×590 44.3 KB

Slider that needs to be fixed:

https://oh0b9yn09j6hyk79-54559080629.shopifypreview.com

New Slider 2.0.png
New Slider 2.0.png535×548 29.3 KB

Please let me know if you can help, and if you need any more information. Thanks!

2

Hi @MuradNofal ,

Please resend the preview link, I will help you check it.

Screenshot.png
Screenshot.png1000×354 7.67 KB

3

Hi, the preview link is: https://gh1n56d08zy563in-54559080629.shopifypreview.com

4

Hi @MuradNofal ,

Go to Assets > custom.css and paste this at the bottom of the file:

.slider-home-pro .grid__item {
    width: 100% !important;
}

Hope it helps!

5

Thank you for the suggestion, it worked better at 90%. Do you know how to remove the white space on the left of the slideshow so it is full screen.

empty space.png
empty space.png536×818 79.5 KB

6

Hi @MuradNofal ,

Please add code:

@media screen and (max-width: 767px) {
  .slider-home-pro .grid__item:first-child {
    margin-left: 0 !important;
  }
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

7

this still does not bring the slideshow all the way to the left, there is still some white space.

8

Hi @MuradNofal ,

Please add code:

@media (max-width: 767px) {
	#shopify-section-template--15973956649214__1647489956d6a72e44 .container,
	#shopify-section-template--15973956649214__1647489956d6a72e44 .page-width {
		padding: 0 !important;
	}
}