Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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 post
  • Replies 21
  • 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 post

remove above & use this

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

 

Link to post
  • 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 post
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?

Link to post
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;
}
}

 

Link to post

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

 

Link to post

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

Link to post

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>

 

Link to post
  • 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 post
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?

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...