0

Mi pagina web tiene un conjunto de cartas que en computadora quiero que se vean 2 row de 3 cartas y una row mas de 1 carta , pero para celulares quiero que se vea como 3 columns una arriba de la otra, así viéndose como una gran column de 7 cartas.

El problema es que si pongo el display:flex en .project-first-row (en el css para computadora) luego no me deja en el @media poner project-first-row{ flex-direction: column;} pero solo en la primer columna, porque para proyect-second-row y para proyect-second-row si me deja.

Ahora, si le saco directamente el display:flex al css para computadora, si me deja poner column en el media, pero ya no se vería bien en la computadora (pero si en el celular). Espero que se entienda. Que puedo hacer?

background-color:white;
width: 100%;
padding-top: 75px;
height: 45em;
text-align: center;

}
#project-text {
  width: 500px;
  margin-left: 380px;
  margin-top: -20px;
}
#project,
.project-line-one .project-line-two .project-line-three {
  font-size: 20px;
}
.project-first-row {
  flex-direction: row;
  justify-content: space-around;
  margin-top: 30px;
  display: flex;
  /*este es el que luego en el media no me dejara cambiar a column el flex-direction, pero si se lo saco, si me deja en el media, pero ya no se ve bien en el css para computadora*/
}
.project123 {
  width: 350px;
  height: 350px;
  border-radius: 5%;
  border-style: solid;
  border-width: 1px;
  border-color: #d1d1e9;
}
.project123:hover {
  border-style: solid;
  border-width: 1px;
  border-color: #b172ff;
}
.project123 .portfolio-pic,
.generator-pic,
.match-pic {
  margin-left: -4px;
  max-width: 330px;
  max-height: 300px;
  margin-top: 3px;
}
.project-second-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 30px;
}
.project456 {
  width: 350px;
  height: 350px;
  border-radius: 5%;
  border-width: 1px;
  border-style: solid;
  border-color: #d1d1e9;
}
.project456:hover {
  border-style: solid;
  border-width: 1px;
  border-color: #b172ff;
}
.project456 .expenses-pic,
.admin-pic {
  margin-left: -4px;
  max-width: 300px;
  max-height: 300px;
  margin-top: 3px;
}
.project456 .app {
  display: flex;
  flex-direction: column;
  margin-left: 35px;
  max-width: 290px;
  max-height: 290px;
  margin-top: 20px;
}
.project-third-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 30px;
}
.project7 {
  width: 350px;
  height: 350px;
  border-radius: 5%;
  margin-left: -841px;
  border-width: 1px;
  border-style: solid;
  border-color: #d1d1e9;
}
.project7:hover {
  border-style: solid;
  border-width: 1px;
  border-color: #b172ff;
}
.project7 .movie-pic {
  margin-left: -4px;
  max-width: 300px;
  max-height: 300px;
  margin-top: 3px;
}

/*CSS el @media estilandolo para un celular*/
height: fit-content;
width: 100%;
flex-direction: column;
background-color: red;

}
#project strong {
  margin-left:-21%;
}
#project-text {
  margin: 0;
  width: 60%;
  margin-left: 10%;
}
project-first-row {
  flex-direction: column;
  /*esto no me lo toma por culpa del display:flex del css anterior, si se lo saco, ahi si me toma este, pero ya no se veria bien para computadoras*/
  height: fit-content;
  background-color: greenyellow;
}
.project123 {
  width: 290px;
  height: 340px;
  margin-top: 10%;
  margin-left: 0.6%;
  background-color: orange;
}
.project123 .portfolio-pic,
.generator-pic,
.match-pic {
  margin-left: 0;
  max-width: 285px;
  max-height: 285px;
}
.project-second-row {
  flex-direction: column;
  height: fit-content;
  margin-top: 0;
}
.project456 {
  width: 290px;
  height: 340px;
  margin-top: 10%;
  margin-left: 0.6%;
}
.project456 .expenses-pic,
.admin-pic {
  margin-left: 0;
  max-width: 285px;
  max-height: 285px;
}
.project-third-row {
  flex-direction: column;
  height: fit-content;
  margin-top: 0;
}
.project7 {
  width: 290px;
  height: 340px;
  margin-top: 10%;
  margin-left: 0.6%;
}
.project7 .movie-pic {
  margin-left: 0;
  max-width: 285px;
  max-height: 285px;
}
<div class="project123">
  <a href="#">
    <img src="img/img portfolio icon.JPG" class="portfolio-pic">
    <span style="font-weight:bold; color: black;">Porfolio</span></a>
</div>
<div class="project123">
  <a href="https://gonzalezmariasol.github.io/website-in-progress/" target="_blank">
    <img src="img/memes-PICS.svg" class="generator-pic">
    <span style="font-weight:bold; color: black;">Meme Generator</span></a>
</div>
<div class="project123">
  <a href="https://gonzalezmariasol.github.io/website-in-progress/" target="_blank">
    <img src="img/match-PICS.svg" class="match-pic">
    <span style="font-weight:bold; color: black;">Match3</span></a>
</div>
</div>
<div class="project-second-row">
  <div class="project456">
    <a href="https://gonzalezmariasol.github.io/website-in-progress/" target="_blank">
      <img src="img/money-PICS.svg" class="expenses-pic">
      <span style="font-weight:bold; color: black;">Expenses Tracking</span></a>
  </div>
  <div class="project456">
    <a href="https://gonzalezmariasol.github.io/website-in-progress/" target="_blank">
      <img src="img/calendar-PICS.svg" class="admin-pic">
      <span style="font-weight:bold; color: black;">Meeting Planner</span></a>
  </div>
  <div class="project456">
    <a href="https://gonzalezmariasol.github.io/website-in-progress/" target="_blank">
      <img src="img/app-PICS.svg" class="app">
      <span style="font-weight:bold; color: black;">All about Apps</span></a>
  </div>
</div>
<div class="project-third-row">
  <div class="project7">
    <a href="https://gonzalezmariasol.github.io/website-in-progress/" target="_blank">
      <img src="img/cine-PICS.svg" class="movie-pic">
      <span style="font-weight:bold; color: black;">Movie search</span></a>
  </div>
</div>
</div>

1 respuesta 1

0

Hola espero te sea de ayuda.

body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.bandas{
    margin-top: 10px;
    background-color: rgb(202, 191, 202);
    display:flex;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    margin: 10px;
}

.card{
    background-color: orange;
    height: 300px;
    width: 230px;
    margin: 0px 5px 0px 5px;
    border-radius: 5px;
}

@media only screen and (max-width: 480px) {
    .bandas{
        flex-direction: column;
    }
    .card{
        margin: 5px 0px 5px 0px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
        <div class="bandas primary">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
        </div>
        <div class="bandas secondary">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
    
        </div>
        <div class="bandas tertiary">
            <div class="card"></div>
        </div>
    </main>
</body>
</html>

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.