3

Estoy haciendo una página, pero cuando se ejecuta desde un dispositivo móvil (por ejemplo) sale como en versión escritorio y hay que ampliar para ver.

He estado mirando este ejemplo de w3schools, pero al aplicarlo a mi proyecto, se ve muy raro, las imágenes desaparecen y unos cuantos problemas más.

Este es mi código:

body {
  font-family: Verdana;
  background-image: url("https://lh6.googleusercontent.com/proxy/2_FymYLSO-g-We5Lo3JB5A8hMSg2fZMe53Cr0BctC9DY9n2cwTO1JNiGKL5ESGBA86CZx_J7It0wGiLA4YCX_ff0N74aKB03oS5bWhXiRvx373MBr2Eb9DUy");
  background-size: 100px 80px;
}

/* Redimensión */

* {
  box-sizing: border-box;
}
#menu {
  float:left;
  width:100%;
  text-align:center;
}
#menu a {
  background-color:#e5e5e5;
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}
#portada {
  float:left;
  width:100%;
  padding:0 20px;
}
#contenido {
  background-color:#e5e5e5;
  float:left;
  width:100%;
  padding:15px;
  margin-top:7px;
  text-align:center;
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .flex-container, .responsive {
    width:100%;
  }
}

/* Estructura flex */

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: Gray;
}

.flex-container > div {
  background-color: LightYellow;
  color: black;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
}

/* Nav bar */

ul {
  list-style-type: none;
  margin: 5px;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

/* Galería de imágenes */

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 5px;
  text-align: center;
  font-size: 12px;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 31%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 30%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <!-- Header -->
  <div class="flex-container" id="portada">
    <div style="flex-grow: 10">
      <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEhUTEhIVFRUXFxUYFRUXFRcVFRUSFRUXFhcXFxUYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGhAQGy0dHx0tLS0tLSstLS0rLS0tLSstLS0tKy0tLS0tLS0tLS0tLS0tKy0tLS0tLS0tLS0tLSstLf/AABEIAIgBcQMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAFAAIDBAYHAQj/xAA/EAABAwIEAwUFBgUEAQUAAAABAAIRAwQFEiExBkFREyJhcYEHMpGh0RRCUrHB8BYjYnKSFUOC4fEXJDNjsv/EABgBAAMBAQAAAAAAAAAAAAAAAAECAwAE/8QAJREAAgICAwEBAAEFAQAAAAAAAAECEQMhEhMxUUFhIjJxgaEE/9oADAMBAAIRAxEAPwCnj9HdZyiNVssepbrIAQ5c0DuyFhgUzGpjAp2BUJHrQpGheNCkaEQCAT40XrGqbsTCNmoGXIQuoNUYuQhVUarAPGqxQ3UDVPR3QCaLDkdpbIDhqP0NkDDwE5oSTgsYsUlaYq1JWqa5sh0wHgJwXgXqiOepJQnikVqNZFUfAQa/uDyRm6tSW7gH9wsvitIhv/zBhGh6FZwY8JIGvL3VA2fHfkiFDB3PcIe2ekrnGPW9RryW3MjqDz5hCrXF61B0iq6fNVjh0CeWmd3ZYVmaMLPmlWxq5oiOwD4/CVzXAuNrhzsrXzJ58+uq6lhlV1RoLgJhNVOib2r9Adx7UG0jFS2qD6ptP2vWp0LHj4I/iuB067crmjzgLmvE3s9dTl1IFw5dR8E6f0ThF+HTsK44tq47pProiQ4hozq6PPZfNtB76D41BB5z+S6ThWIMrUQHEzGqEpOIyxRZ16hUa8S0gqYNXH8J4gq2VQkfzKROo5jyXRMM4utq7ZDwDzB0hPGaZGeJxYchNJQ25xdoEgyhlTiASi5IVQbNCSks83HgmVOJGt3Q5obrkaReLHXXFundEoVX4orEd0Ic0MsMmdBqVmjchVK2J0m7uHxXMqt9cvJLnmPBZ/FKdeJzO18UnYUWA67X4noNnvjTxQ6vxhQgkuELjNwx40JKq/Z6jnazA5eKNt/oetL8O1WfENKrry5Ly+xmg3mCVyO4xU0GxzhAn47UJkk+SEYykaThB7O1/wCt0fD4LxcU/iKp0C9R6pg7sZ2THaehWIqth5XQcap6FYS8bD00BJ+DqYU7AoqallVREkBTwVWdUhRvuICJgix6tUbkBZOpi+U67Jpxocikp2PyVGgv6rSgtWoJQ66xgdVSGISVSiTkHmuCkpu1QWneK5SrrUazXYYVoaB0WWwirMLS2ztEKGLQTgOaiDk+m/WORQMWqRVtirWdOXQirrbXwH5LnmrLxdEDWp7wGiSYj0UdeuGjSSenl4rmfHL8TeTECnpDWes5idZiEkYDtnSLTFaL9neBB6q+bgH3Y9F81HGrqm9ucuEDbqevxXQ+AMXuKzhmfI1J5n1VHFxQqqZ0S9tjUEZyPEaFZLE+Dn1Zms7U9Jj6rbtOgkifkpadMH9yhQVJo4rjvAFdjR2bs43JJM+gWHxHD6tI5Xtjmd59V9TdmOeoWY4o4aZWYXMDA4SS48/VOpNCOMZ/wfPtjitSk4FukfP1XWOEvaNTdDa4DDoARrPmsFxFgZpOmoIE6DMP1Og+KCULs03d1rRHkT6uTtKStCJuDqT0fUVpeNqtDmGQdiAq+KOhp2+MD4rA+zzjDPFJ4Ecj3p/KFvcUpU30zmEjyn4FS/CtUzkvFWEMcS+iWh3MB+cE+W4Q7ArtzXZHgRs4tM/kr2NmmHktcWyTlEBvgT1Q3AqLWVGuquBnVre9LvGTs3x58uoHsS36au5s8rC4Ogcy86T0A5lZ9l06dB3Z5HfxMLYY84Oo94GI0iAB5aLC4QS6o4BroH3jqB6xASJDNmkw7FHscBJLTy10C0ArA+qB0LcuAM6jnsD9fSUSs6Zn3Z8eXwShpBmhShsoLfhznQ3YIvUrnLCrhoAWAgZRpnmm5iHK+5umvohd9XyiUo4SFUQqlaj2joCztPE3l4HUrVW8R6alYwKqYY0ugDZS3FixjdBLoVztYlRPcDqVrNRiccs4nTMT8AgDcHcZI2HvOOgXTK1q12pHkOnooLnDQdSAfwtO3m4KscriqJTxKTtnOP8AT29Ul0H7C7rT/wAQkm72L0I3eKskFc/xRsOXRsRZosFjVOCmh6Sn4VKafKjpJzirogVbmrCF3V5CtXzlnb6qiK2V765lDs56p9ZyiATkmyTtD1TmVCowE5qIAhbPJRa2ehdiESaYQZSPhqMIrRC1VpV0WDw64WuwxznRASMdGotaYLQfMFJlqA7UEj5Kxh1B0Ax5he4pdMYI26k8ipSlRWMbJwWUxmgkj9iVVuMTc897Rp2A0201QyyvCJJqB+pJgHZUr5z2ulokO1BG0efVQlJnRHGkHqFLUEH6eiVcNMg/v9ymcO0y7Uz03mEZusMY9padDyImVkrQHJJnJ+NcLNVzTTaDvoI36aa7aqHgqs62qAVWmnMxMxvJ81vbbBstR0nUbeInQx0+qmv8FpumGiQNDM/HotbqhtWW67TVZNN0TqIgT8VWwo12OPaGQdtJ+e5WEx/HqtF3YUQXbCGODgPLQknZHMEu71tI5md6f9x0HKIkkbxrPJb+QV+GuxQPcw5DrHXn1Quzualuwvua7QBsNNvSJK9u7Wo7WpcGm3L7rIYASB9485WYv+G6ecvNyX6j33SJ3MA+S1gS/DPce8SW1y4Bozkaa90aHqO9HgCFlCKUDLTaT/yDQfMuk+gK6icHovGV7KbmnXuwDvM+SzWPYBQFVraA/mE6tAOg5ynjkSBLG27JeAsPLqocNI3LRp8V1/uuZB9Z1Wb4ctHUaYaC0eEAI7bMn3zp66+GoSqV7DNVo5XxvZtoVXPLGOc73GCAHdHPnXKPwgwfKVncHp3L6uc5N5c52WR4k8l2DG+FxcvzAO8SNNOgRDDOA7dmU1JdGoaT3QfH8R8SmV1QjkluwbY4W+rSAHekakt7vp1THcJ9lLs5Lj1IAE/hbsFvHBtNsCAAPIBYPirE3zAY/KdnscB6Eu2+CDikgxnKTBN7Z9kC4OD3cxml3xKdh9w47tieQQ+jb1nd51PT+9xkehhFrG1G7ZB85CRl0xXFYNMKPtBuVYq2pJk6qtd0yPdGqRjpoqXdxrKHXAzpX9CoBJT7e1cWc9UoQJbvz1g1g0HNa6pLWRMdSqmFYZlMxCtYm8xAH0WbAkZy9xMNO5hMoYyCdB+qoYpQ1Jce9yHIIZQcA7UqigmrFcmmbqwrZtfkr1SmUNwV+m0fmjIbP71Uhyj2B6rxW+x8PzSQMau7ZIWG4gp6lbqvVELK4vb5uS7E9nFVoytIpzyr7bGOSqXbAFZSIuLQExArM3h1WnuLZ79AFFQ4TfUOsouSXovFy8Ma4aq3b4XWf7tMrp2DcCgQS1bbDuGWNHupHm+DL/z/AFnDKHClw77sIpa8B1juT8F3ijgzByCtMwxo5BL2SY3VBHGLLgJw5lG7TgXrquoNsmhTU6DQtzkw8YrxGFsuDGN+6tFY4G1mwR9rAvLiu2mwvcYDQSfIIWCwJjV223ZAIDyDE7DxKyVK0+0kB7i8zsCYJO0wgGIOusTvHOa11NhhrB0YNjHXmuo8M4D9npNa8hzuZiEjVssmoIGYfgD5gAMbzEDX9wEYZwywtyu1gz0AdESAPAlGmM1VlgTKBKWVg63w9rNh0Tb17WDMfor9wQBJXO+LOJ29p9maT2hIAABJJ3aRG45HzPRF6BC5PYYxC8aMtRpzNIIgaEdTr6IJi3aVHtbQeWt0zuB8DoGnmd0Ow61qUKWSuHEl4DWSZaHmZnwgmJ5FSVL14eacEPflEkHKHNaWuIn3efmpHQtBvDMCYyHNbmdMuqO1e46HfkNG6KO8/l1HOLwQ0kxs3UAOB6iQfVX/APUmW1oa1T3WgEAbkcgB5rjN3xrcduatdjH0nEzSadGtJncfeCbja0KpU9mqp2tfEKjjLmUmEBskw7lsi9bgYFpJq5idNfDoPOURw26ovtG3NqZYRqObTzB6QVYw7EA+AdydQd9N9OUhL/kdv4AqvApiWvcDHvTGvQAeigwHChQeSWPe+Yk6ggdCYXTraCI9B5eCC8QXlG2LSRnqOPdaNXk8oCLiIsluhlzTDqTu5kdECYmeS84VvBVZO4aS0O5PIMEjw/SEyjZ17sE1R2TIjKPeIO8nykeqK0Ayi4UwA0QAwcoH6nX4ErJbsEpaoKNIC9L+qrvrAaqn9tBMKl0RUbJMSJIgaLCYu1zyWFhJ/FEhw+q3DgTtsoG4YC6SErVlYNRMfguF1Gnnl5DVaOlYQNkapWrW7AJ7gFlELyWZ24oQNG6qjSsXHV3wWoqtVG5qBu8BK4jRmALnD8xgjROpWIAUl7etGsj4qjb4y1xhSdFldF51ADZULy3kK7Uu9FRq3rSldDKzH41bgGAMx8kDt7Xvz47afmtFxDdOjTQeSFYNYOqOkyB808XSC1s0uHUgAETc/RQU6IYICa6prAP6KQ1E+ZJVoPj+/RJY1GzyKJ9jPJTsU7F0nEDjhIPJVKnDLTyWganhGzWZ+jwy0ckTtsJa3kFfC9BWBbPKdu0bBThRApwKIGTApwKhDl6HIgJkoUYevc6wCQIdjrC+kWNEl8NjwJ1+SvZ16wc1g+FbAsGZQboBmO5hFXBRdsAnMMo6Ebb2yzRbopSmtCH8QYxStKLqtV0NA+PgnWkS9YG9oWOC2tXAOAqVO5TkE9484GsASsZwzZ1YDq8VGtEgiCWOjcTBJ8529Vgb3imteXL7qqHOptJFFgkNDZ0HmVs8Fq1q9IONN7CSIJc4BpjmDBnToVKd2deNLiaLD8WpVD2Zdu0AF2ocWkw5p+64GeXgQCEXGDU6uV0AkOcQdCQS0tIMb7/ILGX3Atd+vagbHuiDPMwNJEcgrNhYX1o7O15q5Rq38TRqRHWOY+aCf0LXxgz233jqNClRboHmSOgETHhOT4rlOD17cT22eQ2WQAQ50+64z3QROuq7f7TrNtalb3FVhFDK+nWcRJomoWljnRrlzNgkbZguY3nBLADUZctcyJ0LTp/dMJ+yMNSJ9c57jsOeyO+JpYhSEikGdo1pOrfeG/kB8EU4Vvu9DSZJjrAzSJjks9wVb9jYXtRszWcy3Yde837xEctTqjeCYbUpEOA3cW/8Q1pjT1iUmSnIphtR2dctqoydNNTO0eKhw3CGvebl4zOPuZh7rOUee/qm4VQLmhrpIgDz2WjYyBCaKv0jklx8IxThCcZw4PGbYt1B5jy+CNFDcZxOjRb/ADXhsjQbk+QGpTtKicG7M26/cT8j5fr5q1Z05QmtiYc8MpU3Pe7YRrE9OW/NGLPCrv3nGiz+nvPP+QIA+BUFbZ1yaS+BGkyFZAQqyxDNILS0tJaZBAJHNsgSPFX6dYKiZGSZKUwpznKEuWYERV1z7jDE3MdAmPBb+tqFmsSwYVSZASSL46Od173tB7x8ir3DuGvLswJhaJ3CjANUZsLAU2wFItyA97SMQNVTp0HAaj4LUGg08tU19sCg4hUzEXNnndq0nz+iJ22H5B08Aj4s2gyorkQNEKDzAN0D1KZa0TuT+qlqy46qzRaAEhQb2QSTu0H7j6rxYBqW/vqfPoFM0/v9AoWHTw+ZUzfn+QXScTJWn99P+1IP/H1UTfl+ZUjR/wB/REBIAvCF63/wn5f34ogIl6CnOYmELGHSlmTE0uQCSZk0vUTnqF9VCwpFyi6TurhbEKjYjSVedOUHonQj9PC1W7ZsBVGPlS1rkU2Oe6YaCdBJMdAEULIvGoBuYXGvb3iDHVLeiXwAHOc0HmSIkfVaHCRdYhci4rB1C2pEmnTdLTUcNpHQbrkXGN8+9v6zspDWuLdvutMct9k6dmUKZWpk1mijSDKbBqXl0if7Wgk/BHm8Q3lgxjXNNalMirkqNaW6d3UDTp5oDSwp4/mUmvdl97uOa5vy7w8kfwfH3PcG3AdUp5fvAPBMECCTHwSP/hZL/TOgcM8cUq7QT3XxqzKW7/1bH4rYWl+yqMwEjr49FzvA+HaNw4upmgDPKk0uj/kTB9F0TBsG7PcsIgaNbl/JBb8FnS9LpLKjHU6jQ5jwWuBEtIOhBHRcK9pXAhs877ZofQdrBbL6Pk7mzlrML6Fp0GgaBC8awnthl0yGZB/RU2tkIyV0ci4YxOndW1tZtaynJbMf06n1JC6xh+CMpgc4g/8AKImOqFYZwHaUKnatp96QegBBmQOWq1tNuiWMN2PPJpJCpUg3YQpZTXJjnKhD0ZcVcolc3xKqbm8LKfvTGc6lrY1IHIarX8S3eSkTIGnMwsFwK5769aqAIcSMx30OsBRyO3R14Y0rN5g+H07ZsN1cfeefecfEoxRqShLfFErRwRiyc1+k11TaWGY8+nigYZljWUYxOj2lGoyYzNcARvJHJAsGtKzbdjK/eqNkZurQe7PjCMkDG6RZbWSNQKvmCrXNyGHUwp2WUbLdR/QqvUqKt9oDtjqqxqnNBSOQ6gXiZTCUg5RXJ0lawpDyU1zlVFz4r01gZ11S2NxJXFVrhvPVQfaxzkJ1R0iQZStjJUUqrQmBw6hKtcMBg/8ASD1bxpJ3afPRIyqC2UdR80kF+0HqklsJ0VjP+lM1nz3TWhStK7DhHsZ8lK1iY0qQORFJA1PDVGHr0VFgHrwqzirLnKCrTJRYUREqJ7lI6k7pyUFWm7odkrGRC+p+pVSrX/JTVmHVU69HU+nwU22VikaCy0YBzifirtvW5FDhUhrXDaACpqTuYVEyMlZfZRbOys0qY2VOiV4+sWzJAGv7JVEybTA3tIxltrZVHgiYgeZ0+K+f7Yk0TWZUIcCTM894I6rX+1niplwPszW+67UnqOh5jxWIwayNShUE+6c2WYLgNCAUX5Y0LT4mpwjjxlOmA6i81Ig6Ny67kaaeUK5hvElsZNKl2dRzoqUnszU3A/eyiIPjKsYHaWmUGtTa2YntC3ONOZA2Wn/hayuA1wZTkaggmCNt2lsqNx/EXakltl3BOH6Ac2tSc6mHalodzOpA3MTylbylQgDvLE2eDNt3B9LNTIJGUFwaR+ItmD5kSrL+LCO4xpe4anT6c5TKSRKUZS8NmakBVzdarKjih+mei5oJ1OhjzG6JW94CZOxiDvKbsTE6WvQ464Dd1m8Z45t7fO1x7wa4x4gSAekq1d3TQCXGANz4LA3GDULylc1TVdSLjkDnxlYGkOI5SDsdVnMfHgUjquHXoq02vGzgD8VJVdouf+zviKl3rM1Mz6UQeTm9WnmtRiGKADQ6nYJuWhJYmptIy3tBvJblnbXT9VH7PWxbeOY/nPruo+KKJfScZAO5O6G+z/F2ua6iHCWmY/pJ5Lnu2dPH+mjfZoV21efRC+28k+hdOmAPmmTJOOjRU3qO/PdMeKit5PJWK4AaZVvUc/jOfWGNhznMf3XNJBB80ziSnnp5mnvDUD6o0MCpF5qBgL3buiBP1V+2wgDfVS4tnVzitnKMPxl9M/zHaytW6/a4B08lq77AqDhL6FN3m0T8VD/Dlq7/AGo8JI+GqV42HuRn7TE2uboZ1Xl1iEc1f/hS1aTlFRhPRx/VV7zg5rh3Lhw/uAP5QlcGMpxAd7iDQdD6eKEOxkgnvR56eWqK4jwHcO1bWpk9TmafyKGXPA18REUifCpofiBCHBlOyJTZjbyS5oMg6hErbiSlpmdkJ0M7ZkK/gu/pyRRzaHQPZv6OWfxnBb2HGrb1WzH3CRpuZGnJMsSbFeTQSxXiZri5sdduTh+YVfC8WFQ5ToTqOnhCzNQAHI6RHM7z4q7bVsoE5ecCNQeWvoqPFGtCLLJvZrc/7/ZSWc/1P/7Sko9MivYjuraqlFRVabVaYxURzse1ylCYwKVoRFPWqVoXjWqVrUQCATw3ZINUjQmFPI3Tsn5L1rU5EFlSpZg8kMvMJcQcp1K0AC9gJXBMKyNGGdc3FCQ6k57PDU+Ks2mN0ncntPMELXGmOnNRVLNh3aDr0S9bX6U7U/UBKmNsY2e8fSVieJeK61SRTljYI13M6LpTsLpbZRv8lSrcO0T9wA9efn4IuMgKcT5wvMHrueXZDkP+48imwT/W8gfBG+Hadswhr6xqvGzKLTlPh2jgB8AV0/GfZzSuJzPeT/Uc/wCax1/7Obu3P/tSA3mQCahHi/f0EDwTt3GmBalaL+I4Vnho7OkSPcHfqQB4nujxMQh+H9rba0Xdo2Y2iT0Z/SOZ0lDKtW5ofy+yqNBIznIQ58dXRo2dYWpwnim3ZSa0w0iQSdSCD08dVGi/IJU+JxQtu3vSWNMinTIHaP5+6OZ8eW6wOO+1GtVa5ltTFAEiCIc9w8TyPkFP7W3tquo1A6KeTuRqJdry5wPkh3BmCMpMF7cAOIn7PRP3njZ7/wCkb+itFRUbZzzc3LjHQRq2OIUWMq1Lk9rUAd2JAnqBHXVdY4at632ZhrxmOpG0LmVjiYNYVXue+qSO8dYEdJgBdlwm7bUpjKZ8eU81Nbeys/6VoyPF1tcim7stQRppJBjkEK4d4avqtDs84oU490tBc48yeknkuklpPJWaTSAm4AWdxWjneC+y+lbE1n1nvqmdWxTa3ya39VMKJbUdJLo2B1K3tSjm0JTKWH026hok7mEZRsWGXic14s7Q0iGsdEbNBk/DdYThXh/EmXAqU7aoBrq7QQfP0X0Y2i0fdHwUwC0Y1a+glluv4MNbWdwG95jhoJ56/qnNNx9yk4efNbYtXoCXqRu7+DP2DLsxnLWDpuUXFGfe181aheJ0qJOVjRTC9LV7KjqvRAQ3FSFQbWcDpovbirqqr6qRsrGJO987qMuUJeqGJ4q2gGl+aHGBAnZAbSVsKtepGuWXHFtDpU/xH1TxxfQ6VP8AEfVNxYjyQ+mpDkxwWbHGNDpU/wAR9V7/ABjQ6VP8R9VuL+A7I/QnfYVRrCKtGm/+5gPzhZy/9n9lU2YWH+k6fAq9/F9DpU/xH1THcW0Dyqf4j6ocWFZo/QF/6XWv43/BqSNfxVQ6VP8AEfVJapDd0PqCrFYYUklNFGStKkDkkkwhI16eKi9SRAxwqL0VV4kigEgqJZykkiAeCU8JJIgY4BeykkiKegp4SSWAeZks6SSxjwulVLnDKFUEVKNN4O+ZjT+YXqSwQbW4Mw9zSw2lPKfugENnqADAPiqdTgCxOmR4HICq+B5SUklqRlJnltwFZ0zLWO02zOLvzWis7FtMQ3ZJJBJBcmy21qRSSTCngCcAkksY9hOC8SWAeleJJLAEmuKSSwSFz1WrVl6klZSKB9Z6rSkkpsqhwCzXHTf5dPl3nf8A5SSTQ9J5v7GYzs3cnRp0nX1SyO173loNNEkl0HCedm7Xvax056ax6H4pdm78XMcuQ5JJImPQ10Dva89N0msdpLvkNdV4kgYlSSSWFP/Z"
		width="100%", height="200px;">
    </div>
  </div>
  <!-- Nav bar -->
  <ul id="menu">
    <li><a class="active" href="inicio.html">Inicio</a></li>
    <li><a href="gato.html">Gato</a></li>
    <li><a href="gato.html">Gato</a></li>
    <li><a href="gato.html">Gato</a></li>
  </ul>
  <!-- Contenido -->
  <div class="flex-container" id="contenido">
    <div style="flex-grow: 1">Gato</div>
      <div style="flex-grow: 9">
        <div class="responsive">
          <div class="gallery">
            <a target="_blank" href="gato.jpg">
              <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
            </a>
            <div class="desc">Hola soy un gato</div>
          </div>
        </div>
        <div class="responsive">
          <div class="gallery">
            <a target="_blank" href="gato2.jpg">
              <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
            </a>
            <div class="desc">Hola soy otro gato</div>
          </div>
        </div>
        <div class="responsive">
          <div class="gallery">
            <a target="_blank" href="gato3.jpg">
              <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
            </a>
            <div class="desc">Y otro gato</div>
          </div>
        </div>
        <div class="responsive">
          <div class="gallery">
            <a target="_blank" href="gato3.jpg">
              <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
            </a>
            <div class="desc">Y otro gato</div>
          </div>
        </div>
        <div class="responsive">
          <div class="gallery">
            <a target="_blank" href="gato2.jpg">
              <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
            </a>
            <div class="desc">Hola soy otro gato</div>
          </div>
        </div>
        <div class="responsive">
          <div class="gallery">
            <a target="_blank" href="gato.jpg">
              <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
            </a>
            <div class="desc">Hola soy un gato</div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </body>
</html>

Nunca he usado esta opción de html, entonces hago un caso absoluto al documento, y no me entero de porqué sale mal. He probado a poner todo al 100%, y aunque ya no se ve tan horriblemente mal, no llega a ser como lo quiero del todo, aún sigue teniendo cosas raras.

Cabe añadir que mi página normal (sin el código añadido para redimensionar) se ve perfecto en un ordenador.

Tiene la siguiente estructura:

introducir la descripción de la imagen aquí

Y pretendo que se vea, en un dispositivo móvil de la siguiente forma (o similar):

introducir la descripción de la imagen aquí

1
  • Hola Lucía. Estoy terminando de hacer pruebas y en breve te pongo la respuesta. el 30 ene. 2020 a las 11:59

2 respuestas 2

2

He modificado el CSS para que en función de una resolución u otra, cambie la perspectiva. He pasado de fila de 3 a fila de 2 y, cuando ya llega a un mínimo, pasa a fila de 1.

Además, he indentado el código para que sea más legible de cara otros compañeros.

body {
	font-family: Verdana;
	background-size: 100px 80px;
}

/* Redimensión */

* {
	box-sizing: border-box;
}
#menu {
	float:left;
	width:100%;
	text-align:center;
}
#menu a {
	background-color:#e5e5e5;
	padding:8px;
	margin-top:7px;
	display:block;
	width:100%;
	color:black;
}
#portada {
	float:left;
	width:100%;
	padding:0 20px;
}
#contenido {
	background-color:#e5e5e5;
	float:left;
	width:100%;
	padding:15px;
	margin-top:7px;
	text-align:center;
}


/* Estructura flex */

.flex-container {
	display: flex;
	align-items: stretch;
	background-color: Gray;
}

.flex-container > div {
	background-color: LightYellow;
	color: black;
	width: 100px;
	margin: 5px;
	text-align: center;
	line-height: 30px;
	font-size: 15px;
}

/* Nav bar */

ul {
	list-style-type: none;
	margin: 5px;
	padding: 0;
	overflow: hidden;
	background-color: #333;
}

li {
	float: left;
}

li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}

li a:hover:not(.active) {
	background-color: #111;
}

.active {
	background-color: #4CAF50;
}

/* Galería de imágenes */

div.gallery {
	border: 1px solid #ccc;
	width: 150px; height: 150px;
}

div.gallery:hover {
	border: 1px solid #777;
}

div.gallery img {
	width: 100%;
	height: auto;
}

div.desc {
	padding: 5px;
	text-align: center;
	font-size: 12px;
}

.responsive {
	padding: 0 6px;
	float: left;
	width: 31%;
}

@media only screen and (max-width: 720px) {
	.responsive {
		width: 30%;
		margin: 6px 0;
	}
}

@media only screen and (max-width: 719px) {
	.responsive {
		width: 50%;
		margin: 6px 0;
	}
}

@media only screen and (max-width: 500px) {
	.responsive {
		width: 100%;
	}
}

.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <!-- Header -->
        <div class="flex-container" id="portada">
            <div style="flex-grow: 10">
                <img src="data:image/jpeg;base64,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"
                width="100%", height="200px;">
            </div>
        </div>

        <!-- Nav bar -->
        <ul id="menu">
            <li><a class="active" href="inicio.html">Inicio</a></li>
            <li><a href="gato.html">Gato1</a></li>
            <li><a href="gato.html">Gato2</a></li>
            <li><a href="gato.html">Gato3</a></li>
        </ul>

        <!-- Contenido -->
        <div class="flex-container" id="contenido">
            <div style="flex-grow: 1">Gato</div>
            <div style="flex-grow: 9">
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato.jpg">
                        <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy un gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato2.jpg">
                            <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy un gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato3.jpg">
                            <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                        </a>
                        <div class="desc">Y otro gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato3.jpg">
                            <img src="https://www.promiau.com/static/img/img_blog/Thelazia_un_gusano_que_puede_parasitar_los_ojos_del_gato.jpeg" alt="Gato3" width="300" height="200">
                        </a>
                        <div class="desc">Y otro gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato2.jpg">
                            <img src="https://www.hola.com/imagenes/estar-bien/20180831128704/ronroneo-gatos-causas/0-595-638/gato-ronroneo-1-t.jpg?filter=w600&filter=ds75" alt="Gato2" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy otro gato</div>
                    </div>
                </div>
                <div class="responsive">
                    <div class="gallery">
                        <a target="_blank" href="gato.jpg">
                            <img src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg" alt="Gato1" width="300" height="200">
                        </a>
                        <div class="desc">Hola soy un gato</div>
                    </div>
                </div>	
                <div class="clearfix"></div>
            </div>
        </div>
    </body>
</html>

Espero que te sirva.

Saludos,

2
  • En cuanto pruebe el código te marco la respuesta como aceptada. ¡Muchas gracias!
    – Lucía
    el 30 ene. 2020 a las 12:40
  • Gracias a ti, Lucía :) el 30 ene. 2020 a las 12:42
-1

Por tu código veo que no tienes bien puestas las etiquetas básicas del HTML5 como el viewport. Con esta línea debería funcionar:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
1
  • Ya la añadí, (edito la pregunta añadiéndola), pero sigue viéndose muy raro
    – Lucía
    el 30 ene. 2020 a las 10:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.