I’m creating a blog (entirely through trial and error) using Jekyll and I’m having trouble with the layout on one of the pages. There are three pages: Home, Blog, and Art. The layout on the Home and Blog pages stay the same when going from one to the other, but when you click on the link for the Art page the entire layout does this funny shrinking thing (sometimes, my best guess is that it has to do with how fast it loads/internet connection) and then shifts to the left (Problem #1). I’m pretty sure it has to do with the CSS and its driving me CRAZY, especially because I can’t figure out where in the CSS the problem is.
Here is the link to my repository: GitHub - vasilisa-the-beautiful/vasilisa
What I’m trying to accomplish on the Art page is to have a gallery of photos/quotes that are linked to blog posts. Currently I’m using a grid layout to arrange the photos in rows- but the blog post date is being stubborn and won’t stay over the image (Problem #2), instead it goes to left of the photo (in what I’m assuming is another grid box). I’ve provided the code for that page below.
---
layout: page
---
<html>
<head>
<style>
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
align-items: center;
justify-items: center;
}
.grid img {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
max-width: 100%;
}
</style>
<main class="grid">
{%- if site.posts.size > 0 -%}
{%- for post in site.categories.art_post -%}
<a class="post-link" href="{{ post.url | relative_url }}">
<img src={{post.image | relative }} />
</a>
{%- endfor -%}
{%- endif -%}
</div>
</div>
</main>
My coding is cringeworthy, I know- constructive criticism is welcome… or just criticism in general 
Thank you!
1 Like
You need a closing tag for head. The head loads first. Then the body. Currently it’s all in one head.
</head>
<body>
</body>
</html>
Also I recommend looking at these layouts.
Default layout is the only place in the whole theme or your site where you need to care about adding head and body tags.
Then page layout then gets wrapped by the default layout.
And when you use page layout on your page then you get the benefit of both while having a focus on content like
---
title: My page
---
## My content
Don't out head or body here. This will appear within body already.
Also your CSS can get setup in your default layout head tag so it only gets defined once and gets reused on each page and before body. You can experiment with CSS directly on a page but later you avoid move it to a central CSS section and use classes or IDs to scope when the CSS gets applied.
I’ll have a look at the site on my laptop later to see what is going on. I am not familiar with CSS grid. But it is indeed the modern and preferred way to do layouts. Flexbox can before it.
Hi Michael!
Thanks for pointing that out, I must’ve inadvertently deleted those tags while making changes.
When I first came across Jekyll one of the things I really liked about it was how the theme is separate from the content and adding new pages is as simple as creating a new markdown file.
Originally I tried to have the CSS that is on the Art page in its own file in the assets folder (also tried including it on the main CSS sheet). I’m not sure what I was doing wrong, I thought it may have had something to do with my site using SASS and SCSS instead of CSS (the theme I worked off of had it set up like this). I decided to improvise and stuck the CSS right on the Art page instead, it’s definitely preferable to have it with the rest off the CSS though.
I messed around with both flexbox and grid code for that page and ended up going with the grid layout, I found it easier to understand.
I added a photo to the home page and now the layout ‘shift’ occurs when navigating from the Home page to the Blog page. When going from Home to Art (and vice versa) the page does a weird jumpy thing but ends up with the same alignment as the previous page. Could it be that the inclusion of images on a page is causing the layout to move around?
As always, I appreciate your help tremendously! Looking forward to this Saturday 
1 Like
Oh yeah definitely images will take up no spaces and then pop in.
You can address this by setting attributes
<img src="..." width="1000" height="600">
Then before the image loads, it takes up the right space. The problem is you have to be very precise with setting both width and height. And if the ratio is off then the image will look squashed.
A lot easier is resizing your existing images from say 2000px wide to 800px wide and using 90% JPEG compression or whatever so you can reduce from a few MB of images to under a MB. Then the jarring effect will be much less because the images appear quickly.
You resize images manually. Or you a plugin like jekyll-resize or Related projects
1 Like
Ok I see the issue. For half a second on the Blog and Art pages, the page is white and unstyled.
I see you do have two head tags and two body tags and I’d say fix that and then continue testing.
view-source:https://beautifully-bipolar.com/art.html
<html lang="en">
<head> <---
...
</head>
<body> <---
...
<div class="page-content">
<html>
<head> <---
<style>
...
</style>
</head>
<body> <---
You don’t have to put the style tag in a head tag. You can put it anywhere. Usually in your head tag but if that is not practical on a page, just add it at the top
Also I would not create a layout for each page. You typically need 4 layouts - default.html, page.html, homepage.html and post.html. Then repeat the page one for most of the site. And the page.html layout uses the default layout, so you get the benefit of body and head structure without having it on page.html directly.
Recommendation:
---
title: Art
layout: page
---
<style>
...
</style>
<article class="grid">
{%- if site.posts.size > 0 -%}
{%- for post in site.categories.art_post -%}
...
{%- endfor -%}
{%- endif -%}
</article>
Regarding CSS, you should be able to put your CSS at the bottom of this Sass page, after import in your styles.sass file.
...
@import "main"
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
align-items: center;
justify-items: center;
}
.grid img {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
max-width: 100%;
}
You don’t have to take advantage of Sass syntax, you can just write plain CSS.
Then that will get added to a single styles.css output file.
Ah, that’s good to know about images! The way the pages are loading is driving me bananas, trying to stop of that half second of looking like the layout is jumping all over the place has probably taken a year off my life 
I’m going to take your advice and work on resizing the images, some of them are compressed but still may not be under a MB. I’ll take a whack at the jekyll-resize plugin and check out the others- maybe I can find something that can resize and compress in batches.
I looked at art.html and I’m not seeing what you are.
This is what I see:
layout: page
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
align-items: center;
justify-items: center;
}
.grid img {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.3);
max-width: 100%;
}
{%- if site.posts.size > 0 -%}
{%- for post in site.categories.art_post -%}
<a class="post-link" href="{{ post.url | relative_url }}">
<img src={{post.image | relative }} />
</a>
{%- endfor -%}
{%- endif -%}
I did just make an edit to take out the two tags at the bottom because there are no div tags above to close- I edited the code to try it a different way (many, many times) and never got rid of it.
My proof reading skills could use some improvement 
I’m going to work on that.
I didn’t realize I could add CSS to a SASS page. I’m using Visual Studio Code and it always seems to be giving me different ‘problems’ in the code when I mess around with the SASS or SCSS pages. I’ll make that change and see what happens!
I understand the general concept of SASS but that’s pretty much it, CSS is a weak spot for me but I’m almost thinking it might be worth it to start learning SASS instead. What’s your opinion?
Thank you!
I made the change on the styles.sass page and this is the error VSC gave me:
Error: Invalid CSS after “.grid {”: expected “}”, was “{” on line 16:8 of styles.sass >> .grid { { -------^
It suggested running bundle install, which I did, and then returned with this error:
Conversion error: Jekyll::Converters::Sass encountered an error while converting ‘assets/css/styles.sass’
The site won’t build as a result of this error, I’ve tried the little button at the bottom to build and run it locally
as well as running ‘bundle exec jekyll serve’ in the terminal.
Any ideas?
I did a refresh. I still bad setup on the output page for art.html like 2x head
https://beautifully-bipolar.com/art.html
If I look on GitHub, the art.md page has no content. So I don’t know if you’re using another branch ?
art.md
Yeah Sass is functionality on top of CSS, so you should have a good understanding of CSS syntax first. That doesn’t mean knowing how to stye every scenario, just knowing basics like styling class, ID, tag and principles of centering elements and adding a header or footer. W3 schools has great resources on this syntax.
You can configure VS Code to treat Sass as CSS or get a Sass/SCSS extension.
I’d suggest going to a separate repo and getting CSS and Sass figured out there, without being hindered by the them.
Take note of the dir and file names and frontmatter or no frontmatter in these files. Any variations might give errors or unexpected results
I don’t think the images are big deal. The problem where the page is white and unstyled is caused by loading the CSS too slowly or to late, maybe caused by your 2x head and 2x body tags. Or the CSS file is too large.
When the images load incrementally, it only shifts around the images. The header and navbar and the overall page layout are still fine and not jarring as images come in.
Hey there,
I was able to remove all of the extra tags, the duplicates existed within the layout files and the include files. The problem still exists, you mentioned the CSS file may be too large so I’m going to look at that next. I might try to change from using SASS and SCSS to just CSS.
Regarding the art.md file being blank:
The graphite theme I worked off of has header_pages: in _config.yml to create links to the pages in the navigation.
header_pages:
- index.md
- blog.md
- art.md
The markdown file is empty because its only purpose is to display the correct layout and page name. I have the two extra layouts (blog.html and art.html) because
I want the blog posts to display differently on each page (list of links versus the grid of images).
I looked at your themeless-jekyll-quick-start repository and now I’m wondering if what I said above is just a longer way of accomplishing the same thing.
Debugging my CSS can sometimes be so thorny. I have found that it’s helpful to use the Developer Tools (View > Developer > Developer Tools) in Chrome. You enable it, then a right-hand-side panel appears, and shows you which CSS is being applied. You can edit the CSS (displayed) right there and also see by hovering and drilling down in your code which element is being influenced. It’s a bit fiddly to figure out at first, but you might give it a try if you haven’t yet. The other tip I have is to comment out your css in big chunks, when debugging. I haven’t found CSS tidiers to be much help in this process, but ymmv.
2 Likes
Hi @nutellacrepe !
My time editing is sporadic, so I’ve just seen your response 
Thank you! (Better late than never, right?!)
