I am adding certain media queries into my custom code header to ensure my iPad Pro displays as I would like. All seems to be working fine, however for CSS Grid, I can’t seem to target the cells to tell it how many rows for each one to span.
I have targeted the main grid with the following to ensure it is split into 3no. fr
.section-4-grid {
height: 100vh;
margin-right: 0px;
margin-left: 0px;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
}
But my first grid is defaulting to span over 2 rows, meaning the following two grids are split over the remaining 1 row when displayed on iPad pro. See screenshot below:
Here is my site Read-Only: https://preview.webflow.com/preview/alistairs-first-project-e51933?utm_medium=preview_link&utm_source=designer&utm_content=alistairs-first-project-e51933&preview=e1a199d7e64f21fe4b3bab59797f528c&pageId=5fb650ff23eddd108e27fa31&mode=preview