3

Debo hacerlo como esta en la imagen sin modificar el código html ya que ese código lo tengo para otras resoluciones entonces no puedo modificarlo.

asi debe quedarme como esta en la imagen

lo que pasa es que hice la resolución de 1280px y la de 768px ahora con la de 320px tengo que hacer otro tipo de maquetación entonces se me esta complicando (debe quedarme como la imagen).

<section class="ciudades">
  <div class="ciudad__contenido">
    <h2 class="ciudad__contenido-title">Kiev, Ucrania</h2>
    <img class="ciudad__contenido-image" src="imagenes/__Ucrania.png" alt="Ucrania" />

    <button class="ciudad__contenido-boton">
      Compra esta obra de arte como NFT
    </button>
  </div>
  <div class="ciudad__descripcion">
    <p class="ciudad__contenido-artista">ARTISTA</p>
    <h3 class="ciudad__contenido-nombre">
      Natalia Dolgushina, productora de contenidos
    </h3>
    <p class="ciudad__contenido-text">
      Kiev (o Kyiv), la capital de ciudad, es una gran ciudad situada a
      orillas del río Dniéper. Por supuesto, nadie en su sano juicio se
      bañaría en el río, a menos que se haya criado aquí, en cuyo caso
      probablemente lo haya intentado en algún momento. Los veranos son
      calurosos aquí, y los inviernos con fuertes corrientes de aire,
      pero el otoño y la primavera son absolutamente increíbles.
    </p>
    <p class="ciudad__contenido-text2">
      La ciudad en sí es una mezcla de arquitectura prerrevolucionaria,
      de posguerra y soviética, toda ella salpicada de balcones
      modificados. Si te encuentras en la orilla derecha del Dniéper, el
      paisaje es difícil de atravesar para las personas en bicicleta y
      las que llevan tacones. Sin embargo, la orilla izquierda es
      considerada mucho menos interesante y prestigiosa, incluso por la
      gente que vive en las afueras de la derecha.
    </p>
  </div>
</section>           

Esto es lo que he trabajado en CSS pero no encontrado una solución.

 @media screen and (max-width: 320px) {
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .header__logo1 {
    width: 200px;
    height: 51.852px;
    flex-shrink: 0;
    margin-top: 2rem;
  }

  .patria {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .patria__contenido-title {
    color: #fff;
    text-align: center;
    font-family: Inter;
    font-size: 40px;
    font-style: normal;
    line-height: 104.167%;
    width: 100%;
    max-width: 288px;
  }

  .patria__contenido-subtitle {
    color: #fff;
    text-align: center;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 5;
    line-height: 125%;
    font-stretch: condensed;
    margin-left: 0%;
    width: 100%;
    margin-bottom: 15%;
  }

  .patria__contenido-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
    margin-bottom: 0%;
  }

  .introduccion__contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-bottom: 10%;
    margin-top: 10%;
    margin-left: 0%;
    margin-right: 0%;
  }

  .introduccion__contenido-title {
    font-size: 32px;
    margin: 0% 5%;
    width: 88%;
  }
  .introduccion__contenido-text {
    margin-left: 24%;
    margin-right: 20%;
    margin-top: 5%;
    width: 91%;
  }

  .introduccion__contenido-footer {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-style: italic;
    font-size: 26px;
    width: 95%;
    margin-left: 26%;
    margin-right: 5%;
    font-weight: 100;
  }

  .introduccion_contenido-text2 {
    width: 90%;
    margin-top: 0;
    margin-left: 4%;
    line-height: 30.08px;
  }

  .galeria__contenido {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 10px;
    justify-content: center;
    margin-left: 0%;
    margin-bottom: 62px;
    max-width: 100%;
  }

  .ciudades {
    display: flex;
    flex-direction: column;
  }
  .ciudad__contenido-title {
    color: #fff;
    font-family: Inter;
    font-size: 32px;
    font-style: normal;
    line-height: 109.375%;
    text-align: center;
    margin-bottom: 10%;
    margin-top: 10%;
    margin-left: -45%;
  }

  .ciudad__contenido-artista {
    color: #aaa;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 5;
    line-height: 125%;
    font-stretch: condensed;
    width: 95%;
    margin-left: 4%;
    margin-bottom: 5px;
  }

  .ciudad__contenido-nombre {
    color: #fff;
    font-family: Inter;
    font-size: 21px;
    font-style: normal;
    font-weight: 50;
    line-height: 125%;
    font-stretch: condensed;
    width: 95%;
    margin-left: 4%;
    padding: 0;
    margin-top: 0%;
    margin-bottom: 0%;
  }
  .ciudad__contenido-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-top: 10%;
    margin-left: 0%;
    margin-right: 0%;
    max-width: 320px;
  }

  .ciudad__contenido-text {
    color: #fff;
    font-family: Inter;
    font-size: 23px;
    font-style: normal;
    font-weight: 5;
    text-align: inherit;
    line-height: 135%;
    max-width: 93%;
    margin-left: 4%;
    margin-right: 0%;
    margin-top: 5%;
    margin-bottom: 10px;
  }

  .ciudad__contenido-text2 {
    color: #fff;
    font-family: Inter;
    font-size: 23px;
    font-style: normal;
    font-weight: 5;
    line-height: 135%;
    max-width: 93%;
    margin-left: 5%;
    margin-right: 0%;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 0;
  }

  .ciudad__contenido-boton {
    width: 288px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 4px;
    background: #0278fe;
    color: #fff;
    border: none;
    font-family: Inter;
    font-size: 14px;
    cursor: pointer;
    margin-left: 3%;
    text-align: center;
  }

  .visitanos__contenido {
    text-align: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 254px;
  }

  .visitanos__contenido-image {
    background: #2a2c2f;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    margin-top: 15%;
  }

  .visitanos__contenido-image:hover {
    opacity: 0.5;
  }
  .visitanos__contenido-title {
    color: #fff;
    font-family: Inter;
    font-size: 32px;
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .visitanos__contenido-subtitle {
    color: #fff;
    font-family: Inter;
    font-size: 15px;
    font-weight: lighter;
    line-height: 125%;
    font-stretch: condensed;
    width: 280px;
    margin-left: 4%;
    padding: 0;
    margin-top: 0%;
    margin-bottom: 0%;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
  }

  .visitanos__contenido-boton {
    background-color: #007bff;
    color: #fff;
    border-radius: 5px;
    position: absolute;
    display: inline-flex;
    padding: 13px 20px;
    align-items: flex-start;
    gap: 10px;
    position: absolute;
    top: 65%;
    left: 25%;
    cursor: pointer;
  }

  .visitanos__contenido-boton:hover {
    opacity: 0.5;
  }
  .footer__contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .footer__contenido-title {
    color: #fff;
    font-family: Inter;
    font-size: 14px;
    margin-top: 60px;
    margin-bottom: 26px;
    font-weight: lighter;
  }
}

Debo mover el botón hacia la parte de abajo y la parte que dice Artista y el subtitulo debe estar en la parte superior, junto con el titulo mas abajo debe ir la imagen no quiero modificar el HTML ya que tengo dos resoluciones realizadas la de 1280px y la de 678px solo me falta la de mobile que es de 320px.el resultado debe ser como esta en la imagen.

2
  • Buen día, sí, si hay forma de hacerlo. Te recomiendo hacer el recorrido de bienvenida y leer la sección Cómo preguntar. Parte importante de la cultura del sitio es que al publicar una pregunta se muestre un esfuerzo por parte del autor al incluir el código que ha intentado o lo que ha investigado ya que en este sitio no hacemos tareas/proyectos. Lectura recomendada: ¿Cómo crear un Ejemplo mínimo, completo y verificable? Commented el 3 ago. 2023 a las 5:11
  • cual es esa forma ? si investigado pero no encontrado Commented el 3 ago. 2023 a las 5:32

1 respuesta 1

1

Un contenedor con display : flex puede usar la propiedad order para cambiar el orden en que se muestran sus items.

El problema es que tu tienes 2 subcontenedores que dividen el contenido .ciudad__contenido y .ciudad__descripcion, a estos debes setearlos como display: content y olvidarte que existen para la resolución de 320px:

Ejemplo:

.ciudades{
display: flex;
    flex-direction: column;
}
.ciudad__contenido, .ciudad__descripcion {
  display: contents;
}

.ciudad__contenido-artista{ order:2; }
.ciudad__contenido-nombre { order:3; }
.ciudad__contenido-image { order:4; }
.ciudad__contenido-text{ order:5; }
.ciudad__contenido-text2{ order:6; }
.ciudad__contenido-boton { order:7; }
<section class="ciudades">
  <div class="ciudad__contenido">
    <h2 class="ciudad__contenido-title">Kiev, Ucrania</h2>
    <img
      class="ciudad__contenido-image"
      src="imagenes/__Ucrania.png"
      alt="Ucrania"
    />

    <button class="ciudad__contenido-boton">
      Compra esta obra de arte como NFT
    </button>
  </div>
  <div class="ciudad__descripcion">
    <p class="ciudad__contenido-artista">ARTISTA</p>
    <h3 class="ciudad__contenido-nombre">
      Natalia Dolgushina, productora de contenidos
    </h3>
    <p class="ciudad__contenido-text">
      Kiev (o Kyiv), la capital de ciudad, es una gran ciudad situada a
      orillas del río Dniéper. Por supuesto, nadie en su sano juicio se
      bañaría en el río, a menos que se haya criado aquí, en cuyo caso
      probablemente lo haya intentado en algún momento. Los veranos son
      calurosos aquí, y los inviernos con fuertes corrientes de aire,
      pero el otoño y la primavera son absolutamente increíbles.
    </p>
    <p class="ciudad__contenido-text2">
      La ciudad en sí es una mezcla de arquitectura prerrevolucionaria,
      de posguerra y soviética, toda ella salpicada de balcones
      modificados. Si te encuentras en la orilla derecha del Dniéper, el
      paisaje es difícil de atravesar para las personas en bicicleta y
      las que llevan tacones. Sin embargo, la orilla izquierda es
      considerada mucho menos interesante y prestigiosa, incluso por la
      gente que vive en las afueras de la derecha.
    </p>
  </div>
</section>

1
  • Mil gracias amigo, esa fue la solución te agradezco mucho Commented el 4 ago. 2023 a las 2:18

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.