head html mobile only

[DanteQuinine]

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

<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

[piersg · Accepted solution]

You need a media query 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

<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>

[DanteQuinine]

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

Thanks

[NBaring]

<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.

[DanteQuinine]

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

[NBaring]

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: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns

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

[DanteQuinine]

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?

[NBaring]

You have to remove:

display: inline-block;

as it is overiding:

display: grid;