Layout & Colour

Chris,
1) I see that fitting in the container as a layer of 6. Is there something special needed? Conceptually you’ll need to set the thumbnail size or better yet tune the margin between thumbnails styling as below and changing 5px

.crp_related li {
margin: 5px !important
border: 1px solid #0ff
}

2. Style crp_title setting font to #0ff

3. See border in 1) above

Hi

Thanks for the response.

When I put that code in Custom CSS under Styles, (on your dashboard) nothing happens?

Theme is OceanWP with Elementor Pro.

If I edit via Elementor, I get different display altogether, with thumbnails displayed vertically, in the wrong place etc etc, so I’m assuming the best place to edit all settings is via your dashboard?

I’m already using code (found here) to centralise the thumbnails.

I’ve already tried increasing thumbnail size, 1px at a time to get them to fill the container width and at 132px it stops, if I go 133px it creates a second line of thumbnails. So I’m going along with your idea of increasing the margins instead but, as I say, the code wont work?

What am I doing wrong please?

Chris

I’m not familiar with Elementor Pro or OceanWP. But few things to check.

Once you have added the code into the settings box (right place to edit many of things) can you check that the code shows up in the source of the page. You might need to clear any caches that you have.

You can View Source and search for this. I can check this later when I’m in front of a computer to see if the code shows up

Just tried all this again & no luck……

Cleared cache, entered above coding & nada……

Site usually responds well to customisation, your ‘centering’code worked in a heartbeat…..

A mystery……

Sorry, there was an error in the code – it is missing semi-colons!

.crp_related li {
margin: 5px !important;
border: 1px solid #0ff;
}

.crp_related .crp_title {
color: #0ff !important;
}

Ah, yes……the patient is responding well to treatment, thanks very much.

The changing of border & font colour perfect!

Changing margin width, pixel by pixel has, however, made little difference to moving the thumbnails to the very edge of the container as the wider margin caused the sixth thumbnail to form a second row.I reduced the thumbnail size, pixel by pixel until a single row formed again. Thumbnails now 124 x 124 and margin 9px.

I would be happy for the margin to increase until it all fits but not for the thumbnails to get any smaller.

Is there anything else I can try? Is there some hidden padding or something?

Thanks.

Chris
chrisholland55.nl

Just checked your site – I noticed that you have the margin set to 9px which works well but moving it to 10px immediately pushes the thumbnail to the next row.

You could try up to 9.33px which makes it finer but any more pushes it to the next line.

Thanks very much.

Yes it moves the thumbnails closer to the edge of the container but not perfect.

Is there no code that get them to fit the container regardless of thumbnail size and/or margin?

Excuse me if this is obvious but I really don’t know the answer.

Cheers

Chris

Looking at this another way:

There are six thumbnails at 124px each = 744px
There are five margins of 9.33px each = 46.65px
There remains about 5px margin each side = 10px

All this totals =800.65px

Container width is 960px

What happened to the other 159.35px ??

Thanks

Chris

• This reply was modified 5 years, 3 months ago by chrisholland55.

There are also the borders which are 1px each so another 12px. But, I agree I am not sure where is the missing width. Are there any additional padding insider the container that is the wrapper.

One thing – is this container width of 960px for the container that the related posts directly come into?

I’ve been checking this in the box layout when viewing this in developer mode in Firefox. But, didn’t check what the width of the wrapping container is.

I’m actually not sure what the exact code would be to stretch them completely out there. Potentially some code that uses grid or table statements in the CSS but that isn’t my strong suite to be honest.

Hi

Thanks for getting back to me.

My 960px container is without any padding or margins.

I wanted to hide the green thumbnail border so just coloured it like the background but if I could remove it that would be good. I prefer the clean look without.

I’m happy with the broad white borders on roll-over.

To be honest It’s looking pretty good right now & having tried other related posts plug-ins yours is by far the best imo.

So, if you come up with a way to align the outer thumbnails with my container that will be great, but if not that’s fine.

CSS is foreign to me so I will leave well alone unless you come pu with code to paste.

Cheers

Chris

Been playing around a bit – CSS isn’t my forte.

Idea is to set the first child margin and last child margin. Set border and padding to 0 for the li and then you can play with the margin which is 39px to what you’d like. By the way, the container width is 940px from what I can see in Firefox

.crp_related li:first-child {
    margin-left: 0px !important;
}
.crp_related li:last-child {
    margin-right: 0px !important;
}
.crp_related li {
    margin: 39px !important;
    padding: 0;
    border: 0;
}

Thanks very much for your efforts, much appreciated.

After some adjustments it’s now exactly the way I want it…..

…..is there any way to move the title ‘You may also like…’ a little closer to the thumbnails?

Not a big deal, thanks very much for sorting all this out.

Chris

Cancel the last point……sorted it!