# head html mobile only

**URL:** <https://community.hubspot.com/t/head-html-mobile-only/40390>\
**Category:** CMS Development\
**Tags:** forms\
**Created:** [July 8, 2021, 11:22am UTC](https://community.hubspot.com/t/head-html-mobile-only/40390 "2021-07-08T11:22:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![DanteQuinine](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dantequinine/32/74736_2.png) [@DanteQuinine](https://community.hubspot.com/u/DanteQuinine)\
**Post date:** [July 8, 2021, 11:22am UTC](https://community.hubspot.com/t/head-html-mobile-only/40390/1 "2021-07-08T11:22:37Z")

</div>

Hi I am a novice with css and html, but want to change my forms checkboxes to be in two coloums just on desktop

this works to create the two coloums

```auto
<style>
 li.hs-form-checkbox {
 display: inline-block;
 width: 50%;
 }
</style>

```

but I want this to only happen when the screen viewing it is wide enough otherwise default to single coloum, i.e not use the above styling

any help would be greatly appreciated.

Thanks

---

<div class="post-metadata">

**Author:** ![NBaring](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nbaring/32/2490_2.png) [@NBaring](https://community.hubspot.com/u/NBaring)\
**Post date:** [July 8, 2021, 11:26am UTC](https://community.hubspot.com/t/head-html-mobile-only/40390/2 "2021-07-08T11:26:57Z")

</div>

Try something like this, you may have to mess around with the values to get it right.

display: grid;

grid-auto-columns: minmax(50%, auto);

Check out MDN’s page on it: [grid-auto-columns CSS property - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)

grid-auto-columns: 1fr; also might work

---

<div class="post-metadata">

**Author:** ![DanteQuinine](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dantequinine/32/74736_2.png) [@DanteQuinine](https://community.hubspot.com/u/DanteQuinine)\
**Post date:** [July 8, 2021, 11:54am UTC](https://community.hubspot.com/t/head-html-mobile-only/40390/3 "2021-07-08T11:54:09Z")

</div>

Hey amazing that you replyed so quick, but I am a novice,

I tried

\<style\>  
li.hs-form-checkbox {  
display: grid;  
grid-auto-columns: 1fr;  
display: inline-block;  
width: 50%;  
}  
\</style\>

but know luck any other pointers?

---

<div class="post-metadata">

**Author:** ![NBaring](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nbaring/32/2490_2.png) [@NBaring](https://community.hubspot.com/u/NBaring)\
**Post date:** [July 8, 2021, 11:59am UTC](https://community.hubspot.com/t/head-html-mobile-only/40390/4 "2021-07-08T11:59:17Z")

</div>

You have to remove:

display: inline-block;

as it is overiding:

display: grid;

---

<div class="post-metadata">

**Author:** ![NBaring](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nbaring/32/2490_2.png) [@NBaring](https://community.hubspot.com/u/NBaring)\
**Post date:** [July 8, 2021, 12:04pm UTC](https://community.hubspot.com/t/head-html-mobile-only/40390/5 "2021-07-08T12:04:09Z")

</div>

```lia-code-sample
<style>
li.hs-form-checkbox {
display: grid;
grid-auto-columns: 1fr;
}
</style>

```

CSS(cascading style sheets) works all in order, like a waterfall it ‘cascades’. So if I set width to be 500px and then set width to be 200px after, it would be 200px.

---

<div class="post-metadata">

**Author:** ![DanteQuinine](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dantequinine/32/74736_2.png) [@DanteQuinine](https://community.hubspot.com/u/DanteQuinine)\
**Post date:** [July 8, 2021, 12:15pm UTC](https://community.hubspot.com/t/head-html-mobile-only/40390/6 "2021-07-08T12:15:27Z")

</div>

thanks for helping me out, so that makes sense, but with

\<style\>  
li.hs-form-checkbox {  
display: grid;  
grid-auto-columns: 1fr;  
}  
\</style\>

I only ever get 1 coloum, do I need to add a min max?

I want 2 coloums on wide view and 1 coloum when thin.

D

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [July 8, 2021, 4:09pm UTC](https://community.hubspot.com/t/head-html-mobile-only/40390/7 "2021-07-08T16:09:32Z")

</div>

You need a [media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) to define specific rules for different devices/screen widths. The below will be two equal columns at 769px plus, and 1 column at 768px and below. 768px is roughly a tablet in portrait mode.

You only need to change the specific rules you want changed, so in the below you don’t need to re-state

display: grid

```lia-code-sample
<style>
li.hs-form-checkbox {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
 li.hs-form-checkbox {
 grid-template-columns: 1fr;
 }
}
</style>

```

---

<div class="post-metadata">

**Author:** ![DanteQuinine](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dantequinine/32/74736_2.png) [@DanteQuinine](https://community.hubspot.com/u/DanteQuinine)\
**Post date:** [July 9, 2021, 9:34am UTC](https://community.hubspot.com/t/head-html-mobile-only/40390/8 "2021-07-09T09:34:26Z")

</div>

Thanks I used this with a couple of adjusts and we are cooking with gas.

Thanks