0
\$\begingroup\$

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>

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

\$\endgroup\$
1
\$\begingroup\$

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.

\$\endgroup\$
1
\$\begingroup\$

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 :D

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

\$\endgroup\$
  • \$\begingroup\$ Yeah sure, I can try and get one on here soon. But I took your suggestions and put them and use, and whilst it may have reduced my CSS code by 200 lines, vh has kind of messed up a lot things. When resizing the browser, it looks fine. But when inspecting in Google Chrome or other browser testing sites, there are huge gaps between the content. Any idea why? \$\endgroup\$ – FeelingLikeAJabroni Mar 19 at 22:46
  • \$\begingroup\$ That's really difficult to answer without a working demo version. Apart from this it is not always reliable what browser testing sites show you. They just try to emulate the behavior of certain browser/device. It's always best to test it on real devices. Maybe this video on CSS units is helpful: youtube.com/watch?v=qrduUUdxBSY BTW this used to be my favorite YT channel about web design. There are lots of video series about HMTL, CSS and programming a website from scratch. I definitely recommend it, especially the older videos by the channel founder Travis. \$\endgroup\$ – Dennis Fink Mar 20 at 0:46
  • \$\begingroup\$ Hi, here is a working demo. aqueous-lowlands-38591.herokuapp.com \$\endgroup\$ – FeelingLikeAJabroni Mar 20 at 8:39
  • \$\begingroup\$ Please know that this is no where near the finished version, I have a lot to polish still \$\endgroup\$ – FeelingLikeAJabroni Mar 20 at 8:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.