Jump to content

Recommended Posts

Hi,

I have a section on the homepage of a website I am working on with 3 columns, created with fluid engine. I am trying to force the 3 columns to 1 colums on tablet portrait mode (for mobile screen it does it automatically), but so far no luck. If it would be possible to force the whole site instead of 1 section on a page, even better.

I tried this code:

@media screen and (max-width:1024px) and (min-width:750px) {
[data-section-id="62e128679b13b7022c5d2826"] .content {
    width: 100% !important;
}
}

and this one:

@media screen and (max-width:1000px) {
#collection-5dc4a4cd714889457f7615c2 div>.row>.col {
    width: 100% !important;
 }
}

 

Thanks for any help.

 

Link to comment
  • Replies 10
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Try adding to Design > Custom CSS

@media screen and (max-width:1024px) and (min-width:768px) {
.fe-62e128679b13b7022c5d2825 {
    grid: unset !important;
    display: block !important;
}
.fe-62e128679b13b7022c5d2825>div {
    margin-bottom: 20px;
}
.fe-62e128679b13b7022c5d2825 h4 br {
    display: none;
}
}

 

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
  • 9 months later...
On 7/30/2022 at 7:09 PM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (max-width:1024px) and (min-width:768px) {
.fe-62e128679b13b7022c5d2825 {
    grid: unset !important;
    display: block !important;
}
.fe-62e128679b13b7022c5d2825>div {
    margin-bottom: 20px;
}
.fe-62e128679b13b7022c5d2825 h4 br {
    display: none;
}
}

 

Hi! Could you please help me with the same request but for my client's site? It is 4 columns that I would like to stack on tablet, but just the section with "Community, Trust, Family, Creativity"....

https://www.homemadeeventsroc.com/about

pw: demo

Link to comment
On 5/16/2023 at 10:56 PM, jojod said:

Hi! Could you please help me with the same request but for my client's site? It is 4 columns that I would like to stack on tablet, but just the section with "Community, Trust, Family, Creativity"....

https://www.homemadeeventsroc.com/about

pw: demo

Try adding to Design > Custom CSS

/* Fluid Engine Stacked */
 @media screen and (max-width:991px) and (min-width:768px) {
  .fe-6451b93054062e10f19fa57f>div {
    grid-area: unset !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px;
}
.fe-6451b93054062e10f19fa57f {
    display: block !important;
    padding-left: 6vw;
    padding-right: 6vw;
}
  }

 

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
  • 11 months later...
On 5/1/2024 at 1:29 PM, CMD-2024 said:

Hi there, 


I am having a similar issue with a new site. It looks great on desktop and mobile views. However on the iPad it is cropping strangely (an issue with margins?) and looks very cramped - with buttons overlapping etc. Can I make it fit better?

Site: https://www.spoonbaygelato.com.au

 

IMG_0482 2.PNG

How about stacked this section on tablet only? or make each button on a different row?

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
  • 2 weeks later...
On 5/16/2024 at 12:54 AM, HEYTK said:

hi @tuanphan I'm having the same issue with tablet portrait view for
https://aqua-grouse-sspk.squarespace.com/about
pass: 536eastern

I just want it to stack to a single column. I've tried the codes above but the image doesn't display.

You can use this CSS code

@media screen and (max-width:991px) and (min-width:768px) {
.fluid-engine>div {
    grid-area: unset !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px;
}
.fluid-engine {
    display: block !important;
    padding-left: 6vw;
    padding-right: 6vw;
}
.fluid-engine .sqs-block-image .design-layout-fluid * {
    position: relative !important;
    width: 100% !important;
}
.fluid-engine .sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img {
    position: static !important;
    object-fit: cover !important;
}
.fluid-engine {
    padding-top: 100px;
}
  }

image.thumb.png.d700dc0a7b587c7bb2cc5c34288f3d73.png

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.