Kevin Powell - Community•3w ago

Extra space, missing space and breakpoint adjustment

This is an attempt to practice building a very basic blog for the first time. (Mostly for grid practice). Code: https://codepen.io/Mcoding-300/pen/JojOKGB borders included so that you can see what’s going on What do you think is the most recommended way to fix these issues? Please be specific 1. When resizing the page smaller the extra space on each side of the paragraphs and image seem to disappear until about the media query point. It would probably be better to keep some space on the sides of it as it resizes. How could that be done? 2. I don’t think I’ve chosen the right max-width to the aside for it to become hidden. How do you think I could change this so that it disappears at a place when there’s a bit of space between the main content when the page is resized smaller? 3. When resizing the page the footer gets a lot of extra space at the bottom and after that there is even more space

M-coding300

CodePen

Practice blog

...

11 Replies

vince•3w ago

I'll take a look at this tomorrow if no one answers just remind me

clevermissfox•3w ago

1. You can add pseudo padding as grid cols since padding on wrapper wont work as you have background colors:

     grid-template-columns: minmax(1em, 1fr) repeat(6, 1fr) minmax(1em, 1fr);
    grid-template-rows: auto 1fr 1fr 1fr auto;
     grid-template-areas:
        "header header header header header header header header"
        ". main main main main main aside ."
        ". main main main main main aside ."
        ". main main main main main aside ."
        "footer footer footer footer footer footer footer footer";

     grid-template-columns: minmax(1em, 1fr) repeat(6, 1fr) minmax(1em, 1fr);
    grid-template-rows: auto 1fr 1fr 1fr auto;
     grid-template-areas:
        "header header header header header header header header"
        ". main main main main main aside ."
        ". main main main main main aside ."
        ". main main main main main aside ."
        "footer footer footer footer footer footer footer footer";

the . or full stop signifies an empty cell. you probably would want to adjust the columns instead of using 6 cols (or 8 with the pseudo padding) when you only need 4 total

 grid-template-columns: minmax(1em, 0.5fr) 4fr 1fr minmax(1em, 0.5fr);
    grid-template-rows: auto 1fr auto;
     grid-template-areas:
        "header header header header "
        ".  main aside ."
        "footer footer footer footer";

 grid-template-columns: minmax(1em, 0.5fr) 4fr 1fr minmax(1em, 0.5fr);
    grid-template-rows: auto 1fr auto;
     grid-template-areas:
        "header header header header "
        ".  main aside ."
        "footer footer footer footer";

i see in your media query youre setting the aside { display: none; } but even if the cell is empty, its defined in the grid to take up 1fr of space so youll need to redefine the grid cols /grid areas too OR set the wrapper back to display: block (or more efficient , leave it at display: block default then use a min width media query to add the grid properties in at that breakpt instead overriding the default behaviour then reverting back )

@media (max-width: 800px) { 
  .wrapper {
      display: block;
    
    & main {
      padding-inline: 1em;
    }
  }
    aside {
        display: none;
    }
}

@media (max-width: 800px) { 
  .wrapper {
      display: block;
    
    & main {
      padding-inline: 1em;
    }
  }
    aside {
        display: none;
    }
}

2. im not sure what you mean by "so that it disappears at a place when theres a bit pace between the main content when the page is resized smaller" ? you just have to play with the screen size and choose the breakpoint that makes sense. 3. The footer has extra space because even though youve redefined the grid cols and grid areas, its still set to have these grid rows rid-template-rows: auto 1fr 1fr 1fr auto; so it seems to be tacking the last three onto the footer. if you toggle off the grid rows the footer just takes up the space it needs to and then you have set the argin on the wrapper to have 1.5rem margin-block-end so thats added under the footer I would suggest just resetting to display: block when you no longer need the grid layout at whatever breakpoint but since you want the practice with grid, just make sure youre resetting the grid row along with the cols/areas (might want to add in a gap between the main and aside too)

clevermissfox•3w ago

and as an "aside" 🤣, this:

html {
    font-size:16px;
}

html {
    font-size:16px;
}

is 1. not accessible to set font size in pixels, and 2. unnecessary because the browser default is already 16px Use 1rem or use a clamp for fluid typography Kevin powell free course- font size Why you should never use px for font size

Kevin Powell

YouTube

HTML & CSS for Absolute Beginners: Font sizes

🎓 Enroll in this course for FREE - get additional lessons, written content, interactive exercises, and more: learn.kevinpowell.co 📂 Get the course files here: https://www.dropbox.com/scl/fo/kusdjekuytcaa3of0vtd4/AChRHcF13pNi93JWusfLW9A?rlkey=tbrbxnabsi52u6onal9rh7fwm&st=iyo2wujq&dl=0 Learn to build websites from scratch - even if you've never ...

Josh Collinsworth

Why you should never use px to set font-size in CSS

Many developers seem to believe there's no difference between px and other CSS units. Let's dispel that myth, for the sake of better accessibility.

clevermissfox•3w ago

Instead of setting margin-bottom on the header you can just use gap since youre using grid

clevermissfox•3w ago

here youre setting a margin bottom on the image :

    
.blog-post img,
.blog-post h2,
.blog-post p {
  margin-bottom: 2rem; 
}

    
.blog-post img,
.blog-post h2,
.blog-post p {
  margin-bottom: 2rem; 
}

but if you inspect youll see because yuove set an aspect ratio on the image container, the image is just overflowing its margin and its not actually creating space because there is nothing else in the image container Another way to accomplish the same this is either make .blog-post a grid or flex container and use gap because you want consistant spacing or use this kind of selector :

    
.blog-post > *  {
  margin-bottom: 2rem; 
}

    
.blog-post > *  {
  margin-bottom: 2rem; 
}

This says any element that is a direct child of .blog-post gets a margin-bottom (although margin-block-end is the logical property and a good habit to get into ) The aside li would also be another place you can apply these concepts (if you need consistent spacing, just make the ul a grid or flex container and add gap instead of margins) Part of every css reset youll ever see will likely include these properties on your images :

img {
  max-width: 100%;
  display: block;
}

img {
  max-width: 100%;
  display: block;
}

Im noticing a pattern where youre using margin on individual elements in place of padding for example your .aside li gets margin instead of padding on aside; .footer-section gets margin AND padding instead of padding on the footer and gap or margin on the direct children whether they have the class .footer-section or not) . I think KPow has some videos on spacing, I'd go look for some videos about spacing , this is a great knowledgable creator too Another

Kevin Powell

YouTube

CSS gap is NOT a replacement for margins

I’ve seen some people completely abandoning margins and turning to using gap for everything, and to me, that’s problematic. Don’t get me wrong, gap is an absolute lifesaver, especially when it comes to spacing out components. What it’s not best for, however, is spacing out regular flow content like text. So, this isn’t to say that you should n...

Kevin Powell

YouTube

HTML & CSS for Absolute Beginners: Line height and spacing

Dmitry Mayorov

YouTube

Master CSS Spacing: Margin, Padding, and Gap Explained

In one of my videos, I said, 'Never use margins on reusable components!' Some of you asked, 'How do you create space then?' This video answers that. Plus, I'll break down how to choose between margin, padding, and gap in CSS with a real-world example – It's not always straightforward. Let's dive in! CodePen Before: https://codepen.io/dmtrmrv/pe...

Kevin Powell

YouTube

The secret to mastering CSS layouts

Deep dive this topic, and much more, in my course CSS Demystified: https://cssdemystified.com/?utm_campaign=css-relationships&utm_source=youtube&utm_medium=description 🔗 Links ✅ Why flex items with padding aren’t the same size (it’s an article, not video, sorry!): https://youtu.be/fm3dSg4cxRI ✅ Flexbox or grid - How to decide? https://youtu.b...

markeyaOP•2w ago

@clevermissfox Thank you so much! I took your advice and implemented it except the first part. I didn’t want extra space on the side of the sidebar. I just want an extra space on the left and right side of the main or .blogpost. I think ended up fixing that though. I tried to remove the margin bottom from the header, but everything was too close to the top so I kept it. I tried to use gap but when I applied gap it created space under the aside. The aside was basically detached from the footer, which is not the look I was going for. That’s another reason I kept it. I saw that I had some extra padding on top of blog post to remove that so that the top of blog post lines up with my aside.
Everything else I implemented and it worked. Also I will check out those resources too! @clevermissfox I have two follow up questions though: 1) When you’re given a project and there has to be an image, do you find images or do they give you the images already sized correctly for the webpage or do you have to resize them in CSS? I was trying to see if I could scale my image a bit smaller in CSS (I added a lower max-height to the .image container img in the media query) and there was a lot of extra space under the image so I didn’t know if it was something that was possible to do well or not. It didn’t work well so I deleted the styles for that 🙃 just a question for future reference 2) Another question I had was about the font-size. If I go to a couple articles online, I see that if I turn my phone to the side, it looks like font size doesn’t change. I like that style. And that’s what I would like to be able to do with my text. When I looked at this blog that I made when I turned my phone to the side, the text looked too large for a phone. AND THAT WAS WHEN IT WAS SET TO 16px 😦 I changed the font size to 1.125rem later and I’m getting the same issue. I wanted everything to basically look like 18 pixels, but I’m saying that it doesn’t stay looking that way when I turn my phone to the side no matter if I’m using pixels or rem. If you have some insight into why that is, I’d appreciate it if you let me know @vince hey if you have any answers about the last 2 questions I just posted ⬆️ feel free to chime in

clevermissfox•2w ago

Rarely is someone going to give you an image that is already optimized to just throw it your project. Working with image son the web is a delicate balance between file size (eg 30Kb) , size/dimensions (eg 11080x800), and how it needs to be used on your page. Part of optimizing file size is converting to lighter weight file types like .webp. Then you want the dimensions to be large enough for the resolution to be at least 72ppi for the size you’re using it on the page. Whenever possible , use vector images (svgs) instead of raster images (jpg, webp, tiff, PNG, avif…) As for the font sizes I’m not totally sure what you mean. When you turn your phone sideways there will be more space for the line of text . Do you have an example of a website you refer to whrre they don’t change . REM is more about accessibility meaning if the user goes into their browser settings and wants to make the text size larger or smaller , they are able to do that. If the user wants to zoom into the page to zoom the text, they’re able to do that. Pixels don’t. I know how style seems more important but a page that is completely unstyled with just the browser defaults and the ability to reach the content is enter than a beautifully styled page that isn’t inclusive and users can’t reach the content or make the font size what they can read

markeyaOP•2w ago

That makes sense about the images. I need to practice with that. Thank you for the tips! @clevermissfox And yeah I understand. I did a bit of research and saw what you were saying yesterday and I will continue to use responsive units for global font size. That’s why I changed it from rem to pixels as you suggested 😙 I just meant that I didn’t understand why the text got larger when I turned it as I turned my phone when looking at other articles and the their font size didn’t increase. Here are just 3

markeyaOP•2w ago

https://www.nationalgeographic.com/lifestyle/article/best-hiking-boots-for-men

Lifestyle

Best hiking boots for men in 2025

From the lightweight to the affordable, here are eight boots for any kind of trail.

markeyaOP•2w ago

https://simplelivingbusiness.com/start-a-book-blog/

Simple Living Business

How to start a book blog in 2023 (and make money from it) - Simple ...

Summer 2022 marked ten years since I started my book blog. Back in 2012, I was nineteen years old, in my second year of university studying English Literature & Spanish, and things were a mess. But during this time, I was reading a lot. These books were clearly helping me to feel better, and I...

markeyaOP•2w ago

https://www.webmd.com/fitness-exercise/news/20250228/why-step-count-remains-most-impactful-fitness-stat

WebMD

Why Step Count Remains the Most Impactful Fitness Stat

Increasing daily movement, particularly through step count, may be the most effective measure for enhancing longevity and overall wellness.

Gaming

Programming

Extra space, missing space and breakpoint adjustment

Did you find this page helpful?