Steps for transforming this grid into a single-column list for mobile viewing

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;
}
Zene
Grand Theft Auto
Gitár
Számítógép
Nézd meg ezt csináltam ma jujj de örülök neki!!!
Fotózás
Útjaim
Sport
Képesítéseim
Hobbijaim
Valami

Answer №1

To adjust the central text to appear in a single column at the same relative position (i.e. 5th) on a smaller viewport, simply set it to be in column 1 and row 5.

If you prefer it to be located elsewhere in the row order, you can modify the row setting accordingly.

.container {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  gap: 30px;
  align-items: center;
}

.kozepe {
  grid-area: 2 / 2 / 4 / 3;
  margin: auto;
  display: block;
  text-align: center;
}

@media (max-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
  }
  .kozepe {
    grid-column: 1;
    grid-row: 5;
  }
}

.item {
  font-family: "Freeman", sans-serif;
  font-weight: 800;
  font-size: 2rem;
  display: block;
  text-decoration: none;
  color: black;
}
<div class="flex">
  <div class="container">
    <a href="zene.html" style="text-decoration:none;" class="item ">
      <div>Zene</div>
    </a>
    <a href="gta.html" style="text-decoration:none;" class="item kozep">
      <div>Grand Theft Auto</div>
    </a>
    <a href="gitár.html" style="text-decoration:none;" class="item">
      <div>Gitár</div>
    </a>
    <a href="számítógép.html" style="text-decoration:none;" class="item">
      <div>Számítógép</div>
    </a>
    <a href="kozep.html" style="text-decoration:none;" class="item kozepe">
      <div>Nézd meg ezt csináltam ma jujj de örülök neki!!!</div>
    </a>
    <a href="fotózás.html" style="text-decoration:none;" class="item">
      <div>Fotózás</div>
    </a>
    <a href="útjaim.html" style="text-decoration:none;" class="item">
      <div>Útjaim</div>
    </a>
    <a href="sport.html" style="text-decoration:none;" class="item">
      <div>Sport</div>
    </a>
    <a href="képesítéseim.html" style="text-decoration:none;" class="item">
      <div>Képesítéseim</div>
    </a>
    <a href="hobbijaim.html" style="text-decoration:none;" class="item kozepe">
      <div>Hobbijaim</div>
    </a>
    <a href="valami.html" style="text-decoration:none;" class="item">
      <div>Valami</div>
    </a>
  </div>


</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Showing ASP code within a DIV element (inline)

Working on setting up a 'shopping cart' feature on our website, but running into some issues with the ASP code. Does anyone have any advice to offer? In the image below, you can see that when items are added to the cart, the 'total' is ...

What is the best way to align all menu items horizontally with the logo?

I'm facing a small issue that I can't seem to resolve on my own. I recently added a links menu to the header of my website, and it looks like the menu has fixed dimensions, causing the Login URL to get pushed down due to space constraints. I&apos ...

What is the best way to eliminate the bottom border of an input field?

Seeking advice on how to eliminate the border-bottom of an input field when typing starts. .car-list-input { font-family: 'Source Sans Pro', sans-serif; border-radius: 3px; font-size: 14px; font-weight: 400 !important; height: 35px; ...

What is the best way to center numbers in a table cell while aligning them to the right?

In a table, I want to display numbers centered in a column but right-aligned as well. To achieve this: table { border: 1px solid black; } th { width: 200px; } td { text-align: center; } <table> <thead> <tr> <th& ...

"Combining background images with javascript can result in displaying visual elements

Hello! I am in need of assistance with a CSS + Javascript fog effect that I have developed. It is functioning properly on Firefox, Opera, and Chrome but encountering issues on IE and Edge browsers. The effect involves moving two background images within a ...

What is the method for changing the icon color to dark in Twitter Bootstrap?

I am facing an issue where the icon in my menu tab turns white when active, making it difficult to see. Is there a way to change the color of the icon to black? I have found a class icon-white to make it white, but there is no corresponding class to make ...

I've exhausted all my knowledge but still unable to get Tailwind to work

I've been troubleshooting Tailwind for the past 6 hours. Managed to set it up in a simpler Nextjs/React/Typescript project, but struggling to get it working in this larger codebase. I'm sure I'm missing something obvious, but I'm at a ...

Having trouble with a dropdown menu that allows for multi-select options?

var expanded = false; function showCheckboxes() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = fa ...

The scroll bar remains hidden even though there are additional elements waiting to be displayed

I am currently utilizing asp.net along with entity framework 4 On my page, I have three tabs structured like this: The Challenge I'm Facing The issue I am encountering is that the browser fails to display a scrollbar even when there are over 150 ro ...

Struggling to properly position my dropdown menu without causing the div content to shift downward

<div id="header"> <a href="#" id="logo"></a> </div> <div id="nav_cont"> <ul id="nav"> <li id="main_btn"><a class="mainlink" href="#">Parent 01</a></li> <li id="communities_btn">< ...

The flex container cannot contain all of the content due to an

I am looking to implement a flexbox dropdown menu similar to this: https://i.sstatic.net/Cer9D.png After researching online, I found a simple dropdown menu example. However, I want to customize it using flexbox and its properties. The issue I encountered ...

Ways to extract specific HTML from a jQuery element

When fetching html from a website, how can I extract specific html content instead of getting all of it? I have attempted the following method: Before appending data to the target below container.html(data); I would like to perform something like data.f ...

Positioning a designated div directly above a designated spot on the canvas

I'm grappling with a challenge in my game where the canvas handles most of the animation, but the timer for the game resides outside the canvas in a separate div. I've been struggling to center the timer around the same focal point as the squares ...

Nested divs with independent scrolling capabilities

I am interested in developing a gantt chart that displays days, months, and years at the top with tasks listed below. Here is my progress so far: https://i.stack.imgur.com/tr5y4.png In the image above, the scroll-x functionality works on everything incl ...

Setting a specific time for a div element with opacity: A step-by-step guide

Is there a way to adjust the timing for the appearance of the add-to-cart when hovering over the product-list-item? Currently, it appears when I hover over the item and disappears when I move my mouse away. .product-list-item { position: relative; w ...

Customizing ExtJS Themes for Ext.panel.Panel

In my current project using ExtJS 4.1.1a, I am working on creating a new theme for a "tabbedPane" and a normal Panel with an "Accordion" layout. However, I am facing difficulty in changing the color of the headers for both elements. I wish to customize the ...

Utilizing React and Material-UI to Enhance Badge Functionality

I am exploring ways to display a badge icon when a component has attached notes. I have experimented with three different methods and interestingly, the results are consistent across all of them. Which approach do you think is the most efficient for achiev ...

What is the best way to align an equal number of divs in each row?

I need help arranging my divs in rows, with 3 divs in each row. Can someone assist me with this? Here is the code I have written so far: .container { display: flex; flex-wrap: wrap; } .item { border: 2px solid black; width: 100px; height: 10 ...

The -webkit-box-reflect effect vanishes during the transition

I need help with this issue: The image loses its reflection during the transition until it returns at the end. Any suggestions are appreciated! Thank you! .specials-box { width: 330px; margin: 50px 0; height: 500px; position: relative; ...

What is the reason position:sticky does not align elements to right:0?

I attempted to align my element with the right:0 property, but it doesn't seem to have any effect. The element remains stuck to the left edge of the browser window. * { margin: 0; padding: 0; font-size: 50px; } .sticky { width: 50px; h ...