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

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?  

Share this post


Link to post

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.

Share this post


Link to post

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

Share this post


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?


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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? 

Share this post


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

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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

Share this post


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>

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


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...