I am a newcomer to web development and currently working on a website for a massage therapist using bootstrap. However, I am facing an issue where my CSS styles are not displaying correctly on mobile devices. The backgrounds and bootstrap navbar disappear, and even a PNG file used for a large logo does not show up on mobile. I have tried using Chrome on mobile to troubleshoot this.
Below is the HTML code for the page:
<!DOCTYPE html>
<html lang="hu de">
<head>
<meta charset="utf-8">
<title>Massage for You</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--CSS Stylesheets-->
<link rel="stylesheet" href="css/styles.css">
...
Below is the CSS stylesheet:
body, html {
height: 100%;
margin: 0;
background-color: #fbf0f0;
}
/*Navbar section styling navbar items and language switcher.*/
.navbar {
background-color: #7c7575;
opacity: 0.8;
}
.nav-item {
padding: 0 10px;
...