Make featured image square? (Pro grid)

[lisacole1]

https://www.lisa-cole.co.uk/

Hiya. I’m enjoying the grid but struggling to control the dimensions of a featured image in it.

I have a looper pulling in a blog post in the small square second down on the left. (Currently it says thoughts about robots)

2 things are happening.

1. I cannot work out how to make the featured image square - I want it to take the height of the cell in the grid and crop the sides of the image to make it fit.
2. there is a particle or an interaction or something going on that is making it greyed out and zoom in. I cannot find that.

Is there any detailed documentation that is up to date that will help? Videos are ok but I’d rather read instructions than trawl through a video trying to find what I need.
Thank you!

[christian]

Hey Lisa,

1. For the Featured Image of the “thoughts about robots” article to take full height of the Cell, set the Top and Bottom Paddings of the Article (Div) to 45%. The Article Div is what houses the Text and Figure elements.

45% is what I’ve found to fit the square Cell.

---

2. The Gray Animation is coming from Article Div’s Background. Set the Base and Interaction Background Color to Transparent.

The Zoom animation comes from the Figure element. If you don’t need the animation, you can disable it in the Effects tab.

If you need further help with the setup, please give us the following info in a Secure Note.

• WordPress Login URL
• Admin username and password

You can find the Secure Note button at the bottom of your posts.

Thanks.

[lisacole1]

You superstar, I was going round in circles trying to work that out. I never would have found percentages in the div!
Is there any documentation other than the videos?

[lisacole1]

I’ve just had a look at it.
I don’t see the calc you have in the padding which I think is calc(1rem+5% I see this

and when I change it to look like your screenshot I get this which is worse. What am I doing wrong?

[christian]

Hey Lisa,

Just adjust the Top and Bottom to 45%. Keep the Right and Left paddings the way they were. Sorry for the confusion. The values in the screenshot are not the actual setting you should set. I just showed the Top and Bottom padding setting.

If you still have problems after that, please give us WordPress admin access and we’ll check what else you should set.

Thanks.

[lisacole1]

Thanks Christian, I tried that and it looks worse

The other thing I’m having problems with is that I can’t add padding to the title without the whole thing increasing in height and width.

I’ll give you WP access if it’s ok for you to check it out.
I really need more documentation about this. I’m really happy to learn how to do it but I’m just reaching dead ends or obsolete info online.

[friech]

Hi @lisacole1,

Thank you for the credentials but what is the login URL? The default /wp-admin and /wp-login.php are not working.

Anyways, It seems there is an inner row element inside that cell, please apply a flex-grow: 1; on that Row’s Element CSS area

$el.x-row {
	flex-grow: 1;
}

That should make that Row stretch vertically.

Please follow Christian’s instructions above regarding zooming effect animation.

Hope it helps,
Cheers!

[lisacole1]

sorry, I have given you the correct login url now. my apologies for wasting your time.

@friech

$el.x-row {
	flex-grow: 1;
}

Sorry, where does that go? It gives me a syntax error if I put it in the css. And poxy css!!! I do wish you wouldn’t put anything in there because I never think to look there and I spend DAY looking for settings.

I see there is a 75% padding setting in my css but I don’t know what that is doing. Nor do I know if I change the background size to something else if that will help. I really need some documentation.
This is my CSS, what is the 75% padding doing? if I take it away nothing seems to happen.
And why isn’t cover covering?
.x-recent-posts .h-recent-posts,
.x-recent-posts .x-recent-posts-date {
text-overflow: unset;
white-space: normal;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.x-recent-posts-date {
display: none !important;
}

.x-recent-posts a {
border:none!important;
padding:none!important;
margin:none!important;

}
.x-recent-posts .x-recent-posts-img {
padding-bottom:0%;
background-size: cover;/Adjust this value accordingly/
}

[tristup]

Hi @lisacole1,

It this very unfortunate that your website URL and the login URL both are showing the Forbidden error and we are unable to check your issue. Can you please check and reshare the URL along with the Login URL?

Thanks

[lisacole1]

hmm, that is weird. I’ll send another secure note, thanks

[marc_a]

Hi @lisacole1,

Please follow what my colleague @friech advises you. To add the code in the proper place, please follow the steps below.

1.) Click your posts div

2.) After clicking the posts settings go to customize tab and click the edit CSS.

3.) Then copy and paste the CSS code below.

$el.x-row {
	flex-grow: 1;
  margin: 0;
}

4.) Then it should look like this one:

Hope that helps.

Thank you.

[lisacole1]

@marc_a

$el.x-row {
	flex-grow: 1;
  margin: 0;
}

Thank you, I didn’t even know that area of CSS existed!

[marc_a]

Hi @lisacole1,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.