Jump to content

Styling the Index Page - York template

Recommended Posts

Hi

I'm using the York template and trying to style the index page.
The idea is to have a hero project first and then two columns with the rest of the projects.
So similar to the Style sitting "INDEX : LAYOUT / Item width : Full / Alternate Widths : Yes
But instead of having:
1 full width project , 2 columns, 1, 2, 1, 2...
it's:
1 full width project , 2 columns, 2,2,2...
Makes sense?
Don't want it alternating between full width and two columns.
Tried with a banner but can't insert a project there.
Does anyone know if it's possible to achieve this or is it possible to do with an other template?  

Link to comment
  • Replies 22
  • Views 1.7k
  • Created
  • Last Reply

Top Posters In This Topic

Thanks!

Visually that was exactly what I was after.
But there's two big problems with this method:
1. The first case after the Hero Case gets hidden, guessing behind the hero case. It reappears when viewing on a phone an all cases gets stacked one by one.
2. When viewing the site on a phone all cases gets scaled 50% in width except the Hero Case.

Link to comment
  • 2 weeks later...

Hi there!

I've just found this thread and I'm looking to solve exactly the same thing. The custom CSS posted above doesn't work for me, could somebody help?

(Just to clarify, as default the 'alternate widths' option shows the first two projects on one line and the third on a full width line. I would like to change this so that the first project is full width and all remaining projects are half width)

Edited by CGeorgeU
Link to comment
1 hour ago, CGeorgeU said:

Hi there!

I've just found this thread and I'm looking to solve exactly the same thing. The custom CSS posted above doesn't work for me, could somebody help?

(Just to clarify, as default the 'alternate widths' option shows the first two projects on one line and the third on a full width line. I would like to change this so that the first project is full width and all remaining projects are half width)

Can you share link to your site?

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
13 hours ago, CGeorgeU said:

Apologies, it should work now.

@media screen and (min-width:641px) {
.index-list>div:first-child {
    width: 100%;
    clear: none !important;
}
.index-list>div:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.index-list>div:not(:first-child) {
    width: 50% !important;
    float: left !important;
    border-left: 0 !important;
    padding-top: 0 !important;
}
.index-list>div:nth-child(3n+3) {
    clear: none !important;
}
}

 

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

Thanks!

I've added that code, and it works but there are some spacing issues with that change. I can adjust the vertical spacing between projects, is there any way to adjust the horizontal spacing between project 2 and 3 and change the width of project 1 to match the width of the projects below?

Also, is there any way for this code to only affect the 'Product Design' page? 

Link to comment
20 hours ago, CGeorgeU said:

Sure, I'll send you a private message

@media screen and (min-width:641px) {
.index-list>div:first-child {
    width: 100%;
    clear: none !important;
}
.index-list>div:first-child img {
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
}
.index-list>div:not(:first-child) {
    width: 49% !important;
    float: left !important;
    border-left: 0 !important;
    padding-top: 0 !important;
    margin-top: 2%;
}
.index-list>div:nth-child(2n+2) {
    margin-right: 2%;
}
.index-list>div:nth-child(3n+3) {
    clear: none !important;
}
}

 

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

Add to Page Settings > Advanced > Header (or Code Block)

<style>
  @media screen and (min-width:641px) {
.index-list>div:first-child {
    width: 100%;
    clear: none !important;
}
.index-list>div:first-child img {
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
}
.index-list>div:not(:first-child) {
    width: 49% !important;
    float: left !important;
    border-left: 0 !important;
    padding-top: 0 !important;
    margin-top: 2%;
}
.index-list>div:nth-child(2n+2) {
    margin-right: 2%;
}
.index-list>div:nth-child(3n+3) {
    clear: none !important;
}
}
</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
  • 4 months later...

Hi, I found this thread searching for some CSS to style the Index page in York in this manner: https://www.25ah.se

I would like to use the images original ratio and have padding between them without them shrinking too much (like they do when I try using the pre programmed styling). Is this possible to do and how would I go about it?

This is my site: https://www.bildinstitutet.se/

Thank you in advance!

M

Link to comment
On 9/29/2020 at 3:04 PM, Madelen said:

Hi, I found this thread searching for some CSS to style the Index page in York in this manner: https://www.25ah.se

I would like to use the images original ratio and have padding between them without them shrinking too much (like they do when I try using the pre programmed styling). Is this possible to do and how would I go about it?

This is my site: https://www.bildinstitutet.se/

Thank you in advance!

M

Have you found the code yet?

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
  • 1 year later...

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.