Jump to content

How to reorder the 'archive block' make the 'archive block' size bigger

Go to solution Solved by tuanphan,

Recommended Posts

Hey!

Hope you can help me out. I'm helping one of my friends with his homepage https://www.madsynet.dk/

He's a blind foodblogger and he wants a underpage with Recipes for the visitors. 

 

1. Reorder the list.

Now it says: 

"Aftensmad

Bagværk

Dessert

Frokost

Morgenmad

Søde sager

Tilbehør"

 

We want the order to be: 

"Morgenmad

Frokost

Aftensmad

Tilbehør

Dessert

Søde sager

Bagværk"

 

2. Change the size of the 'Archive block' 

If the archive block could be bigger/wider, we would love that. 

 

Thanks guys.

Edited by Kristjanloek
Forgot to put in some details.
Link to comment

#1. Add this code to Website Tools (under Not Linked) > Custom CSS

div#block-040a8317b5dde6e0b395 ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
/* Aftensmad */
li.archive-group:nth-child(1) {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
}
/* Bagvaerk */
li.archive-group:nth-child(2) {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
}
/* Dessert */
li.archive-group:nth-child(3) {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
}
/* Frokost */
li.archive-group:nth-child(4) {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}
/* Morgenmad */
li.archive-group:nth-child(5) {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}
/* Sode Sager */
li.archive-group:nth-child(6) {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
}
/* Tilbehor */
li.archive-group:nth-child(7) {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
}

image.png.cc5a5dee9f4f71286e29039abfd9e237.png

#2. You mean increase text size or?

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
On 12/1/2023 at 9:50 AM, tuanphan said:

#1. Add this code to Website Tools (under Not Linked) > Custom CSS

div#block-040a8317b5dde6e0b395 ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
/* Aftensmad */
li.archive-group:nth-child(1) {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
}
/* Bagvaerk */
li.archive-group:nth-child(2) {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
}
/* Dessert */
li.archive-group:nth-child(3) {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
}
/* Frokost */
li.archive-group:nth-child(4) {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}
/* Morgenmad */
li.archive-group:nth-child(5) {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
}
/* Sode Sager */
li.archive-group:nth-child(6) {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
}
/* Tilbehor */
li.archive-group:nth-child(7) {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
}

image.png.cc5a5dee9f4f71286e29039abfd9e237.png

#2. You mean increase text size or?

#2: Yes. Sorry, it was a bit quick. 
I want it to stand out somehow. So increase the text size would be great.

Edited by Kristjanloek
More detailed answer now.
Link to comment
  • Solution
On 12/7/2023 at 5:28 PM, Kristjanloek said:

#2: Yes. Sorry, it was a bit quick. 
I want it to stand out somehow. So increase the text size would be great.

You can use this CSS code

div#block-040a8317b5dde6e0b395 li.archive-group a {
    font-size: 30px;
}

 

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.