Hey there,
I'm helping my dear ol ma build a site. I've code it from scratch reading W3 tutorials. Believe it or not, I haven't used html since before CSS, so divs and grids and stuff are pretty new to me. Anyway, I want this CSS grid to stack on screens smaller than the provided size. It's working when I manually shrink a browser on desktop with my pointer, but doesn't work on anyones phone.
Here's the site: © Victoria Wreden Studio 2023
Thanks for any help!
—Zack
I'm helping my dear ol ma build a site. I've code it from scratch reading W3 tutorials. Believe it or not, I haven't used html since before CSS, so divs and grids and stuff are pretty new to me. Anyway, I want this CSS grid to stack on screens smaller than the provided size. It's working when I manually shrink a browser on desktop with my pointer, but doesn't work on anyones phone.
Here's the site: © Victoria Wreden Studio 2023
HTML:
<!doctype html>
<link href='https://fonts.googleapis.com/css?family=Rubik' rel='stylesheet'>
<title>© Victoria Wreden Studio 2023</title>
<style>
.grid-container {
display: grid;
font-family: 'Rubik';font-size: 20px;
place-items: center;
grid-template-areas:
"header nav"
"textbox painting"
"footer footer";
grid-template-rows: 90px 480px 70px;
grid-template-columns: 1fr 1fr;
grid-row-gap: 0px;
grid-column-gap: 0px;
height: 100vh;
margin: 0;
}
/* Stack the layout on small devices/viewports. */
@media screen and (max-width: 768px) {
.grid-container {
grid-template-areas:
"header"
"nav"
"painting"
"textbox"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 90px 64px 1fr 240px 70px;
grid-column: auto;
grid-row: auto;
}
}
header, nav, footer, painting, textbox {
background: none;
}
#mainHeader {
grid-area: header;
}
#mainNav {
grid-area: nav;
}
#pageFooter {
grid-area: footer;
font-size: 14px;
}
#mainPainting {
grid-area: painting;
}
#mainTextbox {
grid-area: textbox;
text-align: center;
padding: 40px;
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #7B1FA2;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 16px;
height: auto;
padding: 8px;
width: auto;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -8px;
transition: 0.5s;
}
.button:hover span {
padding-right: 10px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
a:link {
color: white;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: white;
background-color: transparent;
text-decoration: none;
}
a:active {
color: white;
background-color: transparent;
text-decoration: none;
}
</style>
<body>
<div class="grid-container">
<header id="mainHeader"><img src="images/vw_sig.png" alt="top banner" width="480px" height="90px"></header>
<nav id="mainNav"><button class="button" style="vertical-align:middle"><span><a href="#">Canvas</a></span></button>
<button class="button" style="vertical-align:middle"><span><a href="#">Paper</a></span></button>
<button class="button" style="vertical-align:middle"><span><a href="#">Wood</a></span></button>
<button class="button" style="vertical-align:middle"><span><a href="mailto:[email protected]">E-mail</a></span></button></nav>
<painting id="mainPainting"><img src="images/painting_front.png" alt="Acrylic, 2022" width="320" height="320"></painting>
<textbox id="mainTextbox"><h1>Making art without fear or limitation.</h1>
<p>On a journey to explore my individuality and distinctiveness. Creating works that are direct and raw. There's life and strength through movement.</p></textbox>
<footer id="pageFooter">© Victoria Wreden Studio 2023</footer>
</div>
</body>Thanks for any help!
—Zack
