Hello! Can someone please help me to make this site responsive, everything is a mess when I try to do something. I thing it has something to do with the background, but I am not sure.
HTML:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bergen by bike</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&family=Roboto:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<section class="overlay">
<div class="background">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
<a href="bergenbybike.html" class="active"><img src="../Photos/logo.png" width="102" height="90" alt="logo"/></a>
<!-- Navigation links (hidden by default) -->
<div id="myLinks">
<a href="fana.html">FANA</a>
<a href="laksevag.html">LAKSEVÅG</a>
<a href="fyllingsdal.html">FYLLINGSDAL</a>
<a href="landas.html">LANDÅS</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<script>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
<hr style="border: 0,5px solid #000000;" />
<div class="header">
<p>Welcome to Bergen by Bike!</p>
</div>
<aside class="asideright">
<img src="../Photos/kartalle.png" alt="map" class="responsiveimage"/>
</aside>
<aside class="asideleft">
<p>
Bergen is a wonderful city, especially if you are interested in the norwegian nature. As a tourist, or even a local, taking your bike on a ride is one of the best ways to experience the beautiful nature. Here you can look at four different routes to take, with different level of difficulties. Remember to bring your helmet, and read our good tips for a perfect ride in Bergen!
</p>
</aside>
<div class="rowimage">
<div class="columnimages">
<img src="../Photos/cycling-family-sports-tracker kopi.jpg" alt="family" class="roundimages">
</div>
<div class="columnimages">
<img src="../Photos/roundimage3.jpg" alt="family" class="roundimages">
</div>
<div class="columnimages">
<img src="../Photos/roundimage2.jpg" alt="family" class="roundimages">
</div>
<div class="columnimages">
<img src="../Photos/roundimage4.jpg" alt="family" class="roundimages">
</div>
</div>
<section class="section1">
<h1>TIPS FOR YOUR TRIP</h1>
<hr style="border: 0,5px solid #000000; width:50%" />
<h2><img src="../Photos/bicycle.png" width="150" height="100" alt="Bicycle"/></h2>
<div class="row">
<div class="column1">
<p>
<h3>HELMET </h3>
This is ofcourse the most essential equipment to use. Remember that it’s not always an easy road to ride. Sometimes it can be slippery, or muddy - especially in Bergen where it rains a lot. And also! Wearing a helmet is mandatory.
<br><br>
<h3>CHECK YOUR BIKE!</h3>
Before heading out for a long trip, remember to check that everything on your bike is working. The gear, the breaks, the chains and lights.
<br><br>
<h3>WATER AND ENERGY </h3>
A long trip without any water can become much more challenging than necessary. Remember that either its a workout trip, or a sightseeing tour you need to refill.
<br><br>
</p>
</div>
<p>
<div class="column2">
<h3>MAP </h3>
If you’re not familiar with the area, make sure you have a GPS or a map to guide you. Remember that the weather in Bergen is unpredictable and it rains alot, so make sure you get home both safely and in time.
<br><br>
<h3>REGULATIONS </h3>
If you’re not from the area, or the country. Make sure you understand the rules. Both for motorists and pedestrians.
<br><br>
<h3>FOR THE LONG ROADS</h3>
If you’re looking to go for the long roads, remember to bring an extra bag with essentials. Extra clothing, food, spare parts and equipment for your bike.
<br><br>
</div>
</p>
</div>
</section>
</div>
<footer>Copyright 2020. HIS Design</footer>
</section>
</body>
</html>
CSS:
@charset "UTF-8";
body {
background: url("../Photos/019solistenbikecitizens7675.jpg");
background-size: cover;
background-attachment:scroll;
font-family: Arial;
height: 100%;
color: #232323;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
h1 {
text-align: center;
font-size: xx-large;
text-decoration: none;
line-height: 4px;
}
footer {
font-family: 'Roboto', sans-serif;
text-align: center;
padding-top: 20px;
height: 30px;
width: 100%;
background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.73) 54.20%,rgba(255,255,255,1.00) 96.27%);
background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.73) 54.20%,rgba(255,255,255,1.00) 96.27%);
background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.73) 54.20%,rgba(255,255,255,1.00) 96.27%);
background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 0%,rgba(255,255,255,0.73) 54.20%,rgba(255,255,255,1.00) 96.27%);
}
.asideright {
width: 95%;
margin-top: 40px;
}
.asideleft {
width: 35%;
text-align: center;
margin-left: 120px;
font-size: large;
margin-top: 180px;
padding-bottom: 50px;
font-family: 'Roboto', sans-serif;
}
.section1 {
margin-top: 100px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 20px;
font-family: 'Courier Prime', monospace;
}
.column1 {
float: left;
width: 40%;
margin-left: 60px;
margin-top: 20px;
text-align: center;
font-family: 'Roboto', sans-serif;
}
.column2 {
float:right;
width: 40%;
margin-right: 60px;
margin-top: 20px;
text-align: center;
font-family: 'Roboto', sans-serif;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.responsiveimage {
width: 35%;
height: auto;
float: right;
margin-right: 80px;
margin-top: 20px;
}
.background {
background-color: #FFFFFF;
-webkit-box-shadow: 1px 1px 20px #706F6F;
box-shadow: 1px 1px 20px #706F6F;
padding-bottom: 100px;
margin: 40px auto 0 auto;
max-width: 980px;
}
.topnav {
overflow: hidden;
background-color: none;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: black;
padding: 14px 16px;
text-decoration: none;
font-family: 'Courier Prime', monospace;
font-size: 25px;
display: block;
}
.topnav a.icon {
background: none;
display: block;
position: absolute;
font-size: 40px;
right: 50px;
top: 30px;
}
.topnav a:hover {
background-color: none;
color: #97CDAB;
}
.active {
background-color: none;
color: white;
margin-left: 30px;
}
h2 {
text-align: center;
}
h3 {
color:#9DE3B7;
}
.header {
margin-top: 50px;
text-align: center;
font-family: 'Courier Prime', monospace;
font-size: 30px;
}
.roundimages {
border-radius: 50%;
width: 150px;
height: auto;
}
.rowimage {
margin-top: 100px;
display: flex;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
.columnimages {
flex: 25%;
padding: 1px;
}
/*tablet size*/
@media (min-width: 401px) and (max-width: 768px){
.background {
background-color: #FFFFFF;
-webkit-box-shadow: 1px 1px 20px #706F6F;
box-shadow: 1px 1px 20px #706F6F;
padding-bottom: 100px;
width: 100%;
}
.asideright {
width: 100%;
text-align: center;
}
.asideleft {
text-align: center;
font-size: large;
font-family: 'Roboto', sans-serif;
}
.responsiveimage {
width: 100%;
height: auto;
text-align: center;
}
.columnimages {
width: 100%;
}
.column1 {
width: 100%;
}
}
/*Mobile view*/
@media (max-width: 400px){
}