Grid Layout and Clickable Images

Hi @vinyljunky67,

Not sure if this is exactly what you’re looking for but hopefully it’ll at least get you on the right track: How to display a grid of popular posts in WordPress.

Hello Héctor
thank you for the information, I can’t access that URL it says access denied. I have even tried using a VPN, clearing cookies and rebooting et cetera.

Your Internet access is blockedFirewall or antivirus software may have blocked the connection.
Try:

Checking the connection
Checking firewall and antivirus configurations
ERR_NETWORK_ACCESS_DENIED

I very much appreciate your time

Thanks

Mike

How odd. I just checked and the link loaded just fine for me. Even tried using a VPN to simulate that I’m visiting the website from another country (USA) and it worked as expected.

Try using a different browser (eg. Firefox, Safari, Microsoft Edge, etc) and/or a different computer (or even your mobile phone) and see if that helps.

I have found the problem ?? I have disabled the McAfee firewall and can now access the site.

Thanks for your time and patience!

Mike

I’m having problems with the layout. I’ve removed it and checked it a few times but the layout seems to be broken.

https://siliconhell.com/

Please could you point me in the right direction?

Many thanks

Mike

I have sorted it by using the code below As custom CSS 
Is it okay to do it this way?

 .wpp-grid p:empty {
    display: none;
  }
 
  .wpp-grid li {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
  }
   
  .wpp-grid li:last-child {
    margin: 0;
  }
   
    .wpp-grid li .wpp-thumbnail {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 5px;
    }
     
    .wpp-post-title {
      display: block;
      margin-top: 0.8em;
      font-size: 1.1rem;
      font-weight: bold;
      line-height: 1.3;
      text-align: center;
    }
 
/** This is where the magic happens: 
 on larger screens our popular posts list 
 will be displayed as a grid. */
 
@media only screen and (min-width: 481px) {
  .wpp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two-columns */
    grid-gap: 1.5rem;
  }
 
    .wpp-grid li {
      margin: 0;
    }
}
 
@media only screen and (min-width: 768px) {
  .wpp-grid {
    grid-template-columns: 1fr 1fr 1fr; /* Three-columns */
  }
}

Yep, adding this as Custom CSS should work as well @vinyljunky67.

I use the widget as instructed but the layout was broken. I found that adding your CSS code fix the layout issue.

Do I need all of the CSS code?

I promise this is my last question :-)
I really appreciate your time

  /** If you're using the [wpp] shortcode
   you may need this to prevent empty paragraphs
   from breaking the grid. If not feel free
   to remove this rule */
.wpp-grid p:empty {
    display: none;
  }
 
  .wpp-grid li {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
  }
   
  .wpp-grid li:last-child {
    margin: 0;
  }
   
    .wpp-grid li .wpp-thumbnail {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 5px;
    }
     
    .wpp-post-title {
      display: block;
      margin-top: 0.8em;
      font-size: 1.1rem;
      font-weight: bold;
      line-height: 1.3;
      text-align: center;
    }
 
/** This is where the magic happens: 
 on larger screens our popular posts list 
 will be displayed as a grid. */
 
@media only screen and (min-width: 481px) {
  .wpp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two-columns */
    grid-gap: 1.5rem;
  }
 
    .wpp-grid li {
      margin: 0;
    }
}
 
@media only screen and (min-width: 768px) {
  .wpp-grid {
    grid-template-columns: 1fr 1fr 1fr; /* Three-columns */
  }
}

Yes, all of the CSS code from the tutorial is needed for the grid to look like a grid ??

You are indeed a code Guru ??

thanks again for a great plug-in and your assistance