score:2

Accepted answer

first of all, fix all the messy indentations, this will help to to see the structure better (in addition there are some wrong closed elements and unnecessary quotes):

import react from 'react';
import {
  link,
  graphql,
} from 'gatsby';
import image from 'gatsby-image';
import blockcontent from '@sanity/block-content-to-react';

import layout from '../components/layout';
import seo from '../components/seo';

const blogposttemplate = ({ data, location }) => {
  const post = data.sanitypost;
  const sitetitle = data.site.sitemetadata ? title || `title`;
  const { previous, next } = data;

  return <layout location={location} title={sitetitle}>
    <seo title={post.title} description={post.title} />
    <article classname="log-post" itemscope itemtype="ttp://schema.org/article">
      <header>
        <h1 itemprop='headline'>{post.title}</h1>
        <p> {post.publisheddate}</p>
      </header>
      <div>
        <blockcontent blocks={post._rawbody} projectid='9vps5pu' dataset='production' />
      </div>

      <div style={{ margin: '2rem 0' }}> {
        post.postimage && <image fluid={post.postimage.asset.fluid} alt={post.title} />}
      </div>
      <hr />
    </article>
    <nav classname='blog-post-nav'>
      <ul
        style={{ display: `flex`, flexwrap: `wrap`, justifycontent: `space-between`, liststyle: `none`, padding: 0 }}>
        <li> {previous && (<link to={`${previous.slug.current}`} rel='prev'> ←{previous.title} </link>)} </li>
        <li> {next && (<link to={`/${next.slug.current}`} rel='next'> {next.title}→ </link>)} </li>
      </ul>
    </nav>
  </layout>;
};

export default blogposttemplate;

export const pagequery = graphql`
    query newspostbyslug(
        $id: string!
        $previouspostid: string
        $nextpostid: string
    ) {
        site {
            sitemetadata {
                title
            }
        }
        sanitypost(_id: {eq: $id}) {
            _id
            title
            publisheddate(formatstring: 'mmmm dd, yyyy')
            _rawbody
            postimage {
                asset {
                    fluid {
                        ...gatsbysanityimagefluid
                    }
                }
            }
        }
        previous: sanitypost(_id: {eq: $previouspostid}) {
            slug {
                current
            }
            title
        }
        next: sanitypost(_id: {eq: $nextpostid}) {
            slug {
                current
            }
            title
        }
    }
`;

if your wrappers (<layout>, <article> and <div> parent of <blockcontent>) has set a defined limited max-width (or a width), the child will never span horizontally unless they are absolute positioned, which by default, it won't. a css rules like this should work:

.parent-wrapper {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.children {
  position: relative;
  display: inherit; // or inline-block
}

in that case, the .children will never span more than 1000px.


Related Query

More Query from same tag