Football Fixtures

Hello,

I have started to create a new website for my local football club and am looking to add the Fixtures/Results for our teams, we have over twenty in total as we offer a pathway from 4 years old to adult.  I've looked online and the only club that I can find that has what we we're trying to do is https://www.realbedford.com/mens-fixtures. 

Any advice would be much appreciated as I'd like to be able to do this on Squarespace due to how easy the platform is use, Wordpress does have a plugin that does exactly what we're looking for but Wordpress isn't as easy to use as Squarspace. 

Hi,

Do you have a mockup/example/image of desired layout? We can check easier

Hi, This is from another club https://www.realbedford.com/mens-fixtures but ideally what we'd like to replicate

On 3/14/2023 at 7:17 AM, Cityzen1992 said:

Hi, This is from another club https://www.realbedford.com/mens-fixtures but ideally what we'd like to replicate

 

You mean recreate this layout?

On 3/15/2023 at 3:47 AM, tuanphan said:

You mean recreate this layout?

That's correct yes, I'd like to use this layout for my Football Club and am trying to find out how. 

13 hours ago, Cityzen1992 said:

That's correct yes, I'd like to use this layout for my Football Club and am trying to find out how. 

They used Gallery Block to achieve this. You can also just use Text, Image Block, Button,..

See video

https://www.loom.com/share/858f718d228943d7903f4e5c383a920c

The code in video

<style>
 .sqs-gallery-block-grid .sqs-gallery-design-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-gap: 30px
}

.sqs-gallery-block-grid .sqs-gallery-design-grid .slide {
    width: 100% !important
}

.sqs-gallery-block-grid .sqs-gallery-design-grid .slide .margin-wrapper {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center
}

.sqs-gallery-block-grid .sqs-gallery-design-grid .slide .margin-wrapper .image-slide-anchor {
    flex: 0 1 30%;
    height: auto;
    padding-bottom: 0 !important;
    padding-left: 10px;
    padding-right: 10px
}

.sqs-gallery-block-grid .sqs-gallery-design-grid .slide .margin-wrapper .image-slide-anchor img {
    height: auto !important;
    max-height: 55px;
    left: 0 !important;
    top: 0 !important;
    width: auto !important
}
.sqs-gallery-block-grid.sqs-gallery-block-meta-only-title .margin-wrapper .image-slide-title {
    font-family: 'headings';
    font-size: 18px;
    margin-top: 0;
    white-space: normal;
    word-break: break-word
}

.sqs-gallery-block-grid .sqs-gallery-design-grid .slide:first-child .margin-wrapper {
    flex-direction: row-reverse
}

 .sqs-gallery-block-grid .sqs-gallery-design-grid .slide:first-child .margin-wrapper .image-slide-title {
    text-align: left
}

.sqs-gallery-block-grid .sqs-gallery-design-grid .slide:first-child .margin-wrapper .image-slide-anchor,.sqs-gallery-block-grid .sqs-gallery-design-grid .slide:last-child .margin-wrapper .image-slide-title {
    text-align: right
}

.sqs-gallery-block-grid .sqs-gallery-design-grid .slide:nth-child(2) .margin-wrapper .image-slide-anchor {
    display: none
}

.sqs-gallery-block-grid .sqs-gallery-design-grid .slide:nth-child(2) .margin-wrapper .image-slide-title {
    background-color: #ebebeb;
    box-sizing: border-box;
    font-weight: bold;
    padding: .7em 1em
}
</style>