Improving the code of my About Page

By Posted on

Problem

I have completed my website and I’m super happy with its design, but I feel that how I reached this point can be made more efficient and genuinely improved.

Note: I’m only looking for assistance on how I can get the same output, but with fewer media queries for responsive design

I feel that there is a flaw in the about pages design that has required me to make so many media queries to ensure the output is quality (in my opinion).

#about {
	height: 725px;
	position: relative;
}

.about-container {
	display: flex;
	position: absolute;
	height: inherit;
}

#about-div-one {
	height: 500px;
	width: 450px;
	left:9%; 
	top: 16%;
	padding: 25px 0;
}

#about-div-one p {
	font-size: 20px;
	font-family: Montserrat;
}

#about-div-two {
	height: 500px;
	width: 350px;
	left: 61%; 
	top: 15%;
	background-color: #314455;
}

#about-div-three {
	height: 500px;
	width: 350px;
	left: 57%; 
	top: 20%;
	background-image: url("https://i.ibb.co/VCCd5zV/6dbfe498-c284-4e0a-a35f-5f38df3d3d74.jpg");
	background-position: 70% 50%;
}

@media only screen and (max-width: 1225px) {

	#about-div-two {
		height: 500px;
		width: 350px;
		left: 61%; 
		top: 15%;
	}

	#about-div-three {
		height: 500px;
		width: 350px;
		left: 57%; 
		top: 20%;
	}

}

@media only screen and (max-width: 1114px) {

	#about-div-one {
		height: 500px;
		width: 450px;
		left:5%; 
		top: 16%;
		padding: 25px 0;
	}

	#about-div-two {
		width: 350px;
		left: 61%; 
		top: 15%;
	}

	#about-div-three {
		height: 500px;
		width: 350px;
		left: 57%; 
		top: 20%;
	}

}

@media only screen and (max-width: 992px) {

	.about-container {
		position: static;
	}

	#about {
		height: 1200px;
		position: static;
	}

	#about-div-one {
		height: 300px;
		width: 80%;
		margin-left: 10%;
		text-align: center;
		padding-top: 50px;
	}

	#about-div-one p {
		font-size: 20px;
		font-family: Montserrat;
	}

	#about-div-two {
		display: none;
	}

	#about-div-three {
		display: none;
	}

	#about-sub-container {
		height: 600px;
		position: relative;
		padding-bottom: 50px;
	}

	.about-container2 {
		display: flex;
		position: absolute;
		height: inherit;
	}

	#about-div-four {
		height: 100%;
		width: 45%;
		left: 37%; 
		background-color: #314455;
	}

	#about-div-five {
		height: 100%;
		width: 45%;
		left: 22%; 
		top: 10%;
		background-image: url("https://i.ibb.co/VCCd5zV/6dbfe498-c284-4e0a-a35f-5f38df3d3d74.jpg");
		background-position: 70% 50%;
	}
}

@media only screen and (max-width: 975px) {

	#about {
		height: 1225px;
		position: static;
	}

	#about-div-one {
		height: 375px;
	}

	#about-div-one p {
		font-size: 20px;
		font-family: Montserrat;
	}

	#about-sub-container {
		height: 600px;
		position: relative;
		padding-bottom: 50px;
	}

	.about-container2 {
		display: flex;
		position: absolute;
		height: inherit;
	}

	#about-div-four {
		height: 100%;
		width: 45%;
		left: 37%; 
		background-color: #314455;
	}

	#about-div-five {
		height: 100%;
		width: 45%;
		left: 22%; 
		top: 10%;
		background-image: url("https://i.ibb.co/VCCd5zV/6dbfe498-c284-4e0a-a35f-5f38df3d3d74.jpg");
		background-position: 70% 50%;
	}

}


@media only screen and (max-width: 875px) {

	#about {
		height: 1250px;
		position: static;
	}


	#about-div-one {
		height: 375px;
	}
}

@media only screen and (max-width: 820px) {

	#about-div-one {
		height: 375px;
	}

}

@media only screen and (max-width: 750px) {

	#about {
		height: 1150px;
		position: static;
	}

	#about-div-one {
		height: 400px;
	}

	#about-div-four {
		height: 80%;
		width: 45%;
		left: 37%; 
		background-color: #314455;
	}

	#about-div-five {
		height: 80%;
		width: 45%;
		left: 22%; 
		top: 10%;
		background-image: url("https://i.ibb.co/VCCd5zV/6dbfe498-c284-4e0a-a35f-5f38df3d3d74.jpg");
		background-position: 70% 50%;
	}

}

@media only screen and (max-width: 700px) {

	#about {
		height: 1175px;
		position: static;
	}


	#about-div-one {
		height: 425px;
	}

}

@media only screen and (max-width: 654px) {

	#about {
		height: 1100px;
		position: static;
	}


	#about-div-one {
		height: 450px;
	}

	#about-div-four {
		height: 65%;
		width: 50%;
		left: 30%; 
		background-color: #314455;
	}

	#about-div-five {
		height: 65%;
		width: 50%;
		left: 15%; 
		top: 10%;
		background-image: url("https://i.ibb.co/VCCd5zV/6dbfe498-c284-4e0a-a35f-5f38df3d3d74.jpg");
		background-position: 70% 50%;
	}

}

@media only screen and (max-width: 614px) {

	#about {
		height: 1125px;
		position: static;
	}

	#about-div-one {
		height: 475px;
	}

}

@media only screen and (max-width: 600px) {

	#about {
		height: 1125px;
		position: static;
	}

	#about-sub-container {
		height: 600px;
		position: relative;
		padding-bottom: 50px;
	}

	#about-div-four {
		height: 63%;
		width: 65%;
		left: 24%; 
		background-color: #314455;
	}

	#about-div-five {
		height: 63%;
		width: 65%;
		left: 12%; 
		top: 13%;
		background-image: url("https://i.ibb.co/VCCd5zV/6dbfe498-c284-4e0a-a35f-5f38df3d3d74.jpg");
		background-position: 70% 50%;
	}

}

@media only screen and (max-width: 549px) {

	#about {
		height: 1150px;
		position: static;
	}

	#about-div-one {
		height: 500px;
	}

	#about-sub-container {
		height: 600px;
		position: relative;
		padding-bottom: 50px;
	}

}

@media only screen and (max-width: 525px) {

	#about {
		height: 1185px;
		position: static;
	}


	#about-div-one {
		height: 545px;
	}

}

@media only screen and (max-width: 471px) {

	#about {
		height: 1215px;
		position: static;
	}


	#about-div-one {
		height: 575px;
	}

}

@media only screen and (max-width: 453px) {

	#about {
		height: 1245px;
		position: static;
	}


	#about-div-one {
		height: 600px;
	}


}

@media only screen and (max-width: 445px) {

	#about {
		height: 1270px;
		position: static;
	}

	#about-div-one {
		height: 625px;
	}

}

@media only screen and (max-width: 435px) {

	#about {
		height: 1295px;
		position: static;
	}

	#about-div-one {
		height: 650px;
	}
}

@media only screen and (max-width: 410px) {

	#about {
		height: 1300px;
		position: static;
	}


	#about-div-one {
		height: 675px;
	}

	#about-div-four {
		height: 63%;
		width: 65%;
		left: 23%; 
		background-color: #314455;
	}

	#about-div-five {
		height: 63%;
		width: 65%;
		left: 12%; 
		top: 10%;
		background-image: url("https://i.ibb.co/VCCd5zV/6dbfe498-c284-4e0a-a35f-5f38df3d3d74.jpg");
		background-position: 70% 50%;
	}
}
<div id="about">
	<div id="about-div-one" class="about-container">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis nibh ac lobortis dictum. Proin at venenatis augue. Sed vehicula felis in erat scelerisque, vitae luctus tortor tristique. Praesent pharetra felis quam, eget tincidunt massa tristique sit amet. Phasellus viverra, lorem nec sagittis consequat, dui arcu faucibus tortor, ac dictum nisl ex vitae diam. Donec sed tortor sit amet nunc tristique pulvinar in ullamcorper quam. Suspendisse eu sapien convallis, rutrum odio non, efficitur est. Nam quis finibus nunc. Etiam eget lectus scelerisque lacus faucibus pharetra. Donec sit amet tincidunt ipsum. Sed quam ipsum, fermentum sed nisl et, faucibus scelerisque nulla. Duis ac eleifend ex. Nullam a ligula in dui aliquet ultrices a ut arcu.</p>
	</div>
	<div id="about-div-two" class="about-container">

	</div>
	<div id="about-div-three" class="about-container">	

	</div>
	<div id="about-sub-container">
		<div id="about-div-four" class="about-container2">

		</div>
		<div id="about-div-five" class="about-container2">

		</div>
	</div>
</div>

Expand snippet

Note: I attempted to have between 50px and 25px between #about and it’s content

Solution

I would get rid of the heights. Like I explained in my answer before: there is this natural flow in a web document. The content takes the space it needs. I think what you want to do is add a padding at the top and the bottom of each section. So I would suggest you create a CSS class like this .panel{padding: 8% 0} or something similar. If the padding will be too much on smaller screens you can use media queries.

Now, your #about section is another story. Since all the childs of #about are set to position:absolute you cannot just remove the height otherwise the section would collapse. What you could do is something like this:

HTML

<div id="about" class="panel">
    <div class="left-side">
        <div id="about-div-one" class="about-container">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis nibh ac lobortis dictum. Proin at venenatis augue. Sed vehicula felis in erat scelerisque, vitae luctus tortor tristique. Praesent pharetra felis quam, eget tincidunt massa tristique sit amet. Phasellus viverra, lorem nec sagittis consequat, dui arcu faucibus tortor, ac dictum nisl ex vitae diam. Donec sed tortor sit amet nunc tristique pulvinar in ullamcorper quam. Suspendisse eu sapien convallis, rutrum odio non, efficitur est. Nam quis finibus nunc. Etiam eget lectus scelerisque lacus faucibus pharetra. Donec sit amet tincidunt ipsum. Sed quam ipsum, fermentum sed nisl et, faucibus scelerisque nulla. Duis ac eleifend ex. Nullam a ligula in dui aliquet ultrices a ut arcu.</p>
        </div>
    </div>
    <div class="right-side">
        <div id="about-div-two" class="about-container">
        </div>
        <div id="about-div-three" class="about-container">
        </div>
        <div id="about-sub-container">
            <div id="about-div-four" class="about-container2">
            </div>
            <div id="about-div-five" class="about-container2">
            </div>
        </div>
    </div>
</div>

CSS

#about{
    display: flex;
}

.left-side,
.right-side{
    width: 50%;
    position: relative;
}

.div-inside-right-side{
    position: absolute;
}

Maybe you need to use a min-height. I hope this helps.

At first, do you have a link do a working demo? It would be easier to examine the page. But I’ll try to give some advice anyway.

  1. If you want your page to be fully responsive you should not use px as a unit for the properties width and height. px is an absolute unit. It would be better to use a relative unit such as %, vh, vw, vmin, vmax, em or rem. If you do that, your layout will be more fluid. I would recommend % on the width property and vh on the height property.

  2. I am not sure why your layout depends so heavily on a height set on the divs. I rarely use height (and if I do it is almost always vh) because a container will expand to the height of its children e.g. text content. So if you maximize the screen and a container has a larger width (use % on width) it will take up less space because the text can spread over the width. I hope it’s clear what I mean 😀

Hopefully this is helpful. If you could post a link to a demo version I’d like do have a second look on it.

Leave a Reply

Your email address will not be published. Required fields are marked *