Decrease slider size

• 

  9thartwave · Member · Mar 17, 2017 at 4:25 pm

  • Copy link
  • Add topic to favorites

  Hi

  How do I decrease the size of the content slider (both dimensions), without apparently cropping the image (does not matter if the image is smaller)

  thanks

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Mar 17, 2017 at 8:37 pm

  • Copy link

  I’m not seeing a content slider on your site right now. Can you give me a link to the page that has it?

• 

  9thartwave · Member · Mar 18, 2017 at 12:49 am

  • Copy link

  I remove it every time I stop working on the page, till I got everything done

  Do u need to see the slider or is it just the css code?

• 

  9thartwave · Member · Mar 20, 2017 at 12:46 pm

  • Copy link

  Now the slider is back on so you can see what I am saying

• 

  thesacredpath · Member · Mar 20, 2017 at 9:08 pm

  • Copy link

  Give this a try and see what you think. In my testing it seems to work for all screen sizes. As you can see, I’ve made a good number of changes to get the image to show in full and get rid of all the extra whitespace above the image and also above the title/menu on smaller screens.

  .featured-slider .featured-image {
  	background-repeat: no-repeat;
  	-webkit-background-size: contain;
  	background-size: contain;
  }
  .verticalize-container::before {
  	display: inline;
  }
  .featured-slider-wrap {
  	margin-top: 150px !important;
  }
  @media screen and (max-width: 768px) {
  	.featured-slider-wrap {
  		margin-top: 0 !important;
  	}
  }
  @media screen and (max-width: 991px) {
  	.featured-slider-wrap {
  		margin-top: 50px !important;
  	}
  }

• 

  9thartwave · Member · Mar 21, 2017 at 8:55 am

  • Copy link

  Thanks, but the slider does not seem to change size in my laptop. I am sending you sceenshots of my site and of the Eris demo, both taken from my screen

  https://www.dropbox.com/sh/jvw8ono04vqjdv2/AACJe3L6k5uZNtdqEEsBA1ZXa?dl=0

• 

  thesacredpath · Member · Mar 22, 2017 at 12:32 am

  • Copy link

  See my comment here: https://en.forums.wordpress.com/topic/sidebar-in-eris-theme?replies=5#post-2900710. Fix the labels in your custom CSS and things will then work.

• 

  9thartwave · Member · Mar 22, 2017 at 8:36 am

  • Copy link

  Perfect, thanks

  Last one. Is this the smaller it can get? Because I am decreasing the 768px and 991px but there is no difference

• 

  thesacredpath · Member · Mar 22, 2017 at 11:47 pm

  • Copy link

  The 768 and 991 pixel values in the media query have to stay as they are overriding styling in media queries in the original CSS.

  We can make the slider images smaller with the following, but Eris is quite complex and getting it all to look right and good with changes like this is more than a little challenging.

  .featured-slider .slick-current .featured-image {
  	transform: scale(.5);
  }
  .admin-bar .featured-slider-wrap {
  	height: 430px !important;
  }

• 

  9thartwave · Member · Mar 23, 2017 at 8:33 am

  • Copy link

  got it, thanks

• 

  thesacredpath · Member · Mar 23, 2017 at 5:23 pm

  • Copy link

  Awesome, and you are welcome!