CSS Come rendo una pagina web responsive?

Ordina per data Ordina commenti per reazioni
S

StoClacson

Utente Bronze
16 Febbraio 2020
9
3
1
20
Ultima modifica da un moderatore:
Premetto che ho studiato tutto in vari siti online, non in italiano, non avendo la disponibilità di acquistare/frequentare corsi riguardanti il tema.
Ho provato a creare una mia pagina web per gioco ma tuttavia c'è una "lacuna" che non riesco a recuperare.
Mi spiego meglio e vi mostro.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>Title</title>
</head>
<body>
<div class="topbar">
<ul>
<div class="logo">
<a title="Home" href="Index.html"><img src="Images/Logo.png" alt="Logo"></a>
</div>
<li title="Page1"><a href="Page1/Index.html">Page 1</a></li>
<li title="Page2"><a href="Page2/Index.html">Page 2</a></li>
<li title="Page3"><a href="Page3/Index.html">Page 3</a></li>
<li title="Page4"><a href="Page4/Index.html">Page 4</a></li>
<li title="Page5"><a href="Page5/Index.html">Page 5</a></li>
<li title="Page6"><a href="Page6/Index.html">Page 6</a></li>
</ul>
<div class="search">
<form>
<input type="text" placeholder="Search...">
</form>
</div>
</div>
<div class="main">
<div class="classRight">
<div class="subclassRight">
<h1>What is Lorem Ipsum?</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
<div class="buttonRight">
<a class="button" href="../Page1/SubPage1/Index.html"><span>Click me</span></a>
</div>
</div>
<div class="codeRight">
<h3>HTML example:</h3>
<div class="codeRightIn">
<span>&nbsp&#60!DOCTYPE html></span>
<br>
<span>&nbsp&#60html></span>
<br>
<span>&nbsp&#60title><span style="color: #999999;">HTML tutorial</span>&#60/title></span>
<br>
<span>&nbsp&#60body></span>
<br>
<br>
<span>&nbsp&#60h1><span style="color: #999999;">This is a heading.</span>&#60/h1></span>
<br>
<span>&nbsp&#60p><span style="color: #999999;">This is a paragraph.</span>&#60/p></span>
<br>
<br>
<span>&nbsp&#60/body></span>
<br>
<span>&nbsp&#60/html></span>
</div>
</div>
</div>
<div class="divLeft">
<div class="divLeftIn">
<h3>CSS example:</h3>
<div class="codeLeftIn">
<font>&nbspbody &nbsp{</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspbackground-color</span><font id="boldFont">:</font> <i>&nbspred</i><font id="boldFont">;</font>
<br>
<font>&nbsp}</font>
<br>
<br>
<font>&nbsph1 &nbsp{</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspcolor</span><font id="boldFont">:</font> <i>&nbspred</i><font id="boldFont">;</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbsptext-align</span><font id="boldFont">:</font> <i>&nbspcenter</i><font id="boldFont">;</font>
<br>
<font>&nbsp}</font>
<br>
<br>
<font>&nbspp &nbsp{</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspfont-family</span><font id="boldFont">:</font> <i>&nbspUbuntu</i><font id="boldFont">;</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspfont-size</span><font id="boldFont">:</font> <i>&nbsp20px</i><font id="boldFont">;</font>
<br>
<font>&nbsp}</font>
</div>
</div>
<div class="classLeft">
<h1>What is Lorem Ipsum?</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
<div class="buttonLeft">
<a class="button" href="../Page2/SubPage2/Index.html"><span>Click me</span></a>
</div>
</div>
</div>
</div>
</body>
</html>

*, *::after {
box-sizing: inherit;
outline: none;
}
html {
font-size: 100%;
box-sizing: border-box;
}
body {
background-color: #000000;
color: #bbbbbb;
margin: 0;
padding: 0;
}
topbar {
display: flex;
background-color: #0e0e0e;
box-shadow: 0px 5px 15px #000000;
top: 0;
}
.logo {
margin-left: 60px;
background-color: #1b1b1b;
box-shadow: 0px 0px 1px grey;
box-shadow: 0px 5px 15px #000000 ;
margin-right: 40px;
}
.logo a {
float: left;
}
.logo a img {
display: block;
margin-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
.topbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
width: 100%;
display: flex;
justify-content: center;
}
.topbar li {
float: left;
}
.topbar li a {
display: block;
text-decoration: none;
text-align: center;
color: #bbbbbb;
padding: 25px;
font-weight: bold;
}
.topbar a:hover {
color: #da0e1e;
}
.topbar .search {
margin-right: 100px;
float: right;
}
.topbar input[type=text] {
float: right;
padding: 25px;
margin-top: 2px;
width: 100px;
color: #646464;
background-color: #272727;
border-radius: 15px;
border-style: none;
transition: width 0.2s ease-out;
}
.topbar input[type=text]:focus {
width: 160px;
color: #ffffff;
}
.main {
font-family: 'Ubuntu', sans-serif;
background-color: #1b1b1b;
color: #bbbbbb;
margin-top: 75px;
}
.classRight {
display: flex;
justify-content: center;
padding-bottom: 50px;
}
.subclassRight {
margin-top: 60px;
float: left;
margin-left: 50px;
text-align: center;
line-height: 0.5;
}
.subclassRight h1 {
color: #da0e1e;
font-size: 80px;
}
.subclassRight h2 {
font-size: 25px;
text-align: center;
}
.codeRight {
float: right;
margin-left: 300px;
margin-top: 50px;
background-color: #101010;
padding: 20px;
padding-bottom: 60px;
border-radius: 20px;
}
.codeRight h3 {
font-size: 25px;
}
.codeRightIn {
background-color: #151515;
padding: 10px;
padding-right: 180px;
border-left: 3px solid grey;
border-radius: 30px;
}
.codeRightIn span {
color: #da0e1e;
line-height: 1.5;
}
.divLeft {
display: flex;
justify-content: center;
background-color: #101010;
padding-bottom: 30px;
}
.divLeft:hover {
background-color: #050505;
}
.classLeft {
margin-top: 80px;
float: right;
margin-left: 30px;
text-align: center;
line-height: 0.5;
}
.classLeft h1 {
color: #da0e1e;
font-size: 80px;
}
.codeLeft {
float: left;
margin-right: 200px;
margin-top: 50px;
background-color: #202020;
padding: 20px;
padding-bottom: 40px;
border-radius: 20px;
}
.codeLeft h3 {
font-size: 25px;
}
.codeLeftIn {
background-color: #101010;
padding: 10px;
padding-right: 210px;
border-left: 3px solid grey;
border-radius: 30px;
}
.codeLeftIn span {
color: #da0e1e;
line-height: 1.5;
}
.codeLeftIn font {
color: #bbbbbb;
line-height: 1.5;
}
.codeLeftIn i {
font-style: normal;
color: orange;
line-height: 1.5;
}
#boldFont {
font-weight: bold;
}
.buttonRight {
border-radius: 100px;
background-color: #101010;
border: 1px solid gray;
text-align: center;
padding: 20px;
width: 190px;
margin-left: 110px;
}
.buttonRight a {
color: #da0e1e;
}
.buttonRight span {
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonRight span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
color: #da0e1e;
}
.buttonRight:hover span {
padding-right: 25px;
color: orange;
}
.buttonRight:hover span:after {
opacity: 1;
right: 0;
}
.buttonLeft {
border-radius: 100px;
background-color: #101010;
border: 1px solid gray;
text-align: center;
padding: 20px;
width: 190px;
margin-left: 110px;
}
.buttonLeft a {
color: #da0e1e;
}
.buttonLeft span {
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonLeft span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
color: #da0e1e;
}
.buttonLeft :hover span {
padding-right: 25px;
color: orange;
}
.buttonLeft :hover span:after {
opacity: 1;
right: 0;
}

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net jsfiddle.net

Quando in pratica provo a ridimensionare il browser (non a schermo intero) i contenuti della pagina vengono "nascosti", oppure quando provo ad ingrandire/diminuire lo zoom della pagina (CTRL + rotella del mouse) questi tendono a compenetrarsi.
Da totale ignorante in materia, c'è qualcosa che manca/dovrei aggiustare/dovrei ancora inserire?
Sicuramente non mi sarò espresso bene ma spero abbiate capito, grazie in anticipo.
 
Dai un'occhiata a Bootstrap! Ti si aprira' un mondo :D
Inoltre un consiglio molto rapido: per far si' che non ti si sovrappongano gli elementi, non lavorare con dimensioni fisse, ma in percentuale! (Es. width=190px NO , width=10% SI )
Ovviamente tutto e' relativo, ma ti salvera' spesso la vita questa cosa
 
StoClacson ha detto:
Premetto che ho studiato tutto in vari siti online, non in italiano, non avendo la disponibilità di acquistare/frequentare corsi riguardanti il tema.
Ho provato a creare una mia pagina web per gioco ma tuttavia c'è una "lacuna" che non riesco a recuperare.
Mi spiego meglio e vi mostro.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>Title</title>
</head>
<body>
<div class="topbar">
<ul>
<div class="logo">
<a title="Home" href="Index.html"><img src="Images/Logo.png" alt="Logo"></a>
</div>
<li title="Page1"><a href="Page1/Index.html">Page 1</a></li>
<li title="Page2"><a href="Page2/Index.html">Page 2</a></li>
<li title="Page3"><a href="Page3/Index.html">Page 3</a></li>
<li title="Page4"><a href="Page4/Index.html">Page 4</a></li>
<li title="Page5"><a href="Page5/Index.html">Page 5</a></li>
<li title="Page6"><a href="Page6/Index.html">Page 6</a></li>
</ul>
<div class="search">
<form>
<input type="text" placeholder="Search...">
</form>
</div>
</div>
<div class="main">
<div class="classRight">
<div class="subclassRight">
<h1>What is Lorem Ipsum?</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
<div class="buttonRight">
<a class="button" href="../Page1/SubPage1/Index.html"><span>Click me</span></a>
</div>
</div>
<div class="codeRight">
<h3>HTML example:</h3>
<div class="codeRightIn">
<span>&nbsp&#60!DOCTYPE html></span>
<br>
<span>&nbsp&#60html></span>
<br>
<span>&nbsp&#60title><span style="color: #999999;">HTML tutorial</span>&#60/title></span>
<br>
<span>&nbsp&#60body></span>
<br>
<br>
<span>&nbsp&#60h1><span style="color: #999999;">This is a heading.</span>&#60/h1></span>
<br>
<span>&nbsp&#60p><span style="color: #999999;">This is a paragraph.</span>&#60/p></span>
<br>
<br>
<span>&nbsp&#60/body></span>
<br>
<span>&nbsp&#60/html></span>
</div>
</div>
</div>
<div class="divLeft">
<div class="divLeftIn">
<h3>CSS example:</h3>
<div class="codeLeftIn">
<font>&nbspbody &nbsp{</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspbackground-color</span><font id="boldFont">:</font> <i>&nbspred</i><font id="boldFont">;</font>
<br>
<font>&nbsp}</font>
<br>
<br>
<font>&nbsph1 &nbsp{</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspcolor</span><font id="boldFont">:</font> <i>&nbspred</i><font id="boldFont">;</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbsptext-align</span><font id="boldFont">:</font> <i>&nbspcenter</i><font id="boldFont">;</font>
<br>
<font>&nbsp}</font>
<br>
<br>
<font>&nbspp &nbsp{</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspfont-family</span><font id="boldFont">:</font> <i>&nbspUbuntu</i><font id="boldFont">;</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspfont-size</span><font id="boldFont">:</font> <i>&nbsp20px</i><font id="boldFont">;</font>
<br>
<font>&nbsp}</font>
</div>
</div>
<div class="classLeft">
<h1>What is Lorem Ipsum?</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
<div class="buttonLeft">
<a class="button" href="../Page2/SubPage2/Index.html"><span>Click me</span></a>
</div>
</div>
</div>
</div>
</body>
</html>

*, *::after {
box-sizing: inherit;
outline: none;
}
html {
font-size: 100%;
box-sizing: border-box;
}
body {
background-color: #000000;
color: #bbbbbb;
margin: 0;
padding: 0;
}
topbar {
display: flex;
background-color: #0e0e0e;
box-shadow: 0px 5px 15px #000000;
top: 0;
}
.logo {
margin-left: 60px;
background-color: #1b1b1b;
box-shadow: 0px 0px 1px grey;
box-shadow: 0px 5px 15px #000000 ;
margin-right: 40px;
}
.logo a {
float: left;
}
.logo a img {
display: block;
margin-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
.topbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
width: 100%;
display: flex;
justify-content: center;
}
.topbar li {
float: left;
}
.topbar li a {
display: block;
text-decoration: none;
text-align: center;
color: #bbbbbb;
padding: 25px;
font-weight: bold;
}
.topbar a:hover {
color: #da0e1e;
}
.topbar .search {
margin-right: 100px;
float: right;
}
.topbar input[type=text] {
float: right;
padding: 25px;
margin-top: 2px;
width: 100px;
color: #646464;
background-color: #272727;
border-radius: 15px;
border-style: none;
transition: width 0.2s ease-out;
}
.topbar input[type=text]:focus {
width: 160px;
color: #ffffff;
}
.main {
font-family: 'Ubuntu', sans-serif;
background-color: #1b1b1b;
color: #bbbbbb;
margin-top: 75px;
}
.classRight {
display: flex;
justify-content: center;
padding-bottom: 50px;
}
.subclassRight {
margin-top: 60px;
float: left;
margin-left: 50px;
text-align: center;
line-height: 0.5;
}
.subclassRight h1 {
color: #da0e1e;
font-size: 80px;
}
.subclassRight h2 {
font-size: 25px;
text-align: center;
}
.codeRight {
float: right;
margin-left: 300px;
margin-top: 50px;
background-color: #101010;
padding: 20px;
padding-bottom: 60px;
border-radius: 20px;
}
.codeRight h3 {
font-size: 25px;
}
.codeRightIn {
background-color: #151515;
padding: 10px;
padding-right: 180px;
border-left: 3px solid grey;
border-radius: 30px;
}
.codeRightIn span {
color: #da0e1e;
line-height: 1.5;
}
.divLeft {
display: flex;
justify-content: center;
background-color: #101010;
padding-bottom: 30px;
}
.divLeft:hover {
background-color: #050505;
}
.classLeft {
margin-top: 80px;
float: right;
margin-left: 30px;
text-align: center;
line-height: 0.5;
}
.classLeft h1 {
color: #da0e1e;
font-size: 80px;
}
.codeLeft {
float: left;
margin-right: 200px;
margin-top: 50px;
background-color: #202020;
padding: 20px;
padding-bottom: 40px;
border-radius: 20px;
}
.codeLeft h3 {
font-size: 25px;
}
.codeLeftIn {
background-color: #101010;
padding: 10px;
padding-right: 210px;
border-left: 3px solid grey;
border-radius: 30px;
}
.codeLeftIn span {
color: #da0e1e;
line-height: 1.5;
}
.codeLeftIn font {
color: #bbbbbb;
line-height: 1.5;
}
.codeLeftIn i {
font-style: normal;
color: orange;
line-height: 1.5;
}
#boldFont {
font-weight: bold;
}
.buttonRight {
border-radius: 100px;
background-color: #101010;
border: 1px solid gray;
text-align: center;
padding: 20px;
width: 190px;
margin-left: 110px;
}
.buttonRight a {
color: #da0e1e;
}
.buttonRight span {
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonRight span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
color: #da0e1e;
}
.buttonRight:hover span {
padding-right: 25px;
color: orange;
}
.buttonRight:hover span:after {
opacity: 1;
right: 0;
}
.buttonLeft {
border-radius: 100px;
background-color: #101010;
border: 1px solid gray;
text-align: center;
padding: 20px;
width: 190px;
margin-left: 110px;
}
.buttonLeft a {
color: #da0e1e;
}
.buttonLeft span {
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonLeft span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
color: #da0e1e;
}
.buttonLeft :hover span {
padding-right: 25px;
color: orange;
}
.buttonLeft :hover span:after {
opacity: 1;
right: 0;
}

Quando in pratica provo a ridimensionare il browser (non a schermo intero) i contenuti della pagina vengono "nascosti", oppure quando provo ad ingrandire/diminuire lo zoom della pagina (CTRL + rotella del mouse) questi tendono a compenetrarsi.
Da totale ignorante in materia, c'è qualcosa che manca/dovrei aggiustare/dovrei ancora inserire?
Sicuramente non mi sarò espresso bene ma spero abbiate capito, grazie in anticipo.
Clicca per espandere...
Per ottenere la pagina responsive, devi come dice @fisica-all utilizzare le percentuali ovvero <div class="main_cont" style="width: 100%;></div>
Per eliminare certi div che su uno schermo più piccolo non riescono ad adattarsi puoi utilizzare la proprietà media di css ovvero:
CSS: 
@media only screen and (max-width: 800px) {
    div .il_tuo_div_da_nascondere{
        display: none;
    }
}
 
  • Mi piace
Reazioni: Dazorn
StoClacson ha detto:
Premetto che ho studiato tutto in vari siti online, non in italiano, non avendo la disponibilità di acquistare/frequentare corsi riguardanti il tema.
Ho provato a creare una mia pagina web per gioco ma tuttavia c'è una "lacuna" che non riesco a recuperare.
Mi spiego meglio e vi mostro.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Style.css">
<title>Title</title>
</head>
<body>
<div class="topbar">
<ul>
<div class="logo">
<a title="Home" href="Index.html"><img src="Images/Logo.png" alt="Logo"></a>
</div>
<li title="Page1"><a href="Page1/Index.html">Page 1</a></li>
<li title="Page2"><a href="Page2/Index.html">Page 2</a></li>
<li title="Page3"><a href="Page3/Index.html">Page 3</a></li>
<li title="Page4"><a href="Page4/Index.html">Page 4</a></li>
<li title="Page5"><a href="Page5/Index.html">Page 5</a></li>
<li title="Page6"><a href="Page6/Index.html">Page 6</a></li>
</ul>
<div class="search">
<form>
<input type="text" placeholder="Search...">
</form>
</div>
</div>
<div class="main">
<div class="classRight">
<div class="subclassRight">
<h1>What is Lorem Ipsum?</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
<div class="buttonRight">
<a class="button" href="../Page1/SubPage1/Index.html"><span>Click me</span></a>
</div>
</div>
<div class="codeRight">
<h3>HTML example:</h3>
<div class="codeRightIn">
<span>&nbsp&#60!DOCTYPE html></span>
<br>
<span>&nbsp&#60html></span>
<br>
<span>&nbsp&#60title><span style="color: #999999;">HTML tutorial</span>&#60/title></span>
<br>
<span>&nbsp&#60body></span>
<br>
<br>
<span>&nbsp&#60h1><span style="color: #999999;">This is a heading.</span>&#60/h1></span>
<br>
<span>&nbsp&#60p><span style="color: #999999;">This is a paragraph.</span>&#60/p></span>
<br>
<br>
<span>&nbsp&#60/body></span>
<br>
<span>&nbsp&#60/html></span>
</div>
</div>
</div>
<div class="divLeft">
<div class="divLeftIn">
<h3>CSS example:</h3>
<div class="codeLeftIn">
<font>&nbspbody &nbsp{</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspbackground-color</span><font id="boldFont">:</font> <i>&nbspred</i><font id="boldFont">;</font>
<br>
<font>&nbsp}</font>
<br>
<br>
<font>&nbsph1 &nbsp{</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspcolor</span><font id="boldFont">:</font> <i>&nbspred</i><font id="boldFont">;</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbsptext-align</span><font id="boldFont">:</font> <i>&nbspcenter</i><font id="boldFont">;</font>
<br>
<font>&nbsp}</font>
<br>
<br>
<font>&nbspp &nbsp{</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspfont-family</span><font id="boldFont">:</font> <i>&nbspUbuntu</i><font id="boldFont">;</font>
<br>
<span>&nbsp&nbsp&nbsp&nbsp&nbspfont-size</span><font id="boldFont">:</font> <i>&nbsp20px</i><font id="boldFont">;</font>
<br>
<font>&nbsp}</font>
</div>
</div>
<div class="classLeft">
<h1>What is Lorem Ipsum?</h1>
<h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
<div class="buttonLeft">
<a class="button" href="../Page2/SubPage2/Index.html"><span>Click me</span></a>
</div>
</div>
</div>
</div>
</body>
</html>

*, *::after {
box-sizing: inherit;
outline: none;
}
html {
font-size: 100%;
box-sizing: border-box;
}
body {
background-color: #000000;
color: #bbbbbb;
margin: 0;
padding: 0;
}
topbar {
display: flex;
background-color: #0e0e0e;
box-shadow: 0px 5px 15px #000000;
top: 0;
}
.logo {
margin-left: 60px;
background-color: #1b1b1b;
box-shadow: 0px 0px 1px grey;
box-shadow: 0px 5px 15px #000000 ;
margin-right: 40px;
}
.logo a {
float: left;
}
.logo a img {
display: block;
margin-top: 15px;
padding-left: 10px;
padding-right: 10px;
}
.topbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0f0f0f;
width: 100%;
display: flex;
justify-content: center;
}
.topbar li {
float: left;
}
.topbar li a {
display: block;
text-decoration: none;
text-align: center;
color: #bbbbbb;
padding: 25px;
font-weight: bold;
}
.topbar a:hover {
color: #da0e1e;
}
.topbar .search {
margin-right: 100px;
float: right;
}
.topbar input[type=text] {
float: right;
padding: 25px;
margin-top: 2px;
width: 100px;
color: #646464;
background-color: #272727;
border-radius: 15px;
border-style: none;
transition: width 0.2s ease-out;
}
.topbar input[type=text]:focus {
width: 160px;
color: #ffffff;
}
.main {
font-family: 'Ubuntu', sans-serif;
background-color: #1b1b1b;
color: #bbbbbb;
margin-top: 75px;
}
.classRight {
display: flex;
justify-content: center;
padding-bottom: 50px;
}
.subclassRight {
margin-top: 60px;
float: left;
margin-left: 50px;
text-align: center;
line-height: 0.5;
}
.subclassRight h1 {
color: #da0e1e;
font-size: 80px;
}
.subclassRight h2 {
font-size: 25px;
text-align: center;
}
.codeRight {
float: right;
margin-left: 300px;
margin-top: 50px;
background-color: #101010;
padding: 20px;
padding-bottom: 60px;
border-radius: 20px;
}
.codeRight h3 {
font-size: 25px;
}
.codeRightIn {
background-color: #151515;
padding: 10px;
padding-right: 180px;
border-left: 3px solid grey;
border-radius: 30px;
}
.codeRightIn span {
color: #da0e1e;
line-height: 1.5;
}
.divLeft {
display: flex;
justify-content: center;
background-color: #101010;
padding-bottom: 30px;
}
.divLeft:hover {
background-color: #050505;
}
.classLeft {
margin-top: 80px;
float: right;
margin-left: 30px;
text-align: center;
line-height: 0.5;
}
.classLeft h1 {
color: #da0e1e;
font-size: 80px;
}
.codeLeft {
float: left;
margin-right: 200px;
margin-top: 50px;
background-color: #202020;
padding: 20px;
padding-bottom: 40px;
border-radius: 20px;
}
.codeLeft h3 {
font-size: 25px;
}
.codeLeftIn {
background-color: #101010;
padding: 10px;
padding-right: 210px;
border-left: 3px solid grey;
border-radius: 30px;
}
.codeLeftIn span {
color: #da0e1e;
line-height: 1.5;
}
.codeLeftIn font {
color: #bbbbbb;
line-height: 1.5;
}
.codeLeftIn i {
font-style: normal;
color: orange;
line-height: 1.5;
}
#boldFont {
font-weight: bold;
}
.buttonRight {
border-radius: 100px;
background-color: #101010;
border: 1px solid gray;
text-align: center;
padding: 20px;
width: 190px;
margin-left: 110px;
}
.buttonRight a {
color: #da0e1e;
}
.buttonRight span {
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonRight span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
color: #da0e1e;
}
.buttonRight:hover span {
padding-right: 25px;
color: orange;
}
.buttonRight:hover span:after {
opacity: 1;
right: 0;
}
.buttonLeft {
border-radius: 100px;
background-color: #101010;
border: 1px solid gray;
text-align: center;
padding: 20px;
width: 190px;
margin-left: 110px;
}
.buttonLeft a {
color: #da0e1e;
}
.buttonLeft span {
display: inline-block;
position: relative;
transition: 0.5s;
}
.buttonLeft span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
color: #da0e1e;
}
.buttonLeft :hover span {
padding-right: 25px;
color: orange;
}
.buttonLeft :hover span:after {
opacity: 1;
right: 0;
}

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net jsfiddle.net

Quando in pratica provo a ridimensionare il browser (non a schermo intero) i contenuti della pagina vengono "nascosti", oppure quando provo ad ingrandire/diminuire lo zoom della pagina (CTRL + rotella del mouse) questi tendono a compenetrarsi.
Da totale ignorante in materia, c'è qualcosa che manca/dovrei aggiustare/dovrei ancora inserire?
Sicuramente non mi sarò espresso bene ma spero abbiate capito, grazie in anticipo.
Clicca per espandere...
Ciao,
nelle seguenti classi: .subclassRight , .classLeft prova a rimuovere la proprietà line-height: 0.5
 
Top Bottom
Indietro