Open youngancient opened 1 week ago
Fix responsiveness
fix text responsiveness
Change the current plain logo text to this, this one can be found on the dashboard screen
@media (min-width: 500px) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(164px, 100%), 1fr));
column-gap: 1rem;
row-gap: 1.5rem;
}
@media (min-width: 767px) {
grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
column-gap: 1.5rem;
row-gap: 2rem;
}
@media (min-width: 998px) {
grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
column-gap: 2rem;
row-gap: 2.5rem;
}
pls add a much proper footer
@media (min-width: 500px) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(164px, 100%), 1fr)); column-gap: 1rem; row-gap: 1.5rem; } @media (min-width: 767px) { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); column-gap: 1.5rem; row-gap: 2rem; } @media (min-width: 998px) { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); column-gap: 2rem; row-gap: 2.5rem; }
I need the class names that are being styled, so I can work with them
I used styled-components so basically all the styles I shared here is belong to the layout
The full styles
export const HouseListCompStyles = styled.div`
display: flex;
flex-direction: column;
gap: 2.5rem;
margin-bottom: 4rem;
@media (min-width: 500px) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(164px, 100%), 1fr));
column-gap: 1rem;
row-gap: 1.5rem;
}
@media (min-width: 767px) {
grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
column-gap: 1.5rem;
row-gap: 2rem;
}
@media (min-width: 998px) {
grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
column-gap: 2rem;
row-gap: 2.5rem;
}
`;
still not working, if you have any idea on how to implement it, you can help out
Figma design