Hello! I need help with making my website responsive to mobile devices. My main issue is my backgrounds. I have two backgrounds. My main is one with an image, and then I have a normal white background thats just behind my text. The problem is that the white background disappears when I change the view to mobile. I dont know why. Please help!
1 Like
Thereâs no way we can know why either without being able to see your code.
Here is my HTML code:
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bergen by bike</title>
<link href="testings.css" rel="stylesheet" type="text/css">
</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="index.html" class="active"><img src="../../../MA07-informationdesign/Nettside/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;">
<aside class="asideright">
<img src="../../../MA07-informationdesign/Nettside/Map-bruk.png" width="387,7" height="548,5" alt="" 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>
<section class="section1">
<h1>TIPS FOR YOUR TRIP</h1>
<hr style="border: 0,5px solid #000000; width:50%">
<h2><img src="../../../MA07-informationdesign/Nettside/bicycle.png" width="150" height="100" alt="Bicycle"></h2>
<div class="row">
<div class="column1">
<p>
</p><h3>1. 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>2. 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>3. 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></p>
</div>
<p>
</p><div class="column2">
<h3>4. 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>5. 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>6. 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></p>
</div>
</section>
</div>
<footer>Copyright 2020. HIS Design</footer>
</section>
</body></html>
And here is the CSS:
@charset "UTF-8";
body {
background: url("../../../MA07-informationdesign/Nettside/bergen.jpg");
background-size: cover;
background-attachment: fixed;
font-family: Arial;
height: 100%;
color: #232323;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
background: rgba(151,205,171,0.82);
}
h1 {
text-align: center;
font-size: xx-large;
text-decoration: none;
line-height: 4px;
}
footer {
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: 150px;
padding-bottom: 50px;
}
.section1 {
margin-top: 150px;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 20px;
}
.column1 {
float: left;
width: 40%;
margin-left: 60px;
margin-top: 20px;
text-align: center;
}
.column2 {
float:right;
width: 40%;
margin-right: 60px;
margin-top: 20px;
text-align: center;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.responsiveimage {
width: 30%;
height: auto;
float: right;
margin-right: 80px;
margin-top: 20px;
}
.background {
background-color: #FFFFFF;
margin-left: 200px;
margin-right: 200px;
-webkit-box-shadow: 1px 1px 20px #706F6F;
box-shadow: 1px 1px 20px #706F6F;
margin-top: 40px;
padding-bottom: 100px;
}
.topnav {
overflow: hidden;
background-color: none;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: black;
padding: 14px 16px;
text-decoration: none;
font-family: "All Round Gothic Book";
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;
}
The white background that I am talking about is in the class â.backgroundâ
If I understand the issue correctly. It is the left/right margin on .background that is pushing on the section1 section.
.background {
background-color: #ffffff;
// margin-left: 200px;
// margin-right: 200px;
-webkit-box-shadow: 1px 1px 20px #706f6f;
box-shadow: 1px 1px 20px #706f6f;
// margin-top: 40px;
padding-bottom: 100px;
margin: 40px auto 0 auto;
/* how ever wide you want it */
max-width: 980px;
}
1 Like
By âchange the view to mobileâ Iâm assuming you mean narrow the browser width. The reason the white background is disappearing is because you have side margins of 200px on div.background, so when you narrow the browser the white background gradually gets smaller because the side margins are taking up so much space.
1 Like
Thank you so much guys! This helped so much! I am new to this and it means alot to get help around here.
Youâre welcome. My suggestion would be to always start with your browser as narrow as you can make it and style the page so it looks good at the narrow width. This will be your base CSS. Then after you have the narrow styling set, widen your browser until you have enough room to rearrange things for a wider view port and make that your first CSS break point. This is commonly referred to as a âmobile firstâ approach.
1 Like
I will definitely do that from now on, as I have struggled many times with this. Thank you for the tips.
While Iâm still here, do you also know how to make the text in â.asideleftâ go underneath the image in â.asiderightâ when I make the browser smaller (responsive). Because right now it kind of wrap around the image, and it doesnât look good.
I will give you a hint. You definitely do not want to float the image.