I'm definitely doing something wrong with grid. I built mobile first and it was all fine but then when I adjusted desktop the sizes of the boxes were different in mobile so I just "fixed it" by giving different paddings for each box. There's gotta be a better way.
Hello, congratz on finishing the challenge!
From what i see, the auto in
.card > * {
max-width: 100%;
margin: 0 auto 0;
}
distrupts your sizes of boxes. Can you try removing that line completely or auto and try the changes i said below.
It shows you declared 1 column in the code below
@media only screen and (min-width: 1024px)
.card {
grid-template-columns: 1fr;
grid-template-rows: 40% 50%;
max-width: 35rem;
}
in dekstop version if you want 2 even columns width you should making it by grid-template-columns: 1fr 1fr; or grid-template-columns: repeat(2, 1fr);
also you should try making your rows by grid-template-rows: repeat(2, auto). This will create two rows with auto heights.
After you make this changes you can give same paddings to your sections.
Hope this was helpful.
Hi! This is my solution for the Product preview card challenge. I am still struggling to make those card center I guess but I am working on it. And I have a problem on my code which I can't seem to pin point what it is. Because it is working on my codepen. It is like when I deployed the page the responsive apart is not working and it is still at the mobile version. Please help me find what it went wrong and any other suggestions are welcome!!
Hi, congratz on completing the challenge.
The thing with your responsive problem is from what i see you made your media like this @media only screen and (min-width: 1440px). This makes your container to stay like in mobile version until the screen reaches 1440px. You should try lower widths like 500px or 600px.
What is mean is @media only screen and (min-width: 600px) or @media only screen and (min-width: 500px) would be a better choice for breakpoints in this project.
Hope this was helpful.
I had difficulties with the mobile view, so I decided to use flex instead of grid.
Hi, congratz on completing the challenge.
I think i saw your problem with mobile grid. It seems like you wrote your css for desktop version first and mobile version after. When you gave grid-template-columns to your .parent_section and grid-column to child sections, they still stay when you go mobile. So with your css code, in mobile there is still 3 columns at .parent_section.
You can approach this with more than one way.
Way One:
grid-template-columns at your .parent_section to grid-template-columns: 1fr. After making your .parent_section a grid you can delete flex-direction: column;grid-column at your section css classes(section_one, section_two, section_three) to all grid-column: 1/2 in your media to make it they are only using 1 column at mobile version.grid-template-rows: repeat(3, auto); to your .parent_section to make it 3 rows with auto heights.with this your media code should look like this
@media screen and (max-width:425px){
.parent_section{
margin: 13px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3,auto);
}
.section_two{
grid-column: 1/2;
border-bottom-left-radius: 0em;
}
.section_three{
grid-column: 1/2;
border-bottom-left-radius: var(--sect_rad);
}
.attribution{
grid-column: 1/2;
font-size: 12px;
font-weight: 700;
}
}
Way Two:
You should start with mobile version and make desktop version after with @media screen and (min-width: your breakpoint choice). When you start with mobile version, there are less problems with making it desktop version. It's like building a house from floors.
Hope this was helpful.
Could not add the author section and the <hr> didn't work :(
I checked your code and saw that your hr is in your div with flex class. Put hr after that div ends and you can continue after that.
