turn objects into a list when the resolution is less than X

Asked

Viewed 30 times

1

I need to change a rendering to show a checkbox if the device resolution is less than X

for example: show radio’s Buttons and if the screen resolution is less than X it becomes a select

html css responsive-layout
  • 1

    I think the best way to do this would be to create both ways and show only one when each case is. Playing display: block; and display: none;

  • 1

    Adding what Leon said uses with mediaquerie...

1 answer

2


You can use the solution to hide the content using the display:block and display:none, for this use the conditionals of css max-width.

Following example:

CSS:

* { -ie-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
body{ background: #EEE;}
.box_form { width: 800px; margin:50px auto; max-width: 100%; background: #FFF; box-shadow: rgba(0,0,0,0.5) 0 0 10px; padding: 30px;}
select, label { padding: 10px;}
.desktop { display: block;}
.mobile { display: none;}

@media(max-width:480px){
    .desktop { display: none;}
    .mobile { display: block;}
}

HTML:

<meta content="width=device-width, initial-scale=1" name="viewport">
<div class="box_form">
    <form action="">

        <div class="desktop">
            <input type="radio" id="resp1" value="1" name="pergunta1">
            <label for="resp1">Alternativa 1</label>

            <input type="radio" id="resp2" value="2" name="pergunta1">
            <label for="resp2">Alternativa 2</label>
        </div>

        <div class="mobile">
            <select name="pergunta1" id="pergunta1">
                <option value="">Alternativa 1</option>
                <option value="">Alternativa 2</option>
            </select>
        </div>

    </form>
</div>

Browser other questions tagged html css responsive-layout

You are not signed in. Login or sign up in order to post.