Mis-aligned responsive layout in Playground Theme

[Rachel Kirk]

hi, my site is https://iverenvironmentcentre.groundworksites.com/

There are 2 mis-aligned elements of the layout that I can’t seem to resolve. Can you assist please.

1. On the home page the 3 events don’t line up at the bottom of the coloured boxes. This mis-alignment is also showing as the size of the browser window chances, i.e in responsive mode.

2. The boxes on the ‘Environmental Education’ page are also not lining up in responsive mode. There should be 3 rows of 3 boxes. https://iverenvironmentcentre.groundworksites.com/what-we-do/environmental-education/

Can you assist with these responsive layout issues. Many thanks

Kirk

[Sonal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

.courses-box { min-height:520px;}
.page-id-33 .boxpattern-2 .serviceboxbg { min-height:545px;}

Regards,
Brad

[Rachel Kirk]

Thanks Brad, that has worked to align the course boxes on the home page, however is there a way to reduce the space between the image and the title, within the boxes?

thanks

Kirk

[Rachel Kirk]

Actually Brad, don’t worry that is just the responsive aspect of the design.

no need for further action,

thanks

[Sonal S Sinha]

Hi,

Kindly use this CSS to reduce the space between the image and the title.

.coursescols3 .class-image-box { height:auto;}

Regards,
Brad

[Author]

Posts