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>