12 replies

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?

css 
/*Section1*/

.hero-section{
display: flex;
justify-content: center;
position: absolute;
top: 0px;
left: 0px;
width:100%;
height: 930px;
background-image: var(--heroimg) !important;
background-position: center center;
background-size: cover;
z-index: 1;
}
.hero-container{
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 810px;
height: 100%;
align-items: flex-end;
flex-direction: column;
padding: 0 35px 6px 0;
}
.social-logos{
display: flex;
width: 55%;
height: 100px;
align-items: center;
justify-content: space-evenly;
margin: 8px -16px;
}
.social-logos img{
opacity: 0.7;
transition: ease 0.2s;
}
.social-logos img:hover{
opacity: 1;
transition: ease 0.2s;
}
.duplicate-links{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 25px 50px 1fr auto;
font-size: 40px;
font-family: noto serif;
font-weight: 600;
justify-content: center;
mix-blend-mode: difference;
column-gap: 5%;
}

css 
/*Section1*/

.hero-section{
display: flex;
justify-content: center;
position: absolute;
top: 0px;
left: 0px;
width:100%;
height: 930px;
background-image: var(--heroimg) !important;
background-position: center center;
background-size: cover;
z-index: 1;
}
.hero-container{
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 810px;
height: 100%;
align-items: flex-end;
flex-direction: column;
padding: 0 35px 6px 0;
}
.social-logos{
display: flex;
width: 55%;
height: 100px;
align-items: center;
justify-content: space-evenly;
margin: 8px -16px;
}
.social-logos img{
opacity: 0.7;
transition: ease 0.2s;
}
.social-logos img:hover{
opacity: 1;
transition: ease 0.2s;
}
.duplicate-links{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 25px 50px 1fr auto;
font-size: 40px;
font-family: noto serif;
font-weight: 600;
justify-content: center;
mix-blend-mode: difference;
column-gap: 5%;
}

KP-C

Kevin Powell - Community•2y ago•

12 replies

TheJoshShephard

Empty Space Caused by Containers or Content

css 
/*Section1*/

.hero-section{
display: flex;
justify-content: center;
position: absolute;
top: 0px;
left: 0px;
width:100%;
height: 930px;
background-image: var(--heroimg) !important;
background-position: center center;
background-size: cover;
z-index: 1;
}
.hero-container{
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 810px;
height: 100%;
align-items: flex-end;
flex-direction: column;
padding: 0 35px 6px 0;
}
.social-logos{
display: flex;
width: 55%;
height: 100px;
align-items: center;
justify-content: space-evenly;
margin: 8px -16px;
}
.social-logos img{
opacity: 0.7;
transition: ease 0.2s;
}
.social-logos img:hover{
opacity: 1;
transition: ease 0.2s;
}
.duplicate-links{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 25px 50px 1fr auto;
font-size: 40px;
font-family: noto serif;
font-weight: 600;
justify-content: center;
mix-blend-mode: difference;
column-gap: 5%;
}

css 
/*Section1*/

.hero-section{
display: flex;
justify-content: center;
position: absolute;
top: 0px;
left: 0px;
width:100%;
height: 930px;
background-image: var(--heroimg) !important;
background-position: center center;
background-size: cover;
z-index: 1;
}
.hero-container{
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 810px;
height: 100%;
align-items: flex-end;
flex-direction: column;
padding: 0 35px 6px 0;
}
.social-logos{
display: flex;
width: 55%;
height: 100px;
align-items: center;
justify-content: space-evenly;
margin: 8px -16px;
}
.social-logos img{
opacity: 0.7;
transition: ease 0.2s;
}
.social-logos img:hover{
opacity: 1;
transition: ease 0.2s;
}
.duplicate-links{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 25px 50px 1fr auto;
font-size: 40px;
font-family: noto serif;
font-weight: 600;
justify-content: center;
mix-blend-mode: difference;
column-gap: 5%;
}

Empty Space Caused by Containers or Content

Empty Space Caused by Containers or Content

Similar Threads

Similar Threads

Similar Threads