I have designed a unique menu grid with a center text and other menu options surrounding it. I am looking to make this grid display as a single line on mobile devices, with the center large text space disappearing on smaller screens.
To achieve this, I created a media query with a maximum width of 768px and set the grid column to take up 100% of the space. However, I encountered an issue where instead of a single column, two columns appear when the window size is below 768px (and the center text does not disappear as intended).
Below is the CSS code I used:
.container {
display: grid;
grid-template-columns: 25% 50% 25%;
grid-template-rows: 25% 25% 25% 25%;
gap: 30px;
align-items: center;
}
The larger central column in the grid was styled using the following CSS code, while the rest of the grid elements are positioned around it:
.kozepe {
grid-area: 2 / 2 / 4 / 3;
margin:auto;
display:block;
text-align: center;
}
This is my media query setup:
@media (max-width: 768px) {
.container {
display: grid;
grid-template-columns:100%;
grid-template-rows: auto;
}
}
All items within the grid adhere to these properties:
.item {
font-family: "Freeman", sans-serif;
font-weight: 800;
font-size: 2rem;
display: block;
text-decoration: none;
color: black;
}