Hi all,
I have some CSS code in a legacy view template that works perfectly when the page is rendered on PC or mobile/portrait, but is ignored on tablet or mobile/landscape.
The code is the following:
/*Basic settings, work fine on PC*/
.pub{
border: 1px solid #CED3DA;
height: 330px;
margin-bottom:10%;
}
.img-pub{
width:100%;
overflow:hidden;
height: 250px;
}
/*This adjusts the heights on mobile/portrait and works fine*/
@media(max-width:768px){
.pub{height:360px;}
.img-pub{height:300px;}
}
/*This adjusts the heights on tablet and mobile/landscape but is ignored (not exixting on the page console)*/
@media screen and (min-width: 768px) and (max-width: 1024px){
.img-pub{
width:100%;
overflow:hidden;
height: 500px;
border:2px solid red;
}
}
/*This creates a gradient background above the image and it works fine on pc and mobile/portrait, but it disappears on tablet or mobile/landscape ! */
.gradiente{
background-image: linear-gradient( rgba( 142, 135, 135, 0 ) 10%,rgba( 0, 0, 0, 1 ) 90% );
padding: 0 10px 0 5px;
min-height: 200px;
display: flex !important;
flex-direction: column;
justify-content: flex-end;
}
Is it a bug ? After all the code is quite simple, I can't explain why some of the selectors are ignored. I have tried to remove some selectors, change order, to no avail.
If it matters, FYI:
- I have aligned Toolset breakpoints to Kadence (which are given, cannot be changed)
- the view is rendered inside a Kadence Row Layout > Column.
Thanks
Regards
Nicola
