css mobile
This commit is contained in:
@@ -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()">
|
|
||||||
☰
|
|
||||||
</a>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<iframe width="420" height="315"
|
<iframe width="420" height="315"
|
||||||
|
|||||||
@@ -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: 80%;
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user