Buenos dias compañeros:
Tengo un pequeño problema de visualización en HTML. Estoy desarrollando una aplicación web que contiene una imagen y dos botones, el primero sera para buscar la imagen y el segundo para subirla. Todo eso lo tengo solucionado.
Mi problema viene cuando pienso que esta aplicación web tiene que verse bien en diferentes dispositivos, lo cual implica agrandar o empequeñecer la pantalla, conclusión, ¿se os ocurre o sabéis una forma de que se vea bien sin importar el tamaño de pantalla?
No me importa modificar el formato de botones si hace falta, lo importante es que sea atractivo a la vista. Adjunto código e imágenes de lo actual, uso un CSS Pure
.
<div class="pure-control-group">
<img id="image" name="image" style="border: 2px solid ; width: 200px; height: 130px;" alt="" src="../image/noimage.png" align="middle"><br>
<input type="hidden" code="hidden" name="imagePath" value="">
<input id="loadFileXml" name="loadFile" style="width: 90px;" value="Preview" onclick="document.getElementById('fileToUpload').click();" type="button">
<input id="fileToUpload" style="display: none;" name="fileToUpload" value="Upload file" onchange="previewImage(document.getElementById('image'), document.getElementById('fileToUpload'))" disabled="disabled" type="file">
<input id="botonUpload" name="uploadFile" style="width: 90px; margin-left: 18px;" value="Upload" onclick="uploadAjax(document.getElementById('fileToUpload'))" type="button">
Esta es la imagen en pantalla grande
Esta es en pantalla pequeña, como veis se desplazan los botones y queda muy cerca de la scrollBar