Slider full width

• 

  grassoart · Member · Sep 25, 2016 at 11:50 am

  • Copy link
  • Add topic to favorites

  Hi, how can I make the slider full width, with no white space on the edges both in the pc and mobile version of my website? I have images at 1280×800 (16×10).

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

• 

  thesacredpath · Member · Sep 27, 2016 at 7:05 pm

  • Copy link

  Hi there, add the following and see what you think.

  .home .entry-hero-wrapper, .home .hentry-wrapper, .home .site-content-wrapper, .home .site-footer-wrapper, .home .site-header-wrapper, .home .site-content-wrapper .has-post-thumbnail .entry-header-wrapper, .home .widget-area-wrapper {
      max-width: 100%;
      width: 100%;
  }

  I’ve specifically targeted your home page with this so that it will not affect any other pages, such as your about page. The reason I’ve done it that way is that having text content that is full width makes it much more difficult for people to read. In general the best width for text content for easy readability is around 500 to 750 pixels.

• 

  grassoart · Member · Sep 27, 2016 at 7:23 pm

  • Copy link

  It worked, thanks! Now, How can I get rid of the borders whitout leaving any white spaces?

• 

  thesacredpath · Member · Sep 28, 2016 at 2:10 am

  • Copy link

  I think what you are wanting to remove is the 20px slideshow border. Add this and see if that does what you want.

  .home .slideshow-window {
      border: 0;
  }

• 

  grassoart · Member · Sep 28, 2016 at 2:50 pm

  • Copy link

  It still remains a bit, is it because of the image format (16X10)? If so, which is the best format?

• 

  priscillepeyrelongue · Member · Sep 28, 2016 at 3:32 pm

  • Copy link

  Hello,
  I think I have a similar problem. I am using the theme sketch and I would like the width of the image of the slider to be 600 px instead of 400 px. Do you know how to do that?

• 

  thesacredpath · Member · Sep 28, 2016 at 7:03 pm

  • Copy link

  @grassoart, add this to your custom CSS. The image size is calculated by the software and the following forces them to go full width.

  body div.slideshow-window * img {
      height: 100%;
      width: 100%;
  }

  On the image sizes, the most important thing is to keep the image proportions the same on all images. That is going to produce the most consistent view for your visitors. If you happen to mix landscape and portrait orientation images, that will cause some issues on your site. The slideshow creates a bounding box of a certain size for the images, so portrait images can end up with a lot of white space on each side.

• 

  thesacredpath · Member · Sep 28, 2016 at 7:03 pm

  • Copy link

  Hi @priscillepeyrelongue, since you are using a different theme, and since CSS is generally theme specific, can I ask you to create a new thread in the CSS Forum? Many thanks in advance.

• 

  priscillepeyrelongue · Member · Sep 28, 2016 at 7:07 pm

  • Copy link

  Sure. Sorry about that!

• 

  thesacredpath · Member · Sep 29, 2016 at 7:53 pm

  • Copy link

  @priscillepeyrelongue, no worries. :)

• 

  grassoart · Member · Sep 30, 2016 at 6:38 pm

  • Copy link

  Using that CSS, the images deform a bit, Is there a way to eliminate all of the border whitout distorting the images (at least on the top and the bottom)?

• 

  thesacredpath · Member · Oct 3, 2016 at 8:37 pm

  • Copy link

  Given the way the slideshow CSS and HTML are done, this is going to be a bit of a compromise and probably never perfect. Add the following to the bottom of your custom CSS and then you can play with the 58.25% value I have for the bottom padding (last rule). It was originally 56.25%.

  .home .entry-hero-wrapper, .home .hentry-wrapper, .home .site-content-wrapper, .home .site-footer-wrapper, .home .site-header-wrapper, .home .site-content-wrapper .has-post-thumbnail .entry-header-wrapper, .home .widget-area-wrapper {
      max-width: 100%;
      width: 100%;
  }
  .home .slideshow-window {
      border: 0;
  }
  body.home div.slideshow-window * img {
      height: 100%;
      width: 100%;
  }
  #content {
  	border: none;
  }
  .home .slideshow-window {
  	padding-bottom: 58.25% !important;
  }

• 

  grassoart · Member · Oct 3, 2016 at 8:42 pm

  • Copy link

  It’s perfect, the only thing is that i would like to maintain the 30px border I made for the desktop mode with the code `@media screen and (min-width: 896px) {
  #content {
  border-right: 30px solid #f0f0f0;
  border-left: 30px solid #f0f0f0;
  }

  .site-footer {
  border-top: none;
  }
  }
  `, Is it possible?

• 

  grassoart · Member · Oct 3, 2016 at 9:03 pm

  • Copy link

  Nothing, I solved by myself

• 

  thesacredpath · Member · Oct 3, 2016 at 9:22 pm

  • Copy link

  Hooray! Glad that is solved.