Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS Grid not stacking on mobile

Zack

New Coder
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

HTML:
<!doctype html>
<link href='https://fonts.googleapis.com/css?family=Rubik' rel='stylesheet'>
<title>&#169; 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">&#169; Victoria Wreden Studio 2023</footer>
</div>
</body>

Thanks for any help!
—Zack
 
Add the following:
HTML:
<meta content="width=device-width, initial-scale=1" name="viewport" />
NB - Really helpful is emmet in visual code to scaffold out a base html using ! and tab
 

New Threads

Buy us a coffee!

Back
Top Bottom