Mis-aligned responsive layout in Playground Theme

Home Forums All Other Themes Mis-aligned responsive layout in Playground Theme

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #145167
    Rachel Kirk
    Participant
    • Topics: 36
    • Replies: 85
    • Total: 121
    Member since: October 25, 2019

    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

    #145629
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24832
    • Total: 24832
    Member since: August 16, 2013

    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

    #146058
    Rachel Kirk
    Participant
    • Topics: 36
    • Replies: 85
    • Total: 121
    Member since: October 25, 2019

    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

    #146059
    Rachel Kirk
    Participant
    • Topics: 36
    • Replies: 85
    • Total: 121
    Member since: October 25, 2019

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

    no need for further action,

    thanks

    #146079
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 24832
    • Total: 24832
    Member since: August 16, 2013

    Hi,

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

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

    Regards,
    Brad

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.