*{ padding: 0; margin: 0; border: 0; outline: 0; } header{ grid-column: 1/2; grid-row: 1/2; background-color: hsl(0, 0%, 0%); } /* nav */ .menu{ color: wheat; padding: 1rem; text-decoration: none; font-weight: bold; position: sticky; } .dropdown { position: sticky; display: inline-block; } .dropdown-content { display: none; top: 0; position: sticky; background-color:#504e4e; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: inline-grid; background-color:#504e4e; border: white solid .2px; border-radius: 30px; padding: .5rem; } nav{ grid-column: 1/2; grid-row: 2/3; background-color: hsl(0, 0%, 0%); top: 0; position: sticky; } nav a{ color: black; padding: 1.5rem; font-weight: bold; text-decoration: none; align-items: center; color: wheat; } main{ grid-column: 1/2; grid-row: 3/4; background-color: rgb(66, 66, 66); } /* bilder */ .logo{ padding: 1rem; font-size: 2rem; font-weight: bold; font-style: italic; color: wheat; text-decoration: none; } .bild { width: 30rem; height: 25rem; border-radius: 30px; } .shelby{ position: static; width: 50rem; height: 25rem; border-radius: 30px; } .merca{ width: 25rem; height: 35rem; border-radius: 30px; } .items{ padding: 4rem; } .conetent{ display: grid; min-height: 100vh; grid-template-columns:auto; grid-template-rows: 6rem 3rem auto 6rem; } .container { display: flex; flex-flow: row wrap; background-color: rgb(66, 66, 66); justify-content: center; text-align: center; } .container-extra{ display: flex; flex-flow: row wrap; background-color: rgb(66, 66, 66); justify-content:stretch; } .rvideo{ margin: auto; margin-left: 2rem; position: relative; border-radius: 30px; } .MinBild{ height: 30rem; width: 30rem; } /* text */ .info{ text-align: center; } .title{ position: static; text-align: center; background-color: rgb(66, 66, 66); color: black; } footer{ grid-column: 1/2; grid-row: 4/5; background-color: #201f1f; width: 100%; height: 8rem; } .foot{ margin: auto; margin-top: 2rem; padding:10px; position: static; height: 1.5rem; border: solid 3px black; float: center; background-color: rgb(224, 173, 173); } .cookies{ margin: auto; font-size: large; position: relative; text-align: center; font-weight: bold; } /* kontakt hemsida */ input[type=text], select, textarea { width: 100%; height: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 10px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; } input[type=submit] { background-color: #04AA6D; color: white; padding: 10px 15px; border: none; border-radius: 10px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } .kontakt { border-radius: 5px; background-color: #f2f2f2; padding: 15px; } /* Mobile view */ @media screen and (max-width: 600px) { header{ width: 100%; } span{ width: 100%; } .dropdown-content{ width: 100%; } nav{ width: 100%; } main{ width: 100%; } body{ width: 100%; } .shelby{ width: 100%; } .merca{ width: 100%; } .bild{ width: 100%; padding: 0; } .conetent{ width: 100%; } .container{ width: 100%; } .container-extra{ width: 100%; } .items{ width: 100%; padding: 0; } .rvideo{ width: 100%; margin: 0; border-radius: 30px; } .slidershow{ width: 100%; padding: 0; } .middle{ width: 100%; } .navigation{ width: 100%; } .bar{ width: 100%; } .bar:hover{ width: 100%; } }