hey there, i am using css code for my app, but it good only for phone mode, and in tablet mode it’s a mass… there is an option to put other css for tablet mode? thx
What is the specific CSS you’re using?
If you know in advance the size of the devices then using @media will help.
3 Likes
this is the css
<div style="position: fixed; top:0px; left: -5%; z-index:-1;" target="_blank">
<img class="back_image" src="[/img]">
<pre><span><style>
.back_image{
width: max(100%, 30vw);
}
<pre><span><style>
/*Hide svg at the top——————————————*/
.jiuuwu svg { display: none; }
/*Hide tytle at the top——————————————*/
[data-test="glide-app-bar"] {display: none}
/*Hide the bar at the bottom——————————————*/
#tabBar{ display:; }
/*Hide svg at the bottom——————————————*/
.sc-cOigif.fALvAp svg { display: none; }
<pre><span><style>
/*Hide svg at the top——————————————*/
.jiuuwu svg { display: none; }
/*Hide tytle at the top——————————————*/
[data-test="glide-app-bar"] {display: none}
/*Hide the bar at the bottom——————————————*/
#tabBar{ display:0; }
svg at the bottom——————————————*/
.sc-cOigif.fALvAp svg { display: none; }
i dont really know how to use the @media…
It seems like you’re trying to hide things there, and then display a back_image property. Can you show us the two screenshots on your phone and your tablet?
I’m also seeing a lot of unstable class names, so half of them probably aren’t working on different devices.
3 Likes
I’m using this code
<div style="position: fixed; top:0px; left: 0%; z-index:-1;" target="_blank">
<pre><span><style>
.back_image{
width: max(130%, 35vw);
}
<pre><span><style>
/*Hide svg at the top——————————————*/
.jiuuwu svg { display: none; }
/*Hide tytle at the top——————————————*/
[data-test="glide-app-bar"] {display: none}
/*Hide the bar at the bottom——————————————*/
#tabBar{ display:none; }
/*Hide svg at the bottom——————————————*/
.sc-cOigif.fALvAp svg { display: none; }
<pre><span><style>
/*Hide svg at the top——————————————*/
.jiuuwu svg { display: none; }
/*Hide tytle at the top——————————————*/
[data-test="glide-app-bar"] {display: none}
/*Hide the bar at the bottom——————————————*/
#tabBar{ display:none; }
/*Hide svg at the bottom——————————————*/
.sc-cOigif.fALvAp svg { display: none; }
and when i adding a component (image or inline list) in tablet mode the problem show up…
Not exactly, i tried to put an image at the top, edge to edge…
בתאריך יום א׳, 31 באוק׳ 2021, 0:27, מאת Dilon Perera via Glide Community <glideapps@discoursemail.com>:
@lugasi Can you send a example?
Thank you
What does it look like for you on the tablet?
1 Like
Well what you’re trying to do here doesn’t fit the logic for the tablet layout I think. For mobiles, Glide uses the full horizontal width at stake, but with tablet, I think it’s not always the case. You would have to find a way to conditionally change the horizontal width based on the layout you’re viewing.
1 Like
anyone?
Do you mean to push the inline list down under, or fit the image to the inline list?
Setting the inline list go under the image when scrolling down, and before scrolling putting the inline list when the image ends.
I don’t have a good answer for this, as your image’s height will scale depending on the device. Possibly you can use the Experimental Column to track whether the user is using a mobile or a tablet, and add some separators at the top to push the inline list down.