head html mobile only

SOLVE
DanteQuinine
Member

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

0 Upvotes
1 Accepted solution

Accepted Solutions
piersg
Solution
Key Advisor

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>

 

 

View solution in original post

7 Replies 7
NBaring
Participant

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

0 Upvotes
DanteQuinine
Member

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?

 

0 Upvotes
NBaring
Participant

You have to remove:

 

display: inline-block;

 

as it is overiding:

 

display: grid;

 

0 Upvotes
NBaring
Participant

 

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

0 Upvotes
DanteQuinine
Member

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

0 Upvotes
piersg
Solution
Key Advisor

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>

 

 

View solution in original post

DanteQuinine
Member

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

 

Thanks

0 Upvotes