CSS and featured images on slider in Twentyfourteen theme

• 

  worldvespa · Member · Sep 8, 2015 at 3:46 am

  • Copy link
  • Add topic to favorites

  Hello,

  I’d like to change the featured images on the slider so that there is no that gap on the right side anymore.
  Is it possible?

  Thanks in advance,
  Stergios

  You can find my blog here: https://worldvespa.wordpress.com/

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

• 

  jameswelbes · Member · Sep 8, 2015 at 4:34 am

  • Copy link

  Hey there!

  I don’t see a gap on the right side of your slider. Can you describe what you mean?

• 

  worldvespa · Member · Sep 8, 2015 at 4:19 pm

  • Copy link

  You can see it here: http://i1019.photobucket.com/albums/af312/s_gogos/worldvespacom/slider%20gap_zpsyouldtds.jpg

  Thanks for the reply!

• 

  worldvespa · Member · Sep 8, 2015 at 4:24 pm

  • Copy link

  Sorry I didn’t already tell you, but I’ve made these changes and now although the whole blog is wider, the images of the featured content on the slider aren’t wider, creating this gap on the right.
  Here are the changes I did:

  /* Remove entire Post Notice */
  .entry-meta {
  display: none;
  }

  .primary-navigation {
  float: left;
  font-size: 11px;
  margin: 0 1px 0 55px;
  padding: 0;
  text-transform: uppercase;
  }

  #page {
  margin-left: auto;
  margin-right: auto;
  }

  .site {
  background-color: #fff;
  max-width: 100%;
  position: relative;
  }

  .site-header {
  background-color: #000;
  max-width: 100%;
  position: relative;
  width: 100%;
  z-index: 4;
  }

  .site-content .entry-header,
  .site-content .entry-content,
  .site-content .entry-summary,
  .site-content .entry-meta,
  .page-content {
  margin: 0 auto;
  max-width: 100%;
  }

  @media screen and (min-width: 600px) {
  .slider-control-paging li a:before {
  background: #fff;
  }

  .slider-viewport {
  height: 80% !important;
  }

  .slider .featured-content .entry-header {
  bottom: 20%;
  padding-bottom: 25px;
  background: rgba(255,255,255,0.75);
  }
  }

• 

  thesacredpath · Member · Sep 8, 2015 at 10:27 pm

  • Copy link

  Hi, add the following to your custom CSS to make the images in the post slider 100% width.

  .post-thumbnail img {
      width: 100%;
  }

• 

  worldvespa · Member · Sep 9, 2015 at 12:21 am

  • Copy link

  Thank you very much! It worked!

• 

  thesacredpath · Member · Sep 9, 2015 at 4:23 am

  • Copy link

  You are welcome.