Responsive images with gatsby

I'm using Gatsby-plugin-sharp to automatically use the best image size based on the client's device width, but I can't seem to get this right. In the description of gatsby-plugin-sharp it says that "ResponsiveSizes Create sizes (in width) for the image. If the max width of the container for the rendered markdown file is 800px, the sizes would then be: 200, 400, 800, 1200, 1600, 2400 – enough to provide close to the optimal image size for every device size / screen resolution."

First question: How do I set the max container width of the rendered markdown file? Which leads me to the next question: How can I set this width dynamically? Say that the client's window size is 400px, and I want the image width of 400 to load. How do I make that happen?

Current Graph QL query:

export const pageQuery = graphql`
query BlogPostBySlug($slug: String! ) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      timeToRead
      excerpt
      frontmatter {
        title
        cover
        date
        category
        tags
        thumbnail {
          childImageSharp {
            responsiveSizes(maxWidth: 800, quality: 50, cropFocus: CENTER, toFormat: JPG) {
              src
              srcSet
              sizes
              base64
            }
          }
        }
      }
      fields {
        slug
      }
    }
  }
`;