size of the featured slider

• 

  behindthesound1 · Member · May 11, 2016 at 10:30 am

  • Copy link
  • Add topic to favorites

  Hi. I’m wondering if I can change the size of the featured slider in Goodz Magazine theme?

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

• 

  thesacredpath · Member · May 11, 2016 at 8:35 pm

  • Copy link

  Hi there, if you are wanting it to be shorter vertically, then give the following a try and see what you think. I’ve limited this change to 600px and wider screens since below that the image is quite short already.

  @media screen and (min-width: 600px) {
  .featured-slider img {
  	top: 70%;
  	transform: translateY(-50%);
  }
  
  .featured-slider {
  	padding-bottom: 30%;
  }
  }

• 

  behindthesound1 · Member · May 12, 2016 at 3:58 pm

  • Copy link

  Ok can it be even smaller?

• 

  thesacredpath · Member · May 13, 2016 at 4:30 am

  • Copy link

  The issue is that we end up creating a gap on the left and right because of image size. What we can do would be to pull the image up a bit with a negative top margin and set an overflow hidden. Replace what I had give above with this and see what you think.

  @media screen and (min-width: 100px) {
  	.featured-image img {
  		transform:translateY(0);
  		margin-top: -15% !important;
  	}
  	.featured-image {
  		overflow: hidden;
  	}
  }

  Now the caveat: we have affected all featured images on pages and posts with this. It may not work with all posts and pages. The only way around this would be to include the unique page or post CSS class set in the opening body HTML tag to limit the change to only certain posts.

  I was working off of this post: Sonus faber Chameleon: matowy orzech.

• 

  behindthesound1 · Member · May 13, 2016 at 12:11 pm

  • Copy link

  Ok so I changed it a little bit (the first css code). I have no idea about css so I put random numbers. It satify my how it looks on pc but on smartphone it looks bad – whole text is not visible and picture is very small. In future I will make special image for posts in slider with fixed size. So can you help me with choosing the size of the image and fixing what I changed wrong in this css code:
  
  @media screen and (min-width: 100px) {
  .featured-slider img {
  top: 90%;
  transform: translateY(-50%);
  }

  .featured-slider {
  padding-bottom: 10%;
  }
  }

  Thank you!
  (sorry for language erros, I don’t speak English fluently)

• 

  thesacredpath · Member · May 13, 2016 at 8:17 pm

  • Copy link

  What you may wish to try is to change the min-width to 600px in the opening media query line and let things fall back to the original design below 600px, which should cover most phones. You could even do 800px for that and then see what you think on phones and tablets.

• 

  thesacredpath · Member · May 13, 2016 at 8:17 pm

  • Copy link

  No worries on your English.