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

@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.

The topic ‘Alter featured page layout’ is closed to new replies.

WordPress.com forums

Alter featured page layout