Carousel size

• 

  4thesakeoflove · Member · May 22, 2017 at 7:02 pm

  • Copy link
  • Add topic to favorites

  Hi,

  is there a way I could make the carousel slider smaller? I would prefer it not to take up the whole screen.

  Thank you :)

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

• 

  jaimemarchwinski · Member · May 22, 2017 at 7:57 pm

  • Copy link

  Unfortunately, it seems like there is not a way to alter this carousel slider. It explicitly says that it is a “full-size” slideshow. My only suggestion would be to try to change something in css if you have an upgraded version of wordpress.com.

• 

  thesacredpath · Member · May 23, 2017 at 3:35 am

  • Copy link

  Hi @yvesmariesfaithjourney, this is a bit difficult to do, and things sort of go awry on smaller screens (less than 600px in width), so I’ve limited this to 600px and wider screens. Go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think.

  @media screen and (min-width: 600px) {
  .site-hero-wrapper .entry-content-site-hero-wrapper {
  	top: 30%%;
  }
  .site-hero-wrapper {
  	min-height: 500px;
  	height: auto;
  	max-height: 700px
  }
  .site-hero-wrapper .entry-image-site-hero {
  	background-position-y: bottom !important;
  	background-size: cover;
  	height: 75vh;
  }
  }

• 

  4thesakeoflove · Member · May 23, 2017 at 6:50 am

  • Copy link

  The carousel size on the desktop version is perfect. However, it hasn’t changed on mobile. Is it possible to change the size on mobile as well?

  Thank you so much for your help.

• 

  thesacredpath · Member · May 23, 2017 at 11:52 pm

  • Copy link

  Hi, this is tough since there is so little real estate on screens narrower than 600px, and if you happen to add a post to the slider that has a long title, things will go awry and overlap. Replace what I had given you with the following and see what you think.

  @media screen and (min-width: 300px) {
  	.site-hero-wrapper .entry-content-site-hero-wrapper {
  		top:55%;
  	}
  	.site-hero-wrapper {
  		min-height:0;
  		height:auto;
  		max-height:700px
  	}
  	.site-hero-wrapper .entry-image-site-hero {
  		background-size:cover;
  		height:75vh
  	}
  }
  @media screen and (max-width: 599px) {
  	.site-hero-wrapper .entry-content-site-hero-wrapper {
  		top: 60%;
  	}
  	.site-hero-wrapper .entry-header-site-hero::after {
  		margin-top: 15px;
  	}
  	.site-hero-wrapper .entry-title-site-hero a, .site-hero-wrapper .entry-title-site-hero a:visited {
  		font-size: 90%;
  	}
  	.site-hero-wrapper h1.entry-title-site-hero {
  		line-height: 1;
  	}
  }

• 

  4thesakeoflove · Member · May 24, 2017 at 1:45 am

  • Copy link

  This is exactly what I was looking for! thank you so much!

• 

  thesacredpath · Member · May 24, 2017 at 3:27 am

  • Copy link

  You are welcome.