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>