force to 1 column on ipad

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.

Hi. Can you share link to page where you have problem? We can check easier

hope this helps: https://wearewan.com/we-are-wan

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

great, it works perfectly.  thank you, you are lifesaver!

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

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

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

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

 

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

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.

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