Jump to content

Custom scaling with Fluid Engine

Recommended Posts

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

 

image.thumb.png.a9aee5b993a18c36b9e5741b5ba8b43d.png

 

image.thumb.png.edb387ea532a117d5c00b858da320625.png

 

image.thumb.png.0340cba7ca18d066b1ae306745eb2ec1.png

Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

image.thumb.png.a9aee5b993a18c36b9e5741b5ba8b43d.png

 

image.thumb.png.edb387ea532a117d5c00b858da320625.png

 

image.thumb.png.0340cba7ca18d066b1ae306745eb2ec1.png

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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?

Link to comment
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
    }
}

 

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.