MEET SITKA | A super-customizable modern WP theme!

Okay
  Print

Make Oleander's promo boxes square

Please note: This article is specifically for the Oleander theme. 


By default, Oleander's promo boxes will display as rectangles. To change your promo boxes' images to be square, you can navigate to WP Dashboard > Appearance > Customize > Custom CSS and insert this code:

.promo-item {height: 360px;}
@media only screen and (min-width: 942px) and (max-width: 1170px) {
.promo-item {height: 293px;}
}
@media only screen and (min-width: 768px) and (max-width: 960px) {
.promo-item {height: 230px;}
}
@media only screen and (max-width: 767px) {
.promo-item {height: 280px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.promo-item {height: 420px;}
}

Save changes when finished. 

If you have a cache tool operating on your WordPress (like a cache plugin) or on your web browser, please note that you may need to clear your cache(s) to see changes take affect.