Custom scaling with Fluid Engine

Hello!

By using custom CSS in Squarespace  7.1 with the Classic editor, it's possible to control the number of columns by the width of the screen.

As an example, the images on this site, appears in:

• one column on mobile (below 450px)
• two columns on tablet (screen size between 450 and 980px)
• four columns on desktop (screen size wider than 980px)

This is controlled by the CSS coding below.

My question is:

With the Fluid Engine, is it possible to do something similar (with or without custom css)?

/* Bildemenyer - Two column on tablet and mobile*/
/*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"],
{
@media screen and (max-width: 980px) {
  .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

/*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"],
{
  .span-3 .sqs-block-content {
    width: 100% !important;
}
}
}
/* End- Bildemenyer - Two column on tablet and mobile*/

/* -------------------Bildemenyer - one column below 450px--------------*/
/*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"],

{
@media screen and (max-width: 450px) {
.span-12 .span-3 {
    width: 100% !important;
    float: left !important;
}
}
  
/*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"],

{
  .span-3 .sqs-block-content {
    width: 100% !important;
}
}
}
 

1 minute ago, Erlend-fs said:

Hello!

By using custom CSS in Squarespace  7.1 with the Classic editor, it's possible to control the number of columns by the width of the screen.

As an example, the images on this site, appears in:

• one column on mobile (below 450px)
• two columns on tablet (screen size between 450 and 980px)
• four columns on desktop (screen size wider than 980px)

This is controlled by the CSS coding below.

 

My question is:

With the Fluid Engine, is it possible to do something similar (with or without custom css)?

 

/* Bildemenyer - Two column on tablet and mobile*/
/*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"],
{
@media screen and (max-width: 980px) {
  .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
}

/*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"],
{
  .span-3 .sqs-block-content {
    width: 100% !important;
}
}
}
/* End- Bildemenyer - Two column on tablet and mobile*/

/* -------------------Bildemenyer - one column below 450px--------------*/
/*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"],

{
@media screen and (max-width: 450px) {
.span-12 .span-3 {
    width: 100% !important;
    float: left !important;
}
}
  
/*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"],

{
  .span-3 .sqs-block-content {
    width: 100% !important;
}
}
}
 

 

 

Have you try using drag element on desktop and mobile with fluid engine section? https://recordit.co/nsyvNN1PbL

For the tablet, you can try the solution on this tutorial: 

Thanks for your reply Beyondspace.

With drag element in Fluid Engine, I'm able to make a mobile and a desktop layout. But not the tablet layout.

• In desktop layout, I want four images in a row. (accomplished)
• In tablet layout, I want two images in a row. (not accomplished)
• In mobile layout, I want one image in a row. (accomplished)

Any way to do this?

On 1/9/2023 at 2:22 PM, Erlend-fs said:

Thanks for your reply Beyondspace.

With drag element in Fluid Engine, I'm able to make a mobile and a desktop layout. But not the tablet layout.

• In desktop layout, I want four images in a row. (accomplished)
• In tablet layout, I want two images in a row. (not accomplished)
• In mobile layout, I want one image in a row. (accomplished)

Any way to do this?

It looks like you figured it out with this CSS code?

@media screen and (max-width: 980px) {
    section[data-section-id="602cca273f845d30031c13b6"] .span-12 .span-3 {
        width:50% !important;
        float: left !important
    }
}