# Css that fits for phone and tablet?

**URL:** https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697
**Category:** Ask for Help
**Created:** [October 5, 2021, 8:19pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697 "2021-10-05T20:19:04Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![lugasi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lugasi/32/33618_2.png) [@lugasi](https://community.glideapps.com/u/lugasi)
#### Post date: [October 5, 2021, 8:19pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/1 "2021-10-05T20:19:04Z")

</div>

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

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 5, 2021, 11:37pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/2 "2021-10-05T23:37:29Z")

</div>

What is the specific CSS you’re using?

If you know in advance the size of the devices then using @media will help.

[https://www.w3schools.com/cssref/css3\_pr\_mediaquery.asp](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)

---

<div class="post-metadata">

### Author: ![lugasi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lugasi/32/33618_2.png) [@lugasi](https://community.glideapps.com/u/lugasi)
#### Post date: [October 18, 2021, 6:53pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/3 "2021-10-18T18:53:30Z")

</div>

this is the css

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

```

---

<div class="post-metadata">

### Author: ![lugasi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lugasi/32/33618_2.png) [@lugasi](https://community.glideapps.com/u/lugasi)
#### Post date: [October 18, 2021, 6:57pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/4 "2021-10-18T18:57:17Z")

</div>

i dont really know how to use the @media…

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 19, 2021, 12:02am UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/5 "2021-10-19T00:02:54Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [October 19, 2021, 12:12am UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/6 "2021-10-19T00:12:07Z")

</div>

I’m also seeing a lot of unstable class names, so half of them probably aren’t working on different devices.

---

<div class="post-metadata">

### Author: ![lugasi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lugasi/32/33618_2.png) [@lugasi](https://community.glideapps.com/u/lugasi)
#### Post date: [October 30, 2021, 8:34pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/7 "2021-10-30T20:34:39Z")

</div>

I’m using this code

```auto
<div style="position: fixed; top:0px; left: 0%; z-index:-1;" target="_blank">
![](upload://5BRDbA4Iqb7fwyEmVOorIE11DQV.jpeg)
    <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…

---

<div class="post-metadata">

### Author: ![Dilon\_Perera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilon_perera/32/85652_2.png) [@Dilon\_Perera](https://community.glideapps.com/u/Dilon_Perera)
#### Post date: [October 30, 2021, 9:16pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/8 "2021-10-30T21:16:48Z")

</div>

Hi @lugasi 👋

You want like this right?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/4/1487f8101ea3645bb0202fa6f2ad94a243c70c3c.jpeg)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/2/22e9e9fe20e13ce50fc3269a329031517125e5a1.jpeg)

Thank you

---

<div class="post-metadata">

### Author: ![lugasi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lugasi/32/33618_2.png) [@lugasi](https://community.glideapps.com/u/lugasi)
#### Post date: [October 30, 2021, 9:53pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/9 "2021-10-30T21:53:09Z")

</div>

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](mailto:glideapps@discoursemail.com)\>:

---

<div class="post-metadata">

### Author: ![Dilon\_Perera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilon_perera/32/85652_2.png) [@Dilon\_Perera](https://community.glideapps.com/u/Dilon_Perera)
#### Post date: [October 30, 2021, 10:08pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/10 "2021-10-30T22:08:27Z")

</div>

@lugasi Can you send a example?

Thank you

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 30, 2021, 11:19pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/11 "2021-10-30T23:19:41Z")

</div>

What does it look like for you on the tablet?

---

<div class="post-metadata">

### Author: ![lugasi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lugasi/32/33618_2.png) [@lugasi](https://community.glideapps.com/u/lugasi)
#### Post date: [October 31, 2021, 1:44pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/12 "2021-10-31T13:44:33Z")

</div>

this is what i meant -

 ![מאונך](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/3/b39d8730c637cca258a41f3c9508c87e9defb1fa.jpeg)  
 ![אופקי](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/8/18455ef46269f8698248503c7e75e0ece2dfa0d6.jpeg)

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [October 31, 2021, 11:58pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/13 "2021-10-31T23:58:52Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![lugasi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lugasi/32/33618_2.png) [@lugasi](https://community.glideapps.com/u/lugasi)
#### Post date: [November 1, 2021, 8:58pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/14 "2021-11-01T20:58:34Z")

</div>

> [@ThinhDinh](#):
>
> You would have to find a way to conditionally change the horizontal width based on the layout you’re viewing.

🙄 anyone?

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [November 1, 2021, 11:37pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/15 "2021-11-01T23:37:48Z")

</div>

Do you mean to push the inline list down under, or fit the image to the inline list?

---

<div class="post-metadata">

### Author: ![lugasi](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lugasi/32/33618_2.png) [@lugasi](https://community.glideapps.com/u/lugasi)
#### Post date: [November 2, 2021, 4:59pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/16 "2021-11-02T16:59:13Z")

</div>

Setting the inline list go under the image when scrolling down, and before scrolling putting the inline list when the image ends.

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [November 2, 2021, 11:05pm UTC](https://community.glideapps.com/t/css-that-fits-for-phone-and-tablet/32697/17 "2021-11-02T23:05:38Z")

</div>

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.