css mobile

This commit is contained in:
2026-02-05 23:29:18 +01:00
parent 72be3434fc
commit b4f66aa635
2 changed files with 22 additions and 20 deletions

View File

@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScottGPT</title> <title>ScottGPT</title>
<link rel="icon" type="image/x-icon" href="/resources/favicon.ico"> <link rel="icon" type="image/x-icon" href="/resources/favicon.ico">
<link rel="stylesheet" href="/resources/style.css"> <link rel="stylesheet" href="/resources/style.css">
@@ -14,15 +15,9 @@
<header class="navbar"> <header class="navbar">
<a href="https://sc0tt.org/" style="float: left" target="_blank">Sc0tt főoldal</a> <a href="https://sc0tt.org/" style="float: left" target="_blank">Sc0tt főoldal</a>
<a href="/about" style="float: left">About</a> <a href="/about" style="float: left">About</a>
<button onclick="genZ()" style="float: left;">Gen Z compatible site</button> <button onclick="genZ()" style="float: left;" class="funny">Gen Z compatible site</button>
<img src="resources/logo.png" alt=logo" style="float: right;"> <img src="resources/logo.png" alt=logo" class="logo" style="float: right;">
<a href="javascript:void(0);"
class="icon"
onclick="toggleMenu()">
&#9776;
</a>
</header> </header>
<iframe width="420" height="315" <iframe width="420" height="315"

View File

@@ -2,6 +2,8 @@ body {
background: #212121; background: #212121;
color: white; color: white;
font-family: Roboto, sans-serif; font-family: Roboto, sans-serif;
max-width: 100%;
overflow-x: hidden;
} }
.about-content { .about-content {
@@ -21,17 +23,15 @@ body {
} }
.main-content { .main-content {
/*
display: flex;
margin: auto;
text-align: center;
box-sizing: border-box;*/
margin-top: 5%; margin-top: 5%;
margin-bottom: 0; margin-bottom: 0;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
height: 80vh; height: 80vh;
overflow-y: scroll; overflow-y: scroll;
max-width: 100%;
overflow-x: hidden;
flex-grow: 8; flex-grow: 8;
background: red; background: red;
@@ -63,7 +63,6 @@ body {
} }
.messages { .messages {
margin-bottom: 10%;
position: relative; position: relative;
display: flex; display: flex;
margin: 5px auto 0px auto; margin: 5px auto 0px auto;
@@ -121,12 +120,7 @@ body {
background: #323232; background: #323232;
display: flex; display: flex;
margin: auto; margin: auto;
@media (max-width: 600px) {
width: 100%;
}
@media (min-width: 600px) {
width: 80%; width: 80%;
}
padding: 10px 10px; padding: 10px 10px;
border-radius: 25px; border-radius: 25px;
@@ -185,6 +179,19 @@ footer {
background-color: #545454; background-color: #545454;
} }
@media (max-width: 767px) {
.messages {
width: 100%;
}
.message {
width: 80%;
}
.funny {
display: none;
}
}
.navbar a.icon { .navbar a.icon {
display: none; display: none;
} }