Empty Space Caused by Containers or Content
Hey everyone,
I recently been using a retro platform called Spacehey to design old school "Myspace" layouts. Which the site is a recreation of. Because of it I've been getting back into coding and applying some of my limited knowledge learned from Webflow.
With the recent page I've been playing around with, I've added two sections, then containers, then the content containers... Which seems to cause some spacing issue on that right, that essentially cuts into the sections.
I've been able to narrow the issue down to either the containers or certain content in the containers. But still can't quite figure it out. I'm also sure the code could still be improved in general.
Below I've attached the CSS of the first section. I'll also comment the second section if needed!
What are your thoughts?
What are your thoughts?
11 Replies
I'm not clear about the structure of your html, but the column-gap might be a problem. You declare repeat (4, 1fr) which divides 100% of the space, and the 5% gap will be added between each column, which could cause overflow. Similarly, margin is by default added outside a container, so the social logos might not layout how you expect. The fixed width container might also cause problems, but again I'm not sure what the structure is exactly.
Apologies if I'm misleading you, just kind of guessing.
From the image the issue is more likely to be from the second section than the first. But it may not be either of them.
Ideally you would need to share the HTML and CSS. If you could replicate the relevant code in a codepen or similar that might help somebody help you debug the issue.
I recently made some small changes prior to seeing this, but here's my code pen.
Also no worries. With regards to the structure, what seems wrong or confusing about it?
https://codepen.io/TheJoshShephard/pen/oNOGPQo
Yeah, it's hard to tell. I've only been able to see it's certainly either one or both.
Here's the codepen, I just took the page source for the html and inputed the CSS on the side to see it all better.
Just a note about the CSS is that some stuff in there is just to manipulate pre built elements in the site.
https://codepen.io/TheJoshShephard/pen/oNOGPQo
There is a lot going on here but if your main issue is the "friend", "favorite", "comment" and "forward" text-links overflowing their parent then this simply down to the font-size - it is too large for the container
I would also look at the way you have defined the duplicate-links CSS . You have it as a grid which, but at the same time trying to apply flex properties.
I would recommend changing the .duplicate-content CSS to use flex, something like this:
I hope I didn't completely miss-understand the issue.
I just gave that a try in codepen, and it seems like it's a good alternative. But the issue still exist.
I forget exactly why I did grid compared to flex. I played with flex earlier in the developer console but was getting different issues all together. One being I think I wasn't allowed to use gap or kept being prompted that gap was wrong (which really confused, since I seem to have used it earlier)
The issue I'm talking about is just the empty space, which shows up at the size. Since I'm assuming my design isn't as responsive as it could be.
I plan to maybe do more adaptive designs, but I still plan to better understand how structure for fluid.
Quick edit: Thanks for you response and taking a look at things btw!
Here's a copy of my test btw
One issue you have with your codepen is that you are also importing your stylesheet from your server and the styles in there are overwriting the ones you have in the codepen.
For example, if you look at the browser inspector tools you will see that your selector ".duplicate-content" is defined twice, the css style sheet definitions still set it to grid and this is overriding your codepen styles.
Completely forgot I did that earlier lol. So I still left it in for now, and just replaced what was needed.
This issue is still apparent it seems.
I'll clean up the excess css a little later. When I remove certain parts it falls apart.
I'm currently setting up a template for future designs. So it will be much easier!
@Chris finally cleaned up the css, and figured how to make the site into an editable template.
I had to delete the sites stylesheet import from the HTML, then use the import rule to start the CSS, and paste my original CSS. I also had to add the DIV's back in a section they would normally appear in the HTML.
So now it should be easier to test any feedback!
https://codepen.io/TheJoshShephard/pen/QWPqzpY
Try removing the fixed
width: 810px;ç that you have on your .hero-container.
I will admit that I don't fully understand exactly what it is that you want to fix and how you want it to look.
I have attached 2 screen shots - the first with the fixed width and the second without it. As you can see, without the fixed width the texts are centered - is that what you are trying to achieve?
So I tested that out earlier, and it sort of messes things up. At least in how I'm trying to get it to look.
No worries, I appreciate you trying to help either way.
I pretty much want it to look as it does, spacing and all. I think over all I just wanna fix sizing issues?
So in one part, yes I do want that text centered, and in the place as it was normally. But I also want the logos spaced, and positioned at the tail of the large logo in the image.
To better explain my thoughts on the structuring. I set the containers to be 810px wide since the sites main container is 810px.
So I wanted to make sure certain content and images lined up within that area. With exception to the header and the Spotify logo overflowing the containers.
I just wanna be able to size to some smaller screens, while keeping the same proportions.
For example I have a fixed copy of the album art in section 2, which shrinks. Though I don't want it to. Especially since in Chrome, there's a Back to Top image that lines up with the art at the bottom.
The main issue, is that by less, than 1080px wide. Something cuts into the sides of the top 2 sections. Which I don't know how to adjust yet.
Though I would maybe wanna start styling for break points from there. I'm not fully sure what to do, to make things start wrapping around correctly?