how to remove the black border when over the posts

• 

  giorgiatoscani · Member · Dec 20, 2017 at 4:01 pm

  • Copy link
  • Add topic to favorites

  Hi,
  i have a few questions:
  – I would like to know how to remove the black border when i pass with the mouse on top of the posts.

  – Is there a way to make the whole picture of the post active in order to see the rest of project? if i press on it i see just the featured image and to see the whole project i have to click on the title…

  – how do i reduce the white space between the rows?

  Help me please!
  thank you,
  Giorgia

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

• 

  thesacredpath · Member · Dec 21, 2017 at 2:49 am

  • Copy link

  Hi there, I see you have the border removed.

  On the portfolio items on the main page, the following increases the size of the title div so that it spans nearly the entire image on 1025px and wider screens/windows. Below that the design changes and the title moves below the image. See what you think with this.

  @media screen and (min-width: 1025px) {
    .portfolio-item .featured-image + .entry-header {
      display: block;
      max-height: 100%;
      height: 95%;
      bottom: 0;
    }
    .portfolio-item {
      box-sizing: border-box;
    }
    .portfolio-item .featured-image + .entry-header .entry-title {
      height: 100%;
    }
    .portfolio-item .featured-image + .entry-header .entry-title a {
      display: block;
      height: 100%;
      width: 100%;
    }
  }

• 

  giorgiatoscani · Member · Dec 21, 2017 at 4:05 pm

  • Copy link

  Hi there! thank you, but i doesnt seem to work with me :(

• 

  thesacredpath · Member · Dec 21, 2017 at 8:27 pm

  • Copy link

  Hmmm, it works for me in Firefox, Safari and Chrome, but only on screens 1025px and wider. On screens/windows narrower than that, the title moved down below the image (it is what takes you to the portfolio post itself). Replace what I had given you with the following, which makes this work down to phone-sized screens. The problem is though, that the title text gets lost in some of the images. Since phones and tablets cannot “hover” over an image, like you can with desktop system, we can’t really add the white translucent overlay on hover.

  @media screen and (min-width: 280px) {
   .portfolio-item .featured-image + .entry-header {
    display:block;
    max-height:100%;
    height:95%;
    bottom:0
   }
   .portfolio-item {
    box-sizing:border-box
   }
   .portfolio-item .featured-image + .entry-header .entry-title {
    height:100%
   }
   .portfolio-item .featured-image + .entry-header .entry-title a {
    display:block;
    height:100%;
    width:100%
   }
  }
  @media screen and (min-width: 280px) {
    .portfolio-item .featured-image + .entry-header {
      max-height: calc(100% - 60px);
      overflow: hidden;
      padding: 0;
      position: absolute;
      right: 30px;
      bottom: 30px;
      left: 30px;
      z-index: 3;
    }
  }