I have some blocks with goods and there are different descriptions with different amounts of text and I need to center it. The button "add to cart" must be in one line not depends how many symbols in description I have. Not pure css solution welcomed (Just not jQuery solutions).
The solution with curtain height does not fit!
(Space must be between description and button "add to cart").
.parent {
border: medium dashed green;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.child {
align-self: stretch;
border: medium dashed #c4c4c4;
background-color: #fedba9;
width: 40%;
}
.button {
max-width: 350px;
max-height: 50px;
background-color: coral;
margin: 0 auto;
}
img {
display: block;
margin: 0 auto;
max-width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/test.css" />
</head>
<body>
<div class="parent">
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident voluptatibus repudiandae vitae eos, debitis eligendi rem voluptate atque iusto quo nam impedit quia tempore aperiam ducimus asperiores, odit molestiae nemo!
</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia accusamus dolorem, sint atque culpa eum aspernatur earum eaque nesciunt minima aliquid omnis, cum iure veritatis voluptatum nam distinctio eligendi. Fuga voluptatibus reiciendis,
laudantium dignissimos harum modi voluptatum, ipsa a ad possimus cum accusamus. Ea alias ipsum laboriosam tempora sapiente, molestiae incidunt reprehenderit maiores perferendis earum. Ut dolorem suscipit at? Laboriosam corporis dolorem, est doloribus
ullam ut accusantium, amet voluptate beatae vitae deleniti nihil consequuntur non labore, nobis ipsum? Sapiente earum praesentium, quasi voluptas doloremque distinctio. Veniam soluta perspiciatis porro! Fugit excepturi, perferendis expedita cum
officiis autem eum, perspiciatis quisquam, vero ipsum ea. Odit animi sed nesciunt officiis impedit ex, in autem id quis, dolorum corporis eum cupiditate itaque repellat.
</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>2342342 23423423 23423423</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>123123 12312</p>
<div class="button">add to cart</div>
</div>
</div>
</body>
</html>
Use flex in direction column on your .child item
Make the p inside grow to fill all remaining space
Make it itself a flex to have text easily centered within
.parent {
border: medium dashed green;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.child {
align-self: stretch;
border: medium dashed #c4c4c4;
background-color: #fedba9;
width: 40%;
display: flex;
flex-direction: column;
}
.child p {
flex-grow: 1;
display: flex;
align-items: center;
}
.button {
max-width: 350px;
max-height: 50px;
background-color: coral;
margin: 0 auto;
}
img {
display: block;
margin: 0 auto;
max-width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/test.css" />
</head>
<body>
<div class="parent">
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident voluptatibus repudiandae vitae eos, debitis eligendi rem voluptate atque iusto quo nam impedit quia tempore aperiam ducimus asperiores, odit molestiae nemo!
</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia accusamus dolorem, sint atque culpa eum aspernatur earum eaque nesciunt minima aliquid omnis, cum iure veritatis voluptatum nam distinctio eligendi. Fuga voluptatibus reiciendis,
laudantium dignissimos harum modi voluptatum, ipsa a ad possimus cum accusamus. Ea alias ipsum laboriosam tempora sapiente, molestiae incidunt reprehenderit maiores perferendis earum. Ut dolorem suscipit at? Laboriosam corporis dolorem, est doloribus
ullam ut accusantium, amet voluptate beatae vitae deleniti nihil consequuntur non labore, nobis ipsum? Sapiente earum praesentium, quasi voluptas doloremque distinctio. Veniam soluta perspiciatis porro! Fugit excepturi, perferendis expedita cum
officiis autem eum, perspiciatis quisquam, vero ipsum ea. Odit animi sed nesciunt officiis impedit ex, in autem id quis, dolorum corporis eum cupiditate itaque repellat.
</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>2342342 23423423 23423423</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>123123 12312</p>
<div class="button">add to cart</div>
</div>
</div>
</body>
</html>
Added display: flex; and justify-content: space-between; on the .child element will move the elements equally apart.
Related
I'm new to programming and I would appreciate some help.
I have the code on codepen.
Here is the codepen link:https://codepen.io/Oblivion37/pen/LYzZEmN;
I had to use two media queries because I didn't know how to do it in a different way to be responsive and decent-looking. Before that, I tried to put just one media query with the display of block, but then I couldn't specify a gap xd.
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
background: rgb(206, 195, 195);
flex-basis: 30%;
}
.container {
display: flex;
justify-content: space-between;
max-width: 70rem;
}
header {
display: flex;
justify-content: center;
}
#media (max-width: 40em) {
.container {
display: flex;
flex-direction: column;
}
}
#media (max-width: 40em) {
.text {
margin-bottom: 3em;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab sapiente
harum nam qui voluptate soluta reiciendis repudiandae quibusdam
voluptatem. Nisi harum voluptatem quaerat dicta quae labore error, id
asperiores architecto, distinctio cupiditate repellat repellendus,
debitis voluptates ipsum recusandae omnis corrupti!i harum voluptatem
quaerat dicta quae labore error, id asperiores architecto, distinctio
cupiditate repellat repellendus, debitis voluptates ipsum rei harum
voluptatem quaerat dicta quae labore error, id asperiores architecto,
distinctio cupiditate repellat repellendus, debitis voluptates ipsum
rei harum voluptatem quaerat dicta quae labore error, id asperiores
architecto, distinctio cupiditate repellat repellendus, debitis
voluptates ipsum re
</div>
<div class="text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
consectetur beatae illum amet praesentium laboriosam officia, eligendi
cupiditate repudiandae, alias quia id odio accusamus. Laudantium?
</div>
<div class="text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo facilis,
sapiente mollitia itaque et, vel est repudiandae neque voluptatum quis
qui nulla ullam ea. Nihil natus est similique aliquid velit.
</div>
</div>
</header>
</body>
</html>
The last part of your CSS can be reduced to:
#media (max-width: 40em) {
.container {
flex-direction: column;
}
.text {
margin-bottom: 3em;
}
}
(Note: display: flex is inherited from the regular CSS rules, and you don't need to have separate media queries if the condition is identical.)
I want to place pictures next to each other with text below each text. It would be better if it was responsive. I can't quite figure out how to do that? There were similar questions but I am relatively new and couldn't really understand them. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Life in the Wild</h1>
<div class="container">
<img src="https://static.pexels.com/photos/52500/horse-herd-fog-nature-52500.jpeg" alt="">
<p class = "caption">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic sit laborum, totam dolores aspernatur magnam officiis magni omnis quisquam illo quod eligendi voluptatem excepturi asperiores ut reprehenderit soluta veniam ipsa?</p>
<img src="https://static.pexels.com/photos/66898/elephant-cub-tsavo-kenya-66898.jpeg" alt="">
<p class = "caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
<img src="https://static.pexels.com/photos/213399/pexels-photo-213399.jpeg" alt="">
<p class = "caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
<img src="https://static.pexels.com/photos/158471/ibis-bird-red-animals-158471.jpeg" alt="">
<p class = "caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
<img src="https://static.pexels.com/photos/133459/pexels-photo-133459.jpeg" alt="">
<p class = "caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
<img src="https://static.pexels.com/photos/50988/ape-berber-monkeys-mammal-affchen-50988.jpeg" alt="">
<p class = "caption">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus sequi illo, aliquam tempora tempore illum earum quibusdam corrupti vero, eligendi rerum perferendis natus voluptatem nam eveniet eaque praesentium maiores delectus!</p>
</div>
h1 {
text-align: center;
font-family: fantasy;
font-size: 3em;
border-bottom: 2px solid pink;
border-right: 2px solid pink;
width: 400px;
box-shadow: 4px 4px 5px #888888;
}
div.container {
vertical-align: top;
display: inline-block;
text-align: center;
width: 450px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
img {
height: 300px;
width: 450px;
transition: 0.5s all ease-in-out;
border-radius: 5%;
margin: 10px;
}
img:hover {
transform: scale(1.1);
}
.caption {
display: block;
}
I have started learning HTML/css about 2 weeks ago and (among others) this is one of the pages I came up with, but I can't make the image to resize when I shrink down the window. Most of the lessons until now have been about HTML and CSS only and how to make the document easy to read for screen readers and I wanted to do some practice with whatever knowledge I had. Any ideas why the image doesn't shrink down along with the text and why?
Thank you very much!
HTML:
#import url('https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap');
body {
margin: 0;
padding: 0;
background-color: #d89cf6;
}
.top {
position: relative;
padding: 1em 2em 1em 2em;
height: 3em;
background-color: #3e206d;
margin: auto;
overflow: hidden;
border-top: solid 6px;
border-bottom: solid 1px;
}
.top h1 {
position: absolute;
display: flex;
float: left;
margin: 0;
padding: 0;
margin-top: .3em;
font-family: 'Kelly Slab', cursive;
font-size: 2.4em;
color: #f0e3ff;
}
.top ul {
list-style-type: none;
display: flex;
float: right;
margin: 0;
padding: 0;
margin-top: 1.43em;
}
.top li {
padding: 0 0.3em;
margin: auto;
margin-top: .5em;
position: relative;
}
.top a {
text-decoration: none;
color: #f0e3ff;
font-family: 'Kelly Slab', cursive;
font-size: 1.2em;
}
.main {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
.main h2 {
font-size: 1.8rem;
}
.main p {
font-size: 1.3rem;
}
.main img {
min-width: auto;
width: auto;
max-height: 29em;
min-height: 25%;
}
.text_picture {
float:right;
width: auto;
margin: auto;
}
.thank_you {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
footer {
font-size: 1.2rem;
margin: auto;
text-align: center;
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Skeleton</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
</head>
<body>
<header>
<div class="top">
<h1>Arghhhh</h1>
<nav class="internal_nav">
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section class="main">
<article>
<h2>Lorem, ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolore vero natus libero labore! Voluptas, culpa cum animi, explicabo laudantium fuga rem hic fugiat deleniti eveniet ad dignissimos minus! Nisi cumque dolore illo corrupti quo recusandae possimus aliquam officiis blanditiis, inventore veritatis. Cum itaque molestiae iusto dolorem esse illo saepe ipsam dolor cupiditate neque velit, dolore error earum eveniet tempora!
</p>
<div id="text_picture_container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ab magni officiis eos rem in aperiam tenetur quidem maiores, tempore enim, id sapiente velit pariatur ducimus. Velit vero consequuntur possimus quam culpa voluptatum officia est voluptate eum, labore facilis assumenda rerum harum ipsam facere quas cupiditate. Itaque facilis voluptas cupiditate eos? Commodi odit tempore nihil blanditiis, excepturi quidem vero. Nam nesciunt corporis minima alias aperiam voluptate neque quidem consequatur ab sed, mollitia nulla labore expedita? Laboriosam atque error, similique temporibus eius, sunt quaerat nobis vero maxime corrupti quis ipsam. Aliquam rem id harum culpa nesciunt facere sit atque provident neque!
</p>
<div class="text_picture">
<figure>
<img src="images/wallpaper-364615676716148alamn2ffq.jpg" alt="lone tree in a field with a orange/magenta sunset in the background">
<br>
<figcaption>A lonely tree in the middle of a field, with a really colorful sunset background.
</figcaption>
</figure>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt earum assumenda praesentium dolor et veritatis libero. Eveniet quasi fugiat, consectetur error possimus natus? Quasi explicabo deserunt quisquam necessitatibus hic aspernatur totam tenetur eveniet accusamus! Voluptate reprehenderit sunt repellat aut adipisci temporibus provident vitae amet cum doloribus dolorum tempora, perferendis voluptas aperiam libero similique distinctio quam corrupti consequatur vero magnam commodi. Enim, consequuntur. Quod maiores laudantium nesciunt doloremque, voluptatem dolorum amet. Tempore, vel dignissimos, veniam magni recusandae saepe ab labore itaque eum officiis, quaerat quae eveniet? Placeat nemo aperiam similique earum, tempore dicta totam atque. Perspiciatis, aut. Ea distinctio iure minima, id doloremque quisquam quidem expedita nemo. Facere dignissimos, architecto similique repellendus aliquid dicta deserunt et esse voluptate nulla ipsum quod earum voluptas nobis consectetur expedita quas, non itaque. Optio incidunt dolor distinctio, ducimus beatae doloribus magni ut aliquam a facere laborum ipsam ratione voluptatem. Dolore modi error nemo impedit recusandae?
</p>
<div class="first_survey">
<form class="survey">
<fieldset>
<legend>Chose what impressed you the most:</legend>
<label for="style">The styling</label>
<input type="checkbox" id="style" name="survey_choice" value="style">
<label for="writing">The writing</label>
<input type="checkbox" id="writing" name="survey_choice" value="writing">
<label for="pictures">The pictures</label>
<input type="checkbox" id="writing" name="survey_choice" value="pictures">
<div class="button">
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
</section>
<div href="#" class="thank_you">
<h2>Thank you for taking your time to browse my webpage!
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quisquam commodi sapiente quos ut unde consectetur alias culpa veniam, quasi perspiciatis expedita esse accusantium quas enim quam soluta, quibusdam sit? Quisquam placeat, iure possimus cupiditate libero non esse quasi facere deserunt debitis delectus reiciendis aliquid magnam a blanditiis, eaque officia.
<p>
</div>
</article>
</body>
<footer>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, dolore?</h6>
</footer>
</html>
You can always use VH unit which stands for viewport width.
Responsive Text
However, I suggest using REM and EM units instead, of course, this depends on your needs.
REM and EM units
Feel free to read this article which explains this topic in depth.
CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units
Now, regarding responsive image sizing, you can simply add a class with these properties and set it to the image you want.
.responsive {
width: 100%;
height: auto;
}
As I said before, read the Medium article, you can use REM, EM, PX, % units on images as well.
How would I make the header full width? And I would like the content class to the right, and the skills class to the right 30% to 70%. If you are able to understand the issue I wasn't able to figure out please tell me what you did to get it to work. Thanks.
I couldn't find any info on how to make the header full width, and move the content to other spots...
* {
box-sizing: border-box;
overflow: hidden;
padding: 10px;
margin: 0px;
}
body {
background-image: url("coder.jpeg");
background-size: cover;
}
.wrapper {
display:grid;
grid-template-columns: 70% 30%;
grid-template-rows: ;
grid-gap: 10px;
}
.header {
background-color: rgba(153, 153, 153, 0.99);
text-align: center;
border-radius: 10px;
font-size: 20px;
}
.skills {
background-color: rgba(153, 153, 153, 0.99);
border-radius: 10px;
}
.content {
background-color: rgba(153, 153, 153, 0.99);
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cl32</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<header>
<h1>Cdad</h1>
</header>
</div>
<div class="skills">
<aside>
<h2>Skills</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla fuga asperiores iusto eveniet aliquid nobis aliquam ducimus, tempora consequatur neque earum molestiae unde porro, quis numquam error illum temporibus, incidunt autem. Temporibus maxime esse magnam inventore odit vero in quae sit quo laboriosam? Architecto saepe repudiandae ducimus possimus magni numquam?</p>
</aside>
</div>
<div class="content">
<h2>yuyuyggoggo</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum mollitia sunt at aliquid unde vel sapiente quas sequi repudiandae, quam facere inventore suscipit sed nam quae possimus reprehenderit doloremque. Reprehenderit nisi architecto vel molestiae placeat necessitatibus deleniti laborum facere unde itaque magnam amet ut aspernatur distinctio atque ad perspiciatis nam beatae fugiat illum error veritatis, cupiditate odit? Deserunt earum magni id animi, temporibus sit obcaecati ipsum. Blanditiis, expedita? Fugit dicta ex dignissimos, esse totam voluptas illo maxime minus quae nisi velit nemo sequi nulla et omnis deserunt nam sed ducimus. Minima animi dolor vitae architecto suscipit ipsa eaque autem incidunt.</p>
</div>
</div>
<!--warpper class ends-->
</body>
</html>
Don't know if I understand your question correctly but if you add grid-column: 1 / span 2;to your header class it will give you full width.
I have to design a "Rent A Flat" website as a school assignment using Dreamweaver and am having trouble finding my error. I added in a hover dropdown menu to a parallax design but it left all this white space next to the menu and put the image underneath the menu. Below is the code for my website. I don't know what to do anymore. I tried everything I could think of.
body, html{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight:400;
line-height:1.8em;
color:#666;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #06106E;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 80px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.dropdown:hover .dropdown-content {
display: inline-block;
}
.dropdown:hover .dropbtn {
background-color: #06106E;
}
.pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6{
position:relative;
opacity:0.70;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
/*
fixed = parallax
scroll = normal
*/
background-attachment:fixed;
}
.pimg1{
background-image:url('../Renting A House/Homepage/Image/pexels-photo-932095.jpeg');
min-height:100%;
}
.pimg2{
background-image:url('../Renting A House/Homepage/Image/agenda-appointment-business-1020323.jpg');
min-height:400px;
}
.pimg3{
background-image:url('../Renting A House/Homepage/Image/pexels-photo-1061576.jpeg');
min-height:400px;
}
.pimg4{
background-image:url('../Renting A House/Homepage/Image/Use instead of checkout.jpeg');
min-height:400px;
}
.pimg5{
background-image:url('../Renting A House/Homepage/Image/pexels-photo-276641.jpeg');
min-height:400px;
}
.pimg6{
background-image:url('../Renting A House/Homepage/Image/stairs-home-loft-lifestyle.jpg');
min-height:100%;
}
.section{
text-align:center;
padding:50px 80px;
}
.section-light{
background-color:#000040;
color:#ddd;
}
.section-dark{
background-color:#282e34;
color:#ddd;
}
.ptext{
position:absolute;
top:50%;
width:100%;
text-align:center;
color:#000;
font-size:27px;
letter-spacing:8px;
text-transform:uppercase;
}
.ptext .border{
background-color:#778899;
color:#000;
padding:20px;
}
.ptext .border.trans{
background-color:#C0C0C0;
}
#media(max-width:568px){
.pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6{
background-attachment:scroll;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Renting Your First Flat</title>
<link href="../Website Style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="../house-key.png">
<div>Icons made by Roundicons from www.flaticon.com is licensed by CC 3.0 BY</div>
</head>
<body>
<div class="dropdown">
<button class="dropbtn"><input type="image" width="30px" height="30px" src="../Burger Dropdown Icon Menu.png" class="burger-menu"/></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="pimg1">
<div class="ptext">
<span class="border">
Renting A Flat
</span>
</div>
</div>
<section class="section section-light">
<h2>Introduction?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eveniet dicta saepe mollitia nobis. Deleniti ratione dolor quas tempora quasi necessitatibus ipsa iusto voluptatibus sed veniam cum labore, excepturi reprehenderit odit accusamus dignissimos in modi culpa delectus, velit saepe repellat distinctio atque magnam quis. Accusantium enim voluptate quo delectus eveniet alias tempore temporibus maiores. Numquam, nostrum omnis vero dicta laboriosam ratione nisi pariatur veniam officiis quaerat dignissimos, sint cum obcaecati, sunt accusantium. Alias suscipit repellat mollitia, laboriosam, doloribus totam numquam sapiente quidem itaque eveniet iure sunt earum obcaecati vel! Vero quod unde officiis sit in facilis sed praesentium rem molestias.
</p>
<p>
About Us
</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
Money
</span>
</div>
</div>
<section class="section section-dark">
<h2>Rent, Afford to Leave, Buy Furniture, Insurance, Flatmate to Share Costs</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima explicabo perferendis, quo eaque facilis architecto aut qui esse, eveniet, magnam ratione voluptatum aspernatur. Facere nemo ut aut alias commodi consequuntur ipsa sed eveniet. Accusamus animi tempore obcaecati blanditiis veniam, quaerat perferendis inventore exercitationem expedita, dolorem dolores quod cupiditate laborum incidunt autem distinctio, quisquam labore explicabo delectus molestiae? Delectus aperiam quis quae at consequatur iusto corrupti! Voluptatibus, fuga. Fugiat, numquam, rerum! Porro aliquam temporibus adipisci facere harum labore.
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
The Ins And Outs
</span>
</div>
</div>
<section class="section section-dark">
<h2>What Do You Need To Know?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ab maiores, dicta porro, omnis commodi corrupti quisquam nobis odit amet provident in quos libero deserunt non aut nesciunt ducimus laboriosam architecto ipsam quod repellat, incidunt animi sapiente cumque. Cumque, tempora expedita ab laborum. Possimus voluptatem dolorum ea magni facere, quod, atque vitae! Nemo consequuntur laboriosam maiores soluta consequatur culpa nulla maxime impedit inventore laborum voluptatibus eveniet molestiae quaerat suscipit adipisci repudiandae voluptatem iusto deserunt error architecto, ipsam nihil accusantium, cumque est vero. Impedit facilis aperiam hic eius voluptate rem atque numquam consequuntur, earum suscipit vero asperiores voluptates doloremque, laudantium temporibus.
</p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border trans">
Availability
</span>
</div>
</div>
<section class="section section-dark">
<h2>What To Look For/Available Flats?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam quidem laudantium animi aut dolor distinctio cumque voluptate placeat iste esse eligendi, tempora accusantium repellat provident, mollitia cupiditate incidunt quasi perferendis alias laborum suscipit facere adipisci et facilis fugit. Quo sunt eos nam nulla nihil voluptates eius blanditiis consequuntur fuga, officia quaerat repellat, qui non repudiandae alias quod quis nostrum porro quia suscipit mollitia. Natus repudiandae fugiat sed enim vel repellat eligendi aperiam dolores necessitatibus suscipit iste dicta iusto dolorum quia, rerum, impedit, eum facilis? Quos vel consequuntur consectetur debitis, sed corporis quibusdam molestiae id quas. Dolore corporis aliquam a optio!
</p>
</section>
<div class="pimg5">
<div class="ptext">
<span class="border trans">
The Makings of a Flat
</span>
</div>
</div>
<section class="section section-dark">
<h2>Furnishing Your Flat?</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis beatae reprehenderit, voluptatibus molestias odio doloribus minima vitae amet temporibus ab voluptatum adipisci ut nemo at possimus voluptates quae sit ea accusantium quidem quibusdam velit error asperiores ipsam, quam. Quia, iure at, sequi sit earum vero cupiditate est hic laboriosam atque voluptatem tempora modi enim fugiat, esse dolorem incidunt deserunt quidem eveniet, odio omnis. Officia iusto quod, enim soluta eos optio commodi ab. Quasi accusamus porro explicabo, a ducimus, amet labore alias atque consequatur molestiae, eius temporibus adipisci assumenda voluptas minus perspiciatis? Id rem quisquam explicabo fuga esse ipsum provident quo!
</p>
</section>
<div class="pimg6">
<div class="ptext">
<span class="border">
Real Estate
</span>
</div>
</div>
<div>Icons made by Cole Bemis from www.flaticon.com is licensed by CC 3.0 BY</div>
</body>
</html>
here is my try I am not sure is that what you want. Any more changes let me know. I have moved menubox on top of the background image.
I wrapped the .dropdown and .pimg1 with a div
<div class="header-wrapper">
<div class="dropdown">
<button class="dropbtn"><input type="image" width="30px" height="30px" src="http://placeholder.pics/svg/30" class="burger-menu"/></button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class="pimg1">
<div class="ptext">
<span class="border">
Renting A Flat
</span>
</div>
</div>
</div>
css
.header-wrapper{
clear: both;
position: relative;
}
.dropdown {
position: absolute;
display: inline-block;
z-index: 2;
}
live link: https://codepen.io/anon/pen/QxLReY?editors=1100