Jump to content

Football Fixtures

Recommended Posts

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. 

Edited by Cityzen1992
Link to comment
  • Replies 5
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.