This photo above is what I am looking to accomplish with the design of the website. Is there a way I can accomplish this using the Motion theme?
I’ve tried adding other CSS people are using on other themes to no avail, and I can assume that CSS is meant for those themes but I’d really like to see if there’s a way to accomplish this. Any help would be appreciated!
Here’s a link to an existing article already if this helps: https://sundazecalifornia.com/blogs/news/chasing-swells-a-surfers-journey-from-shore-to-peak
HI @pointier
the layout you are looking for is not possible with just CSS for the layout you need to customize the liquid file of the blog post it is not easy for a person who is not familiar with the liquid code so if you need expert who can do that job for you kindly contact me on the email or Wattsapp
Hi @pointier 
minimum browsers that support it CSS-Grid can potentially do this.
Beyond that a fundamental layout change needs an advanced theme customization.
The below does not attempt to adjust the surrounding overall layout spacing only the content.
In a custom-css setting try something like the following tailored to need :
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
article.page-content {
display: grid;
grid-template-areas:
"nav"
"background"
"header"
"content";
}
article.page-content nav { grid-area: nav; }
article.page-content header { grid-area: header; }
article.page-content .article__featured-image { grid-area: background; }
article.page-content .article__body { grid-area: content; }
article.page-content header {
position: relative;
z-index: 1;
background-color: #f3f3f3;
grid-area: header;
top: -50%;
width: 75%;
text-align: center;
margin: 0 auto;
}
article.page-content .article__body { padding: 0 10rem; }
If you need this full customization then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
