Jump to content

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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: 

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio plugin
If you find my answer fit your need, 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.