Docs

[Jeypolitan]

Hey there! 🙂

I recently added a footer to my website (Footer 1) where I have one widget (“The Grid‘s Instagram grid).
1. As you can see in the screenshot, the padding/height of my footer is very large. I would like to reduce the height of my footer so that it only covers the Instagram Grid. How do I do this with CSS? I researched in the forum and found this code:
.x-colophon.bottom {
padding: 20px 0;
}

This code above did not work unfortunately.

2. Also, as you can see in the screenshot, all my Instagram pictures are different sizes. That makes the widget look very messy. I have ticked the “Force Item Sizes” option inside of The Grid‘s Settings, but they are still different sizes. Please advise 🙂

All the best!
Jennifer

[Jeypolitan]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

1. This should do it, since it’s Footer’s top

.x-colophon.top {
    
padding: 0;

}

2. They are the same sizes, it’s just that image itself has white spaces. Like from here https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14134643_1236985223000136_1020726312_n.jpg?ig_cache_key=MTMzMTkyNDg2NzkxMzYyOTc3Mw%3D%3D.2.l

Thanks!

[Jeypolitan]

Hi there,

Thank you for your answer.

1. Unfortunately, the code given above does not work or change anything.

2. I understand. Is there a setting in which you can automatically resize/crop all the images to the same size?

All best,
Jennifer

[Christopher]

Hi there,

#1 Find this code and close curly bracket for media query rule :

@media (min-width: 980px){
    li.menu-item.x-menu-item.x-menu-item-search {
        float: right;
        margin-top: 15px;
        margin-right: 5px;
    }

#2 Resizing images will change the size of all images and it can’t effect only on white space around images.

Hope it helps.

[Jeypolitan]

Hi there,

I don’t quite understand what you mean with “Find this code and close curly bracket for media query rule :”.
Where am I supposed to find this code? I tried pasting it as a code in my CSS field, but it did not work or change anything.

Regards,
Jennifer

[Joao]

Hi Jeniffer,

You will find this code at Appereance > Customizer > Custom > CSS.

As you can see the code has 2x { but just 1x } and that is affecting all the codes below it.

I have closed it for you, now you can insert the code and it should work.

Hope it helps

Joao

[Jeypolitan]

That worked perfectly – thank you so much!! 🙂

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts