transform objects into list when resolution is less than X

Question

transform objects into list when resolution is less than X

Navigation

#1 by (2 votes)

1

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

example: show radio's buttons and if the screen resolution is smaller than X it turns a select

html css layout-responsivo

asked by anonymous 04.05.2017 / 17:37

1 answer

JSP Project with Database Assign HTML code to a Jquery alert

score 2 · Accepted Answer

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

Here's an 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>