Wenn Sie auf kleinere Bildschirme schrumpfen ⇐ HTML

[Anonymous]

Ich erstelle eine reaktionsschnelle Website. Wenn ich auf Bildschirme unter 650px schrumpft, möchte ich das Menü ändern, um auf die kleinere Bildschirmgröße zu reagieren. Ich kann das neue Menü jedoch nicht richtig ausrichten. Es gibt einen Rand von 20-30px, der das Menü nach rechts drückt. Abschnitt: < /p>

Code: Select all

[i][/i]
+46708638640



[i][/i]
[email protected]





[url=#][/url]
[i]



[list]
[*]
[url=#]ABOUT[/url]

[*]
[url=#]CLIENTS[/url]

[url=#]CONTACT[/url]

[/list]
















< /code>
-------- CSS -------/* ------------------------------------BASE ------------------------------------ */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
/*background: linear-gradient(to top, #830071, #8e8eff);*/
cursor: pointer;
}

body {
margin: 0;
/* If the Inter font is not available through Google, the sans-serif font is our default */
font-family: "Inter", sans-serif;
height: 2000px;
padding-top: 90px;
border: 2px solid yellow
}

title {
}

header {
position: fixed;
top: 0;
width: 100%;
border: 2px solid pink;
}

/* ---------------------------------------- BARS --------------------------------- */

.top-bar {
opacity: 100%;
background-color: #333;
height: 35px;
display: flex;
align-items: center;
justify-content: end;
border: 2px solid red
}

.top-bar__content {
color: #c6d2dd;
opacity: 100%;
display: flex;
align-items: center;
column-gap: 10px;
font-weight: 300;
margin-right: 180px;
}

.bottom-bar {
/* Added a slightly blue background on the nav to create a smaller contrast
between the body background, #e8f0f7 hex creates a better experience for the user (rather than a white background*/
background-color: #f7e8ee91;
box-shadow: 2px 2px 20px black;
height: 70px;
border: 2px solid red
}

.bottom-bar__content {
display: flex;
align-items: center;
margin: 0 auto;
max-width:90%;
border: 2px solid red
}

.bars {

}

/* ---------------------------------- ICONS/BUTTONS ------------------------------ */

.nav__btn {
color: white;
background-color: #8e8eff;
border-radius: 1000px;
padding: 8px 20px;
font-weight: 500px;
}

.nav__btn:hover {
background-color: #5647f8;
color: white;
}

.icon {
opacity: 70%;
margin-left: 3px;
padding: 0px;
}

/* -------------------------------------- CONTAINER ------------------------------ */

/* ------------------------------------ID SELECTORS ------------------------------- */

/* ---------------------------------------- MEDIA --------------------------------- */

@media (max-width: 650px) {
.nav {
position: fixed;
top: 110px;
background-color: #f7e8ee91;
box-shadow: 2px 2px 20px black;
min-width: 650px;
}

.nav__list {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 20px;
width: cover;
}

.bottom-bar {
margin-left: 0px;
}

#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -2;
opacity: 30%;
}

.logo {
}

.logo__img {
width: 160px;
opacity: 100%;
border: 2px solid green;
}

/* ------------------------------------------ LINKS ----------------------------------- */

a {
color: inherit;
text-decoration: none;
}

.online__links{

}

/* ------------------------------------------- NAV ------------------------------------ */

ul {
list-style: none;
}

.nav {
width:100%;
border: 2px solid blue;
}

.nav__list {
display: flex;
justify-content: end;
column-gap: 50px;
border: 2px solid blue;
}

.nav__link {
color: #333;
border: 2px solid blue;
}

.nav__btn {
transition: all 0.5s;
color: white;
}

.nav__item:hover,
.nav__btn:hover .nav__item:focus .nav__btn:focus {
color: #830071;
text-shadow: 1px 1px 1px rgb(194, 194, 194);
transition: 0.2s;
}

/* ---------------------------------------- TYPOGRAPHY -------------------------------- */

@font-face {
font-family: Gotham;
src: url(GothamNarrow-Bold.otf);
}

li,
ul,
a {
color: rgb(39, 44, 51);
text-decoration: none;
padding: 10px;
}

li:hover,
ul:hover,
a:hover,
.icon:hover {
color: #830071;
}

h1 {
font-size: 2em;
text-orientation: upright;
writing-mode: vertical-lr;
letter-spacing:  -10px;

}

.online__links{
display: flex;
flex-direction: column;
align-items: center;
row-gap: 40px;
width: 50px;
}

.social{
display: flex;
flex-direction: column;
row-gap: 20px;
}

/* ------------------------------------------ FOOTER ---------------------------------- */

footer {
text-align: center;
padding: 10px;
background: #333;
color: #fff;
position: relative;
bottom: 0;
width: 100%;
}

/*-------------------------------------------- KEYFRAMES ---------------------------------*/

/*-------------------------------------------- HAMBURGER ---------------------------------*/

.hamburger {
display: none;
}

.bar {
}

Ich habe versucht, Ränder zu entfernen, aber nichts scheint zu funktionieren