# How to select only large screen with CSS?

**URL:** <https://community.glideapps.com/t/how-to-select-only-large-screen-with-css/70609>\
**Category:** Ask for Help\
**Created:** [February 8, 2024, 12:19am UTC](https://community.glideapps.com/t/how-to-select-only-large-screen-with-css/70609 "2024-02-08T00:19:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Antiokh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antiokh/32/62356_2.png) [@Antiokh](https://community.glideapps.com/u/Antiokh)\
**Post date:** [February 8, 2024, 12:19am UTC](https://community.glideapps.com/t/how-to-select-only-large-screen-with-css/70609/1 "2024-02-08T00:19:13Z")

</div>

Hi there! I’m trying to fix this unfair situation when we can set container-alignment to top and middle. So if we have some fields with labels, any buttons will be floating somewhere.

I’ve added a class to my button block and set them css:

.bottom-buttons {  
margin-top: auto;  
}

it works fine for the large screent, but in small screens it minimizes a spacing between higher elements.

Any suggestions?

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/8880ddaada3e9fb836584ed483b3dc6a57c4eb15.png)

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/4/c459a5ff54d5772c69d02d18ecf7f0c61c8d1bb9.png)

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [February 8, 2024, 12:40am UTC](https://community.glideapps.com/t/how-to-select-only-large-screen-with-css/70609/2 "2024-02-08T00:40:21Z")

</div>

You could add screen size parameters in your css. Or if you use the display width column in your users table and combine it with a ITE, where if screen size is over 600px = Desktop or under 600px, Mobile. Then add the Desktop/Mobile as a visibility condition on specific components.

---

<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:** [February 8, 2024, 1:00am UTC](https://community.glideapps.com/t/how-to-select-only-large-screen-with-css/70609/3 "2024-02-08T01:00:13Z")

</div>

> **[CSS Media Queries](https://www.w3schools.com/css/css3_mediaqueries.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<div class="post-metadata">

**Author:** ![Antiokh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/antiokh/32/62356_2.png) [@Antiokh](https://community.glideapps.com/u/Antiokh)\
**Post date:** [February 8, 2024, 10:23am UTC](https://community.glideapps.com/t/how-to-select-only-large-screen-with-css/70609/4 "2024-02-08T10:23:51Z")

</div>

I’ve tried, css ignores @media tag

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [February 8, 2024, 12:07pm UTC](https://community.glideapps.com/t/how-to-select-only-large-screen-with-css/70609/5 "2024-02-08T12:07:32Z")

</div>

Ok then try the visibility filters based on device screen. I know that works because I use it myself. However, the builder only recognizes things displayed on desktop, so youll have to check it on the device itself