Skip to main content
Se da formato para mejorar la visualización.
Origen Enlace
DjCrazy
  • 7.1k
  • 3
  • 18
  • 42

Closed. This question needs details or clarity. It is not currently accepting answers. Add details and clarify the problem you’re solving. This will help others answer the question. You can edit the question or post a new one.

Closed 3 days ago.

miMi pagina web,tiene tiene un conjunto de cartas que en computadora quiero que se vean 2 rowsrow de 3 cartas y una rowrow mas de 1 carta , pero para celulares quiero que se vea como 3 columnscolumns una arriba de la otra, asi viendoseasí viéndose como una gran columncolumn 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 veria bien en la computadora (pero si en el celular). Espero que se entienda. Que puedo hacer?

HTML

 <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>

CSS

 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;
}

CSSEl problema es que si pongo el @media estilandolodisplay:flex en .project-first-row (en el css para un celularcomputadora) 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.

 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;
    }

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>

Closed. This question needs details or clarity. It is not currently accepting answers. Add details and clarify the problem you’re solving. This will help others answer the question. You can edit the question or post a new one.

Closed 3 days ago.

mi pagina web,tiene un conjunto de cartas que en computadora quiero que se vean 2 rows 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, asi viendose 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 veria bien en la computadora (pero si en el celular). Espero que se entienda. Que puedo hacer?

HTML

 <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>

CSS

 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;
    }

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>

Origen Enlace

porque display flex me arruina mi posicionamiento en el @media?

Closed. This question needs details or clarity. It is not currently accepting answers. Add details and clarify the problem you’re solving. This will help others answer the question. You can edit the question or post a new one.

Closed 3 days ago.

mi pagina web,tiene un conjunto de cartas que en computadora quiero que se vean 2 rows 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, asi viendose 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 veria bien en la computadora (pero si en el celular). Espero que se entienda. Que puedo hacer?

HTML

 <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>

CSS

 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;
    }