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