Sponsor Widget

Hi,

I am looking to use the Sponsor Widget to link to calendar events. I've created suitable logos using white text on transparent background for each month of the year. However I would be looking for there to be 2 rows of 6 smaller boxes rather than 5 logos per row of the current set up (but remain 3 boxes wide when in mobile/narrow view), so there is one box for each month. Please could you advise what code I need to change to adjust the size/percentage of the boxes in the sponsor widget.

Thanks,

Hi,

Try to add this code in override.css file:

Code: Select all

.gk-sponsors-wrap > a,
.gk-sponsors > div > a {
   width: 15.6%;
}


Thats great thanks for the swift response.

This works great for the full/desktop screen size. I was wondering if it was possible to create responsive elements in the override.css file? Or would I need to mess around with the specific css files for mobile etc?

For example keep the above code for fully screen but have other code for other screen sizes. E.g. 3 boxes per row for mobiles (around 31.2% I presume) rather than 6 very small boxes.

Many thanks.

Yes, it's possible- you should use media queries in your override.css file.

I.e:

Code: Select all

@media (max-width: 1100px) {
.gk-sponsors-wrap > a,
.gk-sponsors > div > a {
   width: 25%;
}
}


for the screens smaller than 1100px.

Hi, thank you. All working great now.