Styling the Index Page - York template

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?  

Can you share link to index page? I can take a look

I'll DM you the password and link. It's not live yet

Add to Home > Design > Custom CSS

.index-list>div:not(:first-child) {
    width: 50%;
    clear: none !important;
}

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.

remove above & use this

@media screen and (min-width:641px) {
.index-list>div:not(:first-child) {
    width: 50%;
    clear: none !important;
}
}

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)

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?

Sure, I'll message you directly the link and password as I'm still tweaking it

3 hours ago, CGeorgeU said:

Sure, I'll message you directly the link and password as I'm still tweaking it

incorrect password

Apologies, it should work now.

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;
}
}

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? 

Can you share site url + password again? I can't see it

Sure, I'll send you a private message

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;
}
}

This works really well, thanks so much for your help!

Is it possible for the change to be only present on the 'Product Design' page? The change has been pushed across all pages, and I was wondering if it was possible for the second page to keep the design as before the custom CSS change

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>

Brilliant, thanks again 😁it's worked perfectly

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

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?

Hey sorry just ran into this insane problem with the auto color background for the York menu. Does anyone know how to match the color of the background main image to the website thumbnail?