1

I am creating a blog using Gatsby, and for simplicity's sake, I have a main content component and a blog posting archive component as a second column to the right of the main content component. How do I target the archive component to make it "display: none" when using a CSS media query for mobile screen sizes?

For example, here is a snippet of layout.js:

const MainLayout = styled.main`
  font-family: Roboto, sans-serif;
  max-width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 40px;
  footer {
    padding-bottom: 30px;
    a {
      color: red;
    }
  }
`;

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `}
    render={data => (
      <div>
        <Header siteTitle={data.site.siteMetadata.title} />
        <MainLayout>
          <div>{children}</div>

          <Archive />

          <footer>
            © {new Date().getFullYear()} / Built by Michael Henry with
            {` `}
            <a href="https://www.gatsbyjs.org">Gatsby</a>
          </footer>
        </MainLayout>
      </div>
    )}
  />
);

If I select the <Archive> component in a media query like this:

@media only screen and (max-width: 480px) {
  Archive {
    display: none;
  }
}

Nothing happens. If I wrap the <Archive> component with a <div> like so:

<div className="noMobile">
  <Archive />
</div>
@media only screen and (max-width: 480px) {
  .noMobile {
    display: none;
  }
}

I can make the archive component disappear, but the <footer> is now at the top of the page in the same column to the right in which the archive component was. I think it may have something to do with my grid layout, but I cannot figure it out. How do I select the grid layout to change within this media query if it is in a styled component (<MainLayout>)?

Thanks

3
  • Inside Media Query target a class where in you will hide that particular element , it will be great if you elaborate your question with a example or code you have tried so that suggestions will be specific to your implementation
    – KOTIOS
    Apr 24, 2019 at 5:33
  • If you want to footer to stay still, give it an explicit position in the grid, i.e footer { grid-column: 1 / 2 } Apr 26, 2019 at 6:48
  • @DerekNguyen - thank you so much, that worked like a charm! May 3, 2019 at 18:55

0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.