I am new to CSS and am looking for some help with the following.
I have an HTML page with the below structure at the beginning of its body. Inside the body I have a form with the class "bgBanner".
The idea with this is to set a background image only for the form but not for the rest of the body.
When viewing this on the desktop everything looks ok but when viewing it on a mobile / smartphone everything gets cut off at the bottom edge of the screen and I don't get a scrollbar there.
Since I am new to this I guess one of my styles might overwrite another or I am using "overflow" the wrong way. Can someone help me with this ?
My HTML:
<!-- ... -->
<body>
<div class="wrapper">
<?php require_once("includes/menu.php"); ?>
<section id="main">
<form id="frmLogin" class="bgBanner">
<!-- ... -->
My CSS:
html, body {
height: 100%;
overflow: auto;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
form, #main {
height: 100%;
overflow: auto;
}
#main {
border: 1px solid #ccc;
border-radius: 5px;
margin-left: 8.33%; /* col-1 */
margin-right: 8.33%; /* col-1 */
overflow: hidden;
}
.bgBanner {
background-image: url('../images/banner-M.jpg');
background-position: left top;
background-repeat: no-repeat;
background-size: cover;
min-height: 600px;
}
Many thanks for any help with this, Mike
Aucun commentaire:
Enregistrer un commentaire