Instagram Widget Resize- Affinity

jennysavagetx · Member · Jul 23, 2018 at 3:16 am
Copy link

Add topic to favorites
I’d like to make the instagram widget for my site smaller, like around the size of my other widgets. Is there CSS code I could use to do this?

Thanks!
gemmacevans · Staff · Jul 23, 2018 at 2:23 pm
Copy link
Hi jennysavagetx,

This code can be pasted into My Sites > Customise > CSS and will reduce the overall size of the Instagram widget whilst aligning in the centre of that widget area:
```
#wpcom_instagram_widget-82 {
      width: 75%;
      margin: 0 auto;
}
```
Let me know if that does what you are looking for.
jennysavagetx · Member · Jul 24, 2018 at 3:57 pm
Copy link
Oh thanks! I just nearly does! I adjusted the width to 50%, and I like it at that size. However, is there a way to evenly distribute the remaining 2 widget areas across all 3 widget areas now?
staff-zinnia · Staff · Jul 24, 2018 at 5:10 pm
Copy link
I think that a similar CSS trick will work for the remainder of the widgets. Let me see if I can come up with those codes for you. Hang tight.
staff-zinnia · Staff · Jul 24, 2018 at 6:28 pm
Copy link
OK, I’m back. Please take a look at the site, specifically those widget areas and let me know what you think.

I had to remove the original CSS that Gemma shared in order to sort out the desired alignment.

@media screen and (min-width: 58em) {
.footer-widgets .widget-areas .widget-area:nth-child(1):nth-last-child(3) {
width: 30%;
margin-right: 0;
}

.footer-widgets .widget-areas .widget-area:nth-child(2):nth-last-child(2),.footer-widgets .widget-areas .widget-area:nth-child(3):nth-last-child(1):last-of-type {
width: 30%;
margin-left: 5%;
margin-right: 0;
}
}
jennysavagetx · Member · Jul 29, 2018 at 7:20 am
Copy link
That’s perfect! Thanks!
staff-zinnia · Staff · Jul 29, 2018 at 7:05 pm
Copy link
Awesome :) Glad I could help.

No items found.