Alter featured page layout

• 

  ashrouten · Member · Sep 20, 2017 at 3:40 pm

  • Copy link
  • Add topic to favorites

  I’m wondering if it’s possible via CSS to alter the placement of the logo pictures on the featured page of my site (www.ashrouten.com). I would like to try and space the pictures out in one row, similar to that at the bottom of this website:

  http://www.loveadventures.co.uk

  Is it possible?

  Also is it possible to get that dimmed hover effect as per the above example sit?

  Many thanks.

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

• 

  socalthrills · Member · Sep 20, 2017 at 3:46 pm

  • Copy link

  Hi There-

  This sounds like a fun project. Just checked your site and looks like it’s a self-hosted site. You can get assistance here:
  https://wordpress.org/support/

  Here is also the difference between WordPress.com and Self-Hosted sites:
  https://en.support.wordpress.com/com-vs-org/

  Good luck!

• 

  ashrouten · Member · Sep 20, 2017 at 3:57 pm

  • Copy link

  Thanks for having a look. My site is a wordpress.com site, not self-hosted.

• 

  thesacredpath · Member · Sep 20, 2017 at 8:07 pm

  • Copy link

  Hi @ashrouten, what you will need to do is edit the page and each of the logos will have to be in its own separate div. Switch to the HTML/Text tab and surround each of the linked image codes with a div like this.
  <div class="my-logo">linked image code</div>

  Once that is done, post back here and let me know and I can then work out the custom CSS.

• 

  ashrouten · Member · Sep 21, 2017 at 4:27 pm

  • Copy link

  Thanks sacredpath. I’ve had a go at surrounding the linked images with the code. Not sure if I’ve done it right though…

• 

  thesacredpath · Member · Sep 21, 2017 at 7:34 pm

  • Copy link

  Thanks, I’m taking a look at things and working out the code now.

• 

  thesacredpath · Member · Sep 21, 2017 at 8:15 pm

  • Copy link

  @ashrouten, I had to make a few minor adjustments to your page content, but I think this is good. I’ve got them 4 across down to 768px in window/screen width, where I take it to 2 rows of two. Then at 480px, I take it to a single row. The changes to the number per row is to keep the images clear and legible. See what you think.

  .my-logo {
    width: calc(25% - 45px);
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
    vertical-align: middle;
  }
  .front-block-one .front-block-inner {
    width: 100%;
    max-width: 90%;
  }
  @media screen and (max-width: 768px) {
    .my-logo {
      width: calc(50% - 45px);
      margin-bottom: 20px
    }
  }
  @media screen and (max-width: 480px) {
    .my-logo {
      width: 100%;
    }
  }

• 

  ashrouten · Member · Sep 22, 2017 at 9:30 am

  • Copy link

  That’s perfect. Many thanks sir, a great job!

• 

  thesacredpath · Member · Sep 22, 2017 at 10:12 am

  • Copy link

  Hooray, you are welcome and thanks.