Menu
What changes to the CSS do I need to make to let the pop-up display for each grid square
match the current size of the grid width?
I tried setting it to 1fr, but that doesn’t work.
I tried setting it to 100%, 50%, and 33% but the width changes with the screen size when resized.
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width-device-width,initial-scale=1.0, user-scalable=yes”/>
<title> Basic Grid Template </title>
<style>
.hide { display: none; }
a { font-size: 1em; text-decoration: none; }
a:hover { background: orange; }
.linkSections {
display:grid;
grid-template-columns:1fr 1fr 1fr; /* 3 columns of equal free space */
grid-column-gap:0.25em; /* gap between horizontally */
grid-row-gap:0.25em; /* gap between vertically */
padding:0.25em 0.25em; /* gap around outside */
background:#CCC;
}
.linkSections > div { text-align: center; background:#DEF; }
.linkSections div:hover { background: lime; }
.linkSections > div > a { font-size: 1.5em; text-decoration: none;
display:inline-block; width: 100%; }
section { text-align: left; padding-right: 1em; /* width: 100%; */
position: absolute; background: white; border: 1px solid black; }
section a { display: inline-block; width: 100%; }
@media (max-width:60em) { /* adjust as needed */
.linkSections { grid-template-columns: 1fr 1fr; }
}
@media (max-width:30em) { /* adjust as needed */
.linkSections { grid-template-columns: 1fr; }
}
section { background: yellow; font-weight: bold; }
section ul { list-style-type: none; padding-left: 1em; }
section ul li a { font-size: 1em; }
/* FOLLOWING DOES NOT WORK AS DESIRED */
.item { /* width: 1fr; */ } /* no change noticed with 1fr; */
.item > section { width: 33%; } /* 100%, 50% and 33% all TOO BIG *?
</style>
</head>
<body>
<div class=”linkSections”>
<div class=”item”>
<a href=”#” onclick=”return show(this)”> Section 1</a>
<section class=”hide”>
<ul>
<li> <a href=”https://www.webdeveloper.com/” target=”_blank”> Web Developer </a> </li>
<li> Link 12 </li>
<li> Link 13 </li>
<li> Link 14 </li>
<li> Link 15 </li>
</ul>
</section>
</div>
<div class=”item”>
<a href=”#” onclick=”return show(this)”> Section 2</a>
<section class=”hide”>
<ul>
<li> <a href=”https://www.codingforums.com/client-side-development/” target=”_blank”> Coding Forums </a> </li>
<li> Link 22 </li>
<li> Link 23 </li>
<li> Link 24 </li>
<li> Link 25 </li>
</ul>
</section>
</div>
<div class=”item”>
<a href=”#” onclick=”return show(this)”> Section 3 </a>
<section class=”hide”>
<ul>
<li> <a href=”http://w3schools.invisionzone.com/” target=”_blank”> W3 Schools</a> </li>
<li> Link 32 </li>
<li> Link 33 </li>
<li> Link 34 </li>
<li> Link 35 </li>
</ul>
</section>
</div>
</div>
<script>
function show(info) {
const n = info.nextElementSibling;
let sel = document.querySelectorAll(‘section’); // alert(sel.length);
for (let el of sel) { if (n != el) { el.classList.add(‘hide’); } }
n.classList.toggle(‘hide’);
return false;
}
</script>
</body>
</html>
Major changes to CSS are OK, but would like to understand underlying problem if possible.