I can't get rid of the top and bottom white border of the video. Video is set on width: 100%; so there's no border on the left and right. When I set * (universal sizing) using margin: 0; everything bumps together, even two cards (kartica and kartica2), but I want them separated a bit.
Then if I set margin: 0; all the other pages bump together. Is there any way I can edit this with one selector(video selector is kartica2)?
This CSS sheet is universal, but for that specific page, content is at the top.
/*Naloga 1*/
* {
box-sizing: border-box;
/*universal box-sizing*/
}
body,
html {
margin-left: 0px;
/*zunanji odmik*/
margin-right: 0px;
background-color: #b3b3ff;
/*hex value*/
font-family: "Comic Sans MS", cursive, sans-serif;
margin: 0px;
/*drugace nastavi auto browser*/
}
.sticky {
position: sticky;
/*glava na vrhu strani ko se premikamo navzdol*/
top: 0;
}
#h1 {
padding: 10px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
margin: 0px;
/*drugace nastavi auto browser*/
}
#h2 {
margin-left: 0px;
margin-right: 0px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
padding: 5px;
}
#ul {
background-color: #6600ff;
}
ul {
list-style-type: none;
/*oznake v seznamu*/
margin: 0;
/*to remove browser default settings*/
padding: 0;
/*to remove browser default settings*/
overflow: hidden;
/* ce bi b boxsu bilo prevec vsebine*/
background-color: #1a1aff;
/*barva navigacije*/
}
li {
float: left;
}
li a {
display: block;
/*kot block elements naredi celotno areo clickable-ne samo tekst*/
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
/*skrijes podcrtano besedilo*/
}
li a:hover {
background-color: #000033;
/*barva ozadja ko se postavimo z misko*/
}
.vsebina {
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.kartica {
background-color: white;
margin-left: 1%;
margin-right: 1%;
}
.kartica2 {
background-color: white;
/*kartica za video*/
margin-left: 1%;
margin-right: 1%;
}
/*naloga 2*/
.n2 {
width: 100%;
}
/*video*/
#n21 {
margin-left: 10px;
margin-right: 10px;
}
/*zunanji odmik clankov*/
.n22 {
width: 100%;
height: auto;
}
.n23 {
text-align: center;
}
/*pripis pod sliko*/
/*naloga 3*/
#h3 {
padding: 10px;
margin: 0px;
display: block;
height: 40px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
}
.column {
float: left;
width: 33%;
/*ker so 3, ce bi bile 4 - 25%*/
padding: 5px;
/* razmaki med karticami*/
margin-top: 10px;
/*navigation bar to the content*/
}
/* Clear floats after the columns, postavi 3x2 */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
.slika3 {
max-width: 100%;
max-height: 100%;
padding: 0px;
margin: 0px;
}
.opis {
margin: 0px;
padding: 5px;
height: 160px;
overflow: scroll;
/*Drsni trak*/
}
/*Naloga 4*/
input[type=text],
select {
width: 100%;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 20px;
margin-top: 8px;
margin-bottom: 8px;
display: inline-block;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}
input[type=text]:focus,
select:focus {
border: 2px solid #555;
}
textarea {
width: 100%;
height: 150px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 20px;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
resize: none;
/* prepreci spreminjanje polja*/
}
input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
padding-top: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-right: 16px;
margin-top: 10px;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="si">
<head>
<meta charset="UTF-8">
<title>Tilenova spletna stran</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="sticky">
<h1 id="h1">Tilenova spletna stran </h1>
<ul id="ul">
<li>Domov</li>
<li>Ponudba</li>
<li>Anketa</li>
<li>Vaje</li>
</ul>
</div>
<div class="vsebina">
<div class="kartica">
<h2 id="h2">O meni</h2>
<p id="n21">Sem Tilen Sočič in študiram na <b>Fakulteti za elektrotehniko, računalništvo in informatiko</b>.</p>
<p id="n21">To je moja spletna stran, ki je nastala pri predmetu <u>Osnove svetovnega spleta</u>.</p>
<p id="n21">V prostem času se ukvarjam s športom in modifikacijo računalniskih delov.</p><br />
<!-- odstrani figure in odmiki se odstranijo -->
<img class="n22" src="images/galaksija.jpg" alt="galaksija">
<figcaption class="n23">Slika nočnega neba</figcaption>
</div>
<div class="kartica2">
<h2 id="h2">Video: Spreminjanje mehurčka v led</h2>
<video class="n2" controls>
<source src="Videos/Mehurcek.mp4">
</video>
<p id="n21">Video iz strani PEXELS VIDEOS</p>
</div>
</div>
</body>
</html>
The problem is the #h2 ID, you need to add a margin-bottom: 0;
#h2 {
margin-left: 0px;
margin-right: 0px;
background-color: #ffcc00;
color: #6600ff;
text-align: center;
padding: 5px;
margin-bottom: 0; /*Added*/
}
and also #n21, here add a margin-top: 0;
#n21 {
margin-left: 10px;
margin-right: 10px;
margin-top: 0; /*Added*/
}
Let me know if that helps! Here you have a codepen if you want to test it!
Related
just such a problem – my contact page has a view bug when in the mobile view – the footer is aroused almost all over the screen and the contact form is on itsee screenshot, I marked the div that obviously causes problems . Checked all the HTML tags – they're OK, tried position of the objects in the CSS – nothing helps. In the desktop view everything looks OKsee screenshot. Here is the HTML document and a CSS file linked there. They are better to copy to an editor to run in a browser.
a {
color: #f91111;
}
a:hover {
color: #fff;
background: #f91111;
text-decoration: none;
}
body {
margin: 0;
padding: 0;
font-size: 97%;
line-height: 1.4em;
min-width: 500px;
font-family: Helvetica;
letter-spacing: 101%;
min-height: 100%;
}
header {
margin-bottom: 1%;
background-image: url(../images/DSC00075.JPG);
background-position: 0% 7%;
background-size: 100%;
background-opacity: 0.9;
background-color: #f91111;
padding: 1% 0 0%;
position: fixed;
z-index: 10;
width: 100%;
}
.header {
max-width: 1310px;
margin: 0 auto;
}
.collapse {
display: none;
}
.panel-group .panel-heading+.panel-collapse>.panel-body,
.panel-group .panel-heading+.panel-collapse>.list-group {
border-top: 1px solid #ddd;
}
main {
margin: 0 auto;
/* padding: 10% 15% 2.9%; */
font-size: 94%;
max-width: 1310px;
padding-top: 200px !important;
min-height: calc(74.75vh);
}
nav {
max-width: 750px;
text-align: left;
padding-bottom: 0.85em;
padding-left: 0.35em;
}
nav a {
display: inline;
text-align: left;
text-decoration: none;
padding: 2%;
margin-right: 4.8%;
border-radius: 5px;
color: #fff;
line-height: 1em;
}
nav a:hover {
background-color: #fff;
color: #000;
}
a.active {
background-color: #fff;
color: #000;
}
.footer {
font-size: 0.75rem;
padding: 1.5% 15% 1.25% 14.4%;
color: #fff;
}
h1 {
font-size: 4rem;
padding-bottom: 1rem;
padding-left: 0.8%;
color: #fff;
}
h2 {
font-size: 2.5em;
color: #f91111;
margin-bottom: 2.5rem;
line-height: 1.25em;
}
h3 {
font-size: 1.3em;
color: #f91111;
padding: 0.25% 0%;
}
h3.lebenslauf {
background: #f91111;
color: #fff;
padding: 0.25% 0% 0.25% 1%;
}
.hr4 .lightborder {
display: block;
width: 93%;
border-bottom: 1px solid #e8e8e8;
position: relative;
z-index: 1;
}
span.ul-second-line {
/*padding-left: 10px;*/
margin-left: 7px;
}
ul.Lebenslauf {
padding-left: 16px;
margin-top: 0px;
}
p.no-margin-before {
-webkit-margin-before: 0;
}
div.button {
display: inline;
font-size: 0.75rem;
padding: 5px;
margin-right: 10px;
min-width: 15%;
}
div.table-row {
max-width: 100%;
display: block;
margin-bottom: 0.75rem;
padding-left: 1px;
font-size: 0.95em;
}
div.left {
float: left;
width: 20%;
min-width: 150px;
display: inline;
}
div.right {
width: 75%;
display: inline-block;
}
.empty-bottom {
height: auto;
}
a.up-there {
text-decoration: none;
padding: 3px 5px;
}
div.kategorie a.up-there {
margin-right: -9px;
}
div.kategorie a.up-there:hover {
margin-right: 0px;
}
.collapse {
display: none;
}
strong.red-accentuation {
color: #f91111;
}
footer {
max-width: 100%;
background-color: #f91111;
padding: 0 2%;
vertical-align: bottom;
}
footer a {
color: white;
text-decoration: none;
margin-bottom: 0;
}
footer a:hover {
text-decoration: underline;
}
#image {
text-align: center;
width: auto;
border: none;
margin: 0 auto;
margin-bottom: 10px;
background-color: none;
font-size: 100%;
background-image: url('');
}
.empty-space {
text-align: right;
}
#image-alternative {
text-align: center;
margin: 0 auto;
margin-bottom: 10px;
}
.preview {
width: 10%;
margin-left: 10px;
border: 3px solid #f91111;
border-radius: 5px;
height: 15%;
}
.container {
max-width: 95%;
margin: 3% auto;
margin-left: 0;
padding: 10px;
padding-left: 0;
background-color: none;
overflow: hidden;
box-shadow: none;
}
.gallery ul {
list-style: none;
padding: 0;
margin: 0 auto;
}
.gallery li {
display: inline;
width: 50%;
height: 30vh;
margin: 2%;
margin-left: 0;
position: relative;
font-size: 0;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.fade.in {
opacity: 1;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.referenz-link {
border: solid 1px #f91111;
border-radius: 10px;
width: 200px;
height: 200px;
margin-right: 30px;
margin-bottom: 30px;
overflow: hidden;
display: inline-block;
background: #f91111;
}
.referenz-link:last-child {
margin-right: 0px;
}
.referenz-link:hover {
background: none;
}
.picture-keeper {
overflow: hidden;
height: 133px;
margin-bottom: 10px;
border-bottom: solid 1px #f91111;
background: #fff;
}
img.reference {
width: 100%;
}
.notation {
padding: 0px 10px 15px;
text-align: center;
}
.referenz-link a {
color: #fff;
text-decoration: none;
font-weight: 700;
}
.referenz-link a:hover {
color: #f91111;
background: #fff;
}
h1.header {
display: inline-block;
}
img.presentation {
display: block;
margin-left: -1em;
}
h2.with-picture {
display: inline-block;
}
.foto-presentation {
text-align: center;
margin-bottom: 2.5em;
}
.adress-left {
display: inline-block;
float: left;
width: 48%;
margin-right: 2%;
}
.form-right {
display: inline-block;
width: 48%;
float: right;
}
dd,
dt {
display: inline-block;
}
dd {
margin-left: 0;
}
dt {
width: 7em;
}
dl {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
address {
font-style: normal;
}
label.kontaktangabe {
width: 8em;
display: inline-block;
}
textarea,
input[type="text"] {
border: solid 1px #f91111;
border-radius: 3px;
padding: 4px;
line-height: 1.5em !important;
}
textarea {
font: 400 0.95em Arial;
}
div#nachricht label {
vertical-align: top;
}
button.buttons {
color: #fff;
background: #f91111;
border: none;
border-radius: 3px;
font-size: 14px;
padding: 7px;
}
button.buttons:hover {
background: #a60c0c;
}
#kontaktdaten div.table-row {
font-size: 1em;
}
#kontaktdaten form {
padding-top: 1em;
}
#media screen and (min-width: 500px) and (max-width: 790px) {
header {
background-position: 0% 10%;
background-size: 100%;
padding: 1% 1% 1%;
margin: 0;
}
h1 {
font-size: 3rem;
}
nav a {
padding: 1.5%;
margin-right: 1%;
border-radius: 2px;
}
nav {
align: left;
padding-bottom: 0.1rem;
}
main {
margin: 0% 1%;
padding: 1%;
}
div.left {
margin-right: 1rem;
min-width: none;
}
.referenz-link {
width: 200px;
height: 200px;
margin-right: 45px;
margin-bottom: 45px;
}
.referenz-link:last-child {
margin-right: 0px;
}
.picture-keeper {
height: 133px;
}
.notation {
font-size: 1em;
}
.adress-left {
display: block;
width: 95%;
margin-bottom: 2em;
}
.form-right {
display: block;
width: 95%;
float: left;
}
label.kontaktangabe {
display: block;
}
}
#media screen and (max-width: 480px) {
body {
max-width: 450px;
font-size: 0.9rem;
padding: 0%;
}
header {
padding: 0% 1% 1%;
margin: 0;
background-position: 0% 0%;
background-repeat: no-repeat;
background-size: cover;
}
h1 {
font-size: 2rem;
}
nav {
max-width: 480px;
align: left;
padding-bottom: 0.6em;
}
nav a {
display: block;
text-align: left;
text-decoration: none;
padding: 1.5%;
margin: 0.5% 0%;
border-radius: 2px;
max-width: 30%;
}
main {
margin: 0% 0% 0% 1;
padding: 1% 0% 1% 1%;
max-width: 450px;
font-size: 100%;
}
div.left {
width: 100%;
float: none;
display: block;
min-width: 0;
}
div.right {
max-width: 100%;
display: block;
}
.hr4 .lightborder {
display: block;
max-width: 100%;
}
div.button {
display: block;
max-width: 50%;
text-align: center;
margin: 0 auto;
}
footer {
max-width: 480px !important;
}
.container {
padding: 0%;
}
img.preview {
margin-left: 0%;
margin-right: 2%;
}
.footer {
padding: 1.5% 0%;
max-width: 450px;
}
.referenz-link {
margin-right: 45px;
margin-bottom: 45px;
}
.notation {
font-size: 1.25em;
}
.adress-left {
display: block;
width: 95%;
margin-bottom: 2em;
}
.form-right {
display: block;
width: 95%;
float: left;
}
label.kontaktangabe {
display: block;
}
textarea.contact-form {
width: 379px;
}
dd,
dt {
display: block;
}
dd {
margin-bottom: 1em;
}
span.left {
font-weight: 700;
}
.kategorie .table-row {
margin-bottom: 2rem;
}
div#werdegang .table-row {
margin-bottom: 1em;
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Peter Schachnowskij – Homepage</title>
<link rel="stylesheet" href="css/portfolio.css">
</head>
<body>
<header>
<div class="header">
<h1>Peter Schachnowskij</h1>
<nav>
Startseite
Lebenslauf
Referenzen
Zeugnisse
<a class="active">Kontakt</a>
</nav>
</div>
</header>
<main>
<p> </p>
<h2>Kontakt</h2>
<div class="table-row" id="kontaktdaten">
<div class="adress-left">
<h3>Peter Schachnowskij</h3>
<p><address>Richterstraße 9<br>
70567 Stuttgart</address></p>
<p>
<dl><dt>Tel.:</dt>
<dd>01 76 / 21 75 17 11</dd>
</dl>
<dt>E-Mail: </dt>
<dd>peter.schachnowskij.gf#gmail.com</dd>
<p>
<p>
<dl><dt>Homepage:</dt>
<dd>noch im Aufbau</dd>
</dl>
<dl><dt>XING-Profil:</dt>
<dd>https://www.xing.com/profile/Peter_Schachnowskij</dd>
</dl>
</p>
</div>
<div class="form-right">
<h3>Haben Sie ein Anliegen?</h3>
<p>Schreiben Sie mir gerne!</p>
<form action="mailto:peter.schachnowskij.gf#gmail.com" method="post">
<div class="table-row"><label class="kontaktangabe" for="name">Ihr Name*: </label><input type="text" value size="50" aria-required="true" aria-invalid="false" /></div>
<div class="table-row"><label class="kontaktangabe" for="vorname">Ihr Vorname*: </label><input type="text" value size="50" aria-required="true" aria-invalid="false" /></div>
<div class="table-row"><label class="kontaktangabe" for="e-mail">Ihre E-Mail*: </label><input type="text" value size="50" aria-required="true" aria-invalid="false" /></div>
<div class="table-row"><label class="kontaktangabe" for="telefon">Ihr Telefon: </label><input type="text" value size="50" aria-required="false" aria-invalid="false" /></div>
<div class="table-row" id="nachricht"><label class="kontaktangabe" for="nachricht">Ihre Nachricht: </label><textarea name="your-message" cols="52" rows="12" class="contact-form" aria-invalid="false"></textarea></div>
<div class="table-row"><label class="kontaktangabe" for="absenden"> </label><button class="buttons" type="submit" name="action" id="absenden">Absenden</button></div>
</form>
<div class="empty-bottom"> </div>
</div>
</div>
</main>
<div class="empty-bottom"> </div>
<footer>
<div class="footer">
<div class="button">Peter Schachnowskij </div>
<div class="button">Richterstr. 9 </div>
<div class="button">70567 Stuttgart </div>
<div class="button">
<nobr>Tel.: 01 76 / 21 75 17 11</nobr>
</div>
<div class="button">
<nobr>E-Mail: peter.schachnowskij.gf#gmail.com</nobr>
</div>
</div>
</footer>
</body>
</html>
Can someone please help me? Thanx in previous.
I'm creating a page with a text editor and I can get everything but the text editor to center.
Everything except the elements within the div with the id #texteditor are centered. Here is the css for another element on the page, which I centered successfully, and the text editor:
header {
background-color: #00B7FF;
color: white;
width: 100%;
height: 150px;
display: inline-block;
text-align: center;
padding: 10px;
}
body {
padding: 50px;
font: 20px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
h1 {
text-align: center;
}
p {
display: inline;
}
form {
margin-top: 30px;
}
button {
margin: 0 5px;
display: inline-block;
}
input {
margin: 10px;
}
table {
background-color: #e0e0e0;
width: 800px;
margin: 50px auto;
font-size: 20px;
}
div#texteditor {
width: 900px;
height: 300px;
margin: 0 auto;
}
div#header {
border-bottom: none;
width: 60%;
padding: 10px;
background-color: #e0e0e0;
color: white;
border-radius: 8px 8px 0 0;
}
div#textArea {
border: 2px solid #e0e0e0;
height: 100%;
width: 60%;
}
iframe#wysiwyg {
height: 100%;
width: 60%;
}
.btn {
background-color: DodgerBlue;
/* Blue background */
border: none;
/* Remove borders */
color: white;
/* White text */
padding: 12px 16px;
/* Some padding */
font-size: 16px;
/* Set a font size */
cursor: pointer;
/* Mouse pointer on hover */
}
.btn-primary {
margin: 10px;
display: inline;
}
.btn-white {
background-color: white;
color: #00B7FF;
}
.container {}
.inline {
display: inline;
}
.row {
margin: inherit;
}
.form {
width: 900px;
margin: 0 auto;
}
.form-header {
display: inline-block;
text-align: center;
width: 990px;
margin: 0 auto;
}
.centered-form {
width: 1000px;
margin: 0 auto;
}
.centered-text {
display: inline;
text-align: center;
}
.centered-textfields {
width: 500px;
margin: 0 auto;
text-align: center;
}
.centered-buttons {
width: 208px;
margin: auto;
}
.emptyspace {
margin-top: 50px;
}
[login] {
float: right;
}
<h1>New Study Guide</h1>
<div class="container emptyspace">
<div class="centered-form">
<div class="form-header"><a class="btn btn-primary btn-md inline" href="#" role="button">Upload</a>
<p>or create one from scratch.</p>
</div>
<div class="form emptyspace">
<div id="texteditor">
<div id="header"><button class="btn"><i class="fa fa-bold"></i></button>
<!-- removed for brevity-->
</div>
<div id="textArea"><iframe id="wysiwyg" name="wysiwyg" frameborder="0"></iframe></div>
</div>
</div>
</div>
</div>
Thank you in advance for your help! I'll also appreciate any other critique of my code.
add margin: 0 auto; to the header and textarea since they're separate, or wrap them into a div and do that to it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.form-header {
display: inline-block;
text-align: center;
width: 990px;
margin: 0 auto;
}
div#texteditor {
width: 900px;
height: 300px;
margin: 0 auto;
}
header {
background-color: #00B7FF;
color: white;
width: 100%;
height: 150px;
display: inline-block;
text-align: center;
padding: 10px;
}
body {
padding: 50px;
font: 20px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
h1 {
text-align: center;
}
p {
display: inline;
}
form {
margin-top: 30px;
}
button {
margin: 0 5px;
display: inline-block;
}
input {
margin: 10px;
}
table {
background-color: #e0e0e0;
width: 800px;
margin: 50px auto;
font-size: 20px;
}
div#texteditor {
width: 900px;
height: 300px;
margin: 0 auto;
}
div#header {
border-bottom: none;
width: 60%;
margin: 0 auto;
padding: 10px;
background-color: #e0e0e0;
color: white;
border-radius: 8px 8px 0 0;
}
div#textArea {
border: 2px solid #e0e0e0;
height: 100%;
width: 60%;
margin: 0 auto;
}
iframe#wysiwyg {
height: 100%;
width: 60%;
}
.btn {
background-color: DodgerBlue;
/* Blue background */
border: none;
/* Remove borders */
color: white;
/* White text */
padding: 12px 16px;
/* Some padding */
font-size: 16px;
/* Set a font size */
cursor: pointer;
/* Mouse pointer on hover */
}
.btn-primary {
margin: 10px;
display: inline;
}
.btn-white {
background-color: white;
color: #00B7FF;
}
.container {}
.inline {
display: inline;
}
.row {
margin: inherit;
}
.form {
width: 900px;
margin: 0 auto;
}
.form-header {
display: inline-block;
text-align: center;
width: 990px;
margin: 0 auto;
}
.centered-form {
width: 1000px;
margin: 0 auto;
}
.centered-text {
display: inline;
text-align: center;
}
.centered-textfields {
width: 500px;
margin: 0 auto;
text-align: center;
}
.centered-buttons {
width: 208px;
margin: auto;
}
.emptyspace {
margin-top: 50px;
}
[login] {
float: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<h1>New Study Guide</h1>
<div class="container emptyspace">
<div class="centered-form">
<div class="form-header"><a class="btn btn-primary btn-md inline" href="#" role="button">Upload</a>
<p>or create one from scratch.</p>
</div>
<div class="form emptyspace">
<div id="texteditor">
<div id="header"><button class="btn"><i class="fa fa-bold"></i></button>
<!-- removed for brevity-->
</div>
<div id="textArea"><iframe id="wysiwyg" name="wysiwyg" frameborder="0"></iframe></div>
</div>
</div>
</div>
</div>
I have removed the width 60% from #header,#textarea and applied to #texteditor.
header {
background-color: #00B7FF;
color: white;
width: 100%;
height: 150px;
display: inline-block;
text-align: center;
padding: 10px;
}
body {
padding: 50px;
font: 20px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
h1 {
text-align: center;
}
p {
display: inline;
}
form {
margin-top: 30px;
}
button {
margin: 0 5px;
display: inline-block;
}
input {
margin: 10px;
}
table {
background-color: #e0e0e0;
width: 800px;
margin: 50px auto;
font-size: 20px;
}
div#texteditor {
width: 60%;
height: 300px;
margin: 0 auto;
}
div#header {
border-bottom: none;
padding: 10px;
background-color: #e0e0e0;
color: white;
border-radius: 8px 8px 0 0;
}
div#textArea {
border: 2px solid #e0e0e0;
height: 100%;
}
iframe#wysiwyg {
height: 100%;
width: 60%;
}
.btn {
background-color: DodgerBlue;
/* Blue background */
border: none;
/* Remove borders */
color: white;
/* White text */
padding: 12px 16px;
/* Some padding */
font-size: 16px;
/* Set a font size */
cursor: pointer;
/* Mouse pointer on hover */
}
.btn-primary {
margin: 10px;
display: inline;
}
.btn-white {
background-color: white;
color: #00B7FF;
}
.container {}
.inline {
display: inline;
}
.row {
margin: inherit;
}
.form {
width: 900px;
margin: 0 auto;
}
.form-header {
display: inline-block;
text-align: center;
width: 990px;
margin: 0 auto;
}
.centered-form {
width: 1000px;
margin: 0 auto;
}
.centered-text {
display: inline;
text-align: center;
}
.centered-textfields {
width: 500px;
margin: 0 auto;
text-align: center;
}
.centered-buttons {
width: 208px;
margin: auto;
}
.emptyspace {
margin-top: 50px;
}
[login] {
float: right;
}
<h1>New Study Guide</h1>
<div class="container emptyspace">
<div class="centered-form">
<div class="form-header"><a class="btn btn-primary btn-md inline" href="#" role="button">Upload</a>
<p>or create one from scratch.</p>
</div>
<div class="form emptyspace">
<div id="texteditor">
<div id="header"><button class="btn"><i class="fa fa-bold"></i></button>
<!-- removed for brevity-->
</div>
<div id="textArea"><iframe id="wysiwyg" name="wysiwyg" frameborder="0"></iframe></div>
</div>
</div>
</div>
</div>
margin-left:200px works fine for the code. It is placed in the middle.
div#texteditor {
width: 900px;
height: 300px;
margin-left: 200px;
}
I have a problem converting html page into wordpress theme. When loading theme i just see white screen but other previously installed theme looks normal. I read earlier similar subject on stackoverflow but it seems that it doesnt help me. Can somebody help me solve this problem?
These are my theme files:
Theme Name: Vesti
Theme URI: www.komunalacbecej.com
Author: Aljosa Boskovic
Author URI: www.komunalacbecej.com
Description: Twenty Seventeen brings your site to life with immersive featured images and subtle animations. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
*/
* {
margin: 0;
padding: 0;
}
body{
width: 960px;
margin: 0 auto;
background-color: #faf6d0;
padding: 0;
//background-image: url('images/green.png');
background-size: cover;
}
header{
display: block;
width: 100%;
margin: 0 auto;
}
#uppermenu{
float: right;
margin-top: 4px;
}
#uppermenu ul{
margin-right: 15px;
}
#uppermenu ul li{
display: inline;
padding: 5px;
font-size: 15px;
color: grey;
font-weight: 540;
font-family: 'Oswald', sans-serif;
cursor: pointer;
}
#uppermenu ul li:hover{
color:#156038;
}
#flags{
float:right;
margin-top: 4px;
}
#flags img{
width: 20px;
height: 20px;
margin-right: 7px;
cursor: pointer;
}
#logo{
vertical-align: middle;
float: left;
height: 70px;
}
#naziv{
float: left;
color: #1a7645;
height: 70px;
width: 300px;
box-sizing: border-box;
padding: 5px;
font-family: sans-serif;
}
nav{
width: 100%;
background: #3d874d;
text-align: center;
position: relative;
z-index: 11;
border: 2px solid #a4a41b;
margin: 0 auto 10px auto;
clear: both;
border-radius: 2px;
}
nav ul{
list-style: none;
}
nav ul li{
display: inline-block;
padding: 15px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
nav ul li a{
text-decoration: none;
color: #fff;
display: block;
font-size: 1.1em;
}
nav ul li:hover{
background: #150;
}
nav ul li a:hover{
color: #fdf742;
}
nav ul ul {
position: absolute;
width: 150px;
background: #2a562c;
opacity: 0.8;
margin-top: 15px;
margin-left: -15px;
text-align: left;
display: none;
}
nav ul ul li{
display: block;
text-align: left;
border-bottom: 1px solid #5b7e5d;
}
nav ul li:hover > ul{
display: block;
}
#slide{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
margin: 0 auto;
}
#slidephoto{
width: 100%;
height: 500px;
position: relative;
z-index: 2;
border-radius: 5px;
}
#leftbutton{
width: 5%;
height:500px;
position: absolute;
left: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#rightbutton{
width: 5%;
height:500px;
position: absolute;
right: 0;
top: 0;
background: #b3b0b0;
opacity: .5;
line-height: 500px;
z-index: 4;
border-radius: 5px;
}
#leftarrow {
vertical-align: middle;
cursor: pointer;
}
#rightarrow {
vertical-align: middle;
cursor: pointer;
}
#leftarrow:hover{
background: grey;
}
#rightarrow:hover{
background: grey;
}
#naslov{
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
letter-spacing: 1px;
text-indent: 30px;
font-size: 20px;
color: #1a7645;
font-family: Georgia;
border-top: 1px solid #1a7645;
background: #639665;
color: #e6f3d1;
padding: 10px 0;
}
#firsttext{
width: 100%;
margin: 30px auto 0 auto;
font-family: 'Times New Roman';
line-height: 1.4em;
font-size: 19px;
text-align: justify;
padding-top: 10px;
box-sizing: border-box;
padding: 40px 90px;
color: white;
background: #6eae49;;
border-radius: 4px;
}
#firsttext span{
font-size: 28px;
font-weight: bold;
color: #1a7645;
}
#delatnosti {
width: 100%;
position: relative;
text-align: center;
background-color: #e6f3d1;
margin: 0px auto;
box-sizing: border-box;
border: 1px solid #6d9e6f;
padding: 20px ;
}
.boxes div {
display: inline-block;
border: 1px solid #a2b6c0;
width: 200px;
height: 210px;
vertical-align: top;
text-align: center;
background-color: white;
color: #46545b;
margin: 20px 10px;
cursor: pointer;
border-radius: 4px;
}
.boxes div:hover{
border: 1px solid green;
background-color: #dfdede;
}
.boxes a img{
width: 200px;
height: 110px;
}
.boxes a p, h3{
//margin: 5px;
text-decoration: none;
}
.boxes div a{
text-decoration: none;
color: black;
}
#obavestenja{
width: 100%;
height: 40px;
//border: 1px solid black;
font-size: 2em;
line-height: 40px;
text-indent: 210px;
}
#mainnews-banner{
width: 100%;
margin: 0 auto;
}
#mainnews-banner h1{
text-indent: 210px;
font-family: serif;
letter-spacing: 3px;
}
#sadrzaj{
width: 75%;
background-color: white;
display: inline-block;
box-sizing: border-box;
text-align: justify;
border: 1px solid black;
}
#vestikolone{
width: 80%;
}
#glavnavestslika{
width: 100%;
height: 430px;
background: url("images/slika4.jpg");
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
#glavnavesttekst{
width: 100%;
height: 180px;
background: black;
position: absolute;
bottom: 0;
opacity: .6;
}
#glavnavesttekst p{
color: #ded8d8;
opacity: 1;
padding: 10px;
font-size: 18px;
font-family: Georgia;
line-height: 23px;
}
#glavnavesttekst h2{
color: white;
font-weight: bold;
opacity: 1;
font-family: Georgia;
text-indent: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
#glavnavest {
font-size: 1.2em;
font-family: 'Oswald', sans-serif;
}
#datum{
width: 100%;
padding: 10px;
box-sizing: border-box;
color: white;
background: black;
}
#banner{
width: 25%;
float: right;
text-align: center;
//border: 3px solid green;
//background: #f1f1f1;
}
#banner img{
width: 120px;
height: 100px;
background: #9ac0f6;
border: 1px solid #9ac0f6;
cursor: pointer;
}
#banner p{
font-size: 1em;
font-family: Arial;
background: #fecd61;
width: 60%;
margin: 0 auto;
margin-bottom: 8px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
}
#pastnewspara{
text-transform: uppercase;
background-color: black;
color: white;
width: 75%;
box-sizing: border-box;
padding-left: 10px;
margin-bottom: 1px;
opacity: .9;
}
#pastnews{
border-top: none;
position: relative;
text-align: center;
width:75%;
height: 140px;
float: left;
border: 1px dashed black;
border-top: none;
}
.column{
width: 25%;
height: 140px;
display: inline-block;
margin-left: -4px;
background-color: white;
box-sizing: border-box;
vertical-align: top;
box-sizing: border-box;
}
.column img{
width: 100%;
height:140px;
}
.column h3,p{
text-align: left;
padding: 5px;
}
#prognoza{
clear: both;
width: 75%;
background: brown;
color: #a2b6c0;
border-bottom: 2px solid white;
}
.weatherwidget-io{
width: 100%;
display: block;
height: 20px;
text-align: left;
}
#footer{
width: 100%;
height: 130px;
background: white;
background: #a2b6c0;
text-align: center;
position: relative;
border-top: 3px solid white;
}
#icons{
line-height: 130px;
}
#footer i{
color: #554f4f;
font-size: 36px;
padding: 26px;
vertical-align: middle;
}
#footer span {
position: absolute;
right: 50px;
color: grey;
font-family: sans-serif;
}
#footer span i{
padding: 6px;
color: grey;
font-size: 0.6em;
}
/* stranica zelenilo.html */
#submenu ul li{
list-style: none;
font-size: 1.1em;
padding-bottom: 5px;
border-bottom: 2px solid green;
margin-bottom: 13px;
background: rgba(96,96,96,0.4);
}
#submenu {
margin-top: 30px;
width: 22%;
background: url('images/leaf3.jpg');
background-size: cover;
opacity: .9;
font-family: 'Oswald', sans-serif;
text-align: center;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
padding: 10px 0;
color: #cfcf05;
border: 2px solid green;
float: left;
}
#submenu ul {
opacity: 1;
padding: 40px 20px;
font-size: 16px;
}
#zelenilobody{
background: url('images/goranski.jpg');
background-size: cover;
height: 1000px;
}
#submenu ul li:hover{
background-color: grey;
background: rgba(96,96,96,0.7);
color: white;
cursor: pointer;
}
#navigation nav{
background-color: #61a239;
}
#zelenilo-naziv #naziv{
color: #60a23a;
background-color: rgba(96,96,96,0.7);
}
#zelenilo-uppermenu #uppermenu li{
color: #60a23a;
background-color: rgba(96,96,96,0.8);
}
#zelenilo-tekst{
width: 75%;
float: right;
margin-top: 30px;
border: 1px solid white;
background: rgb(246, 241, 241, 0.8);
box-sizing: border-box;
padding: 20px;
}
#zelenilo-tekst p{
line-height: 20px;
margin-top: 10px;
font-size: 17px;
}
#zelenilo-tekst ol{
padding-left: 20px;
line-height: 24px;
margin-top: 15px;
font-size: 17px;
}
/* stranica vesti.php */
#blognews {
background-color: white;
margin-top: 20px;
padding: 10px;
border: 1px solid black;
}
#article {
border: 1px solid black;
margin-top: 20px 0;
}
#article h2 {
margin-left: 15px;
margin-top: 10px;
}
#datumclanka{
display: block;
margin-left: 15px;
}
#article img{
height: 120px;
display: inline-block;
width: 180px;
vertical-align: middle;
margin-top: 10px;
margin-left: 10px;
padding-bottom: 10px;
}
#article p{
display: inline-block;
width: 650px;
vertical-align: middle;
font-size: 1.1em;
margin-left: 10px;
}
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo('title'); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<header>
<img src="images/logofirme.jpg" id="logo">
<div id="naziv">
<h1><?php bloginfo('name'); ?></h1>
<p>Javno preduzeće za komunalne usluge</p>
</div>
<div id="flags">
<img src="images/serbia.png">
<img src="images/hungary.png">
</div>
<div id="uppermenu">
<ul>
<li>Najčešća pitanja</li>
<li>Korisni linkovi</li>
</ul>
</div>
<?php wp_nav_menu(); ?>
</header>
footer.php
<div id="footer">
<div id="icons">
<i class="fa fa-phone"></i>
<i class="fa fa-envelope-o"></i>
<i class="fa fa-facebook-official"></i>
<span><i class="fa fa-copyright"></i>Design by Aleksey</span>
</div>
</div>
</body>
</html>
index.php
<?php get_header(); ?>
test
<?php get_footer(); ?>
Can you try following solutions?
In first line of style.css add "/*" before "Theme Name: Vesti". So it will be like
/*
Theme Name: Vesti
Disable/deactivate all plugins to check if confliction happens between your active theme and plugins. And then enable it one by one if issue happens because of it.
Add following line in wp-config.php file for increasing PHP memory limit.
define(‘WP_MEMORY_LIMIT’, ’64M’);
I am designing a homepage template. When I finished with my center content I started making the footer. I quickly realized my footer is not at the bottom of the page but instead inside the center content and cannot figure out why.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="file://C:/Workspace/MyWeblogicWorkspace/Purify/WebContent/CSS/index.css">
<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<div id="navigationBar">
<ul id="navigationBarList">
<li><a id="test" href="http://www.google.com">Home</a></li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div><!-- end of navigationBar -->
</div><!-- end of header -->
<div id="center">
<p id="title">*******************</p>
<p id="slogan">*******************</p>
<div id="centerContent">
<div id="contentOneBox">
<p id="contentOneTitle">*******************</p>
<p id="contentOneText">*******************!</p>
</div><!-- end of contentOneBox -->
<div id="contentTwoBox">
<p id="contentTwoTitle">*******************</p>
<p id="contentTwoText">**************************************.</p>
</div><!-- end of contentTwoBox -->
<div id="contentThreeBox">
<p id="contentThreeTitle">*******************</p>
<p id="contentThreeText">**************************************.</p>
</div><!-- end of contentThreeBox -->
<div id="contentFourBox">
<p id="contentFourTitle">*******************</p>
<p id="contentFourText">**************************************.</p>
</div><!-- end of contentFourBox -->
</div><!-- end of centerContent -->
</div><!-- end of center -->
<div id="footer">
<p id="contact">*******************</p>
<p id="copyright">*******************</p>
</div><!-- end of footer -->
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 62.5%;
font-family: 'PT Sans', sans-serif;
color: #221F51;
}
#header {
display: block;
position: relative;
top: 0;
right: 0;
left: 0;
z-index: 9999;
margin: 0;
width: 100%;
min-width: 1024px;
height: 48px;
max-height: 44px;
background: #333;
background: rgba(0,0,0,0.8);
font-size: 18px;
-webkit-user-select: none;
}
#navigationBar {
display: block;
margin: 0 auto;
padding: 0 auto;
position: relative;
text-align: center;
}
#navigationBar ul li {
display: inline-block;
margin: 0 auto;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
}
#navigationBar ul li a {
color: white;
margin: 0 auto;
padding: 0 auto;
text-decoration: none;
}
#navigationBar ul li a:hover {
color: gray;
}
#center {
display: block;
font-size: 18px;
position: relative;
}
#title {
display: block;
font-size: 48px;
letter-spacing: 3px;
margin-top: 25px;
padding: 25px;
position: relative;
text-align: center;
}
#slogan {
display: block;
font-size: 22px;
margin: 0 auto;
padding: 0 auto;
position: relative;
text-align: center;
}
#centerContent {
display: block;
font-size: 22px;
margin: 0 auto;
padding: 0 auto;
position: relative;
width: 990px;
}
#contentOneBox {
border: 1px solid black;
border-radius: 15px;
display: block;
float: left;
margin: 50px;
padding: 0px;
position: relative;
width: 350px;
}
#contentOneTitle {
background: #333;
background: rgba(0,0,0,0.8);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
color: white;
display: block;
letter-spacing: 2px;
margin: 0;
padding: 2px;
position: relative;
text-align: center;
}
#contentOneText {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
height: 97px;
padding: 5px;
position: relative;
text-align: center;
}
#contentTwoBox {
border: 1px solid black;
border-radius: 15px;
display: block;
float: right;
margin: 50px;
padding: 0px;
position: relative;
width: 350px;
}
#contentTwoTitle {
background: #333;
background: rgba(0,0,0,0.8);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
color: white;
display: block;
letter-spacing: 2px;
margin: 0;
padding: 2px;
position: relative;
text-align: center;
}
#contentTwoText {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
height: 97px;
padding: 5px;
position: relative;
text-align: center;
}
#contentThreeBox {
border: 1px solid black;
border-radius: 15px;
display: block;
float: left;
margin: 50px;
padding: 0px;
position: relative;
width: 350px;
}
#contentThreeTitle {
background: #333;
background: rgba(0,0,0,0.8);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
color: white;
display: block;
letter-spacing: 2px;
margin: 0;
padding: 2px;
position: relative;
text-align: center;
}
#contentThreeText {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
height: 97px;
padding: 5px;
position: relative;
text-align: center;
}
#contentFourBox {
border: 1px solid black;
border-radius: 15px;
display: block;
float: right;
margin: 50px;
padding: 0px;
position: relative;
width: 350px;
}
#contentFourTitle {
background: #333;
background: rgba(0,0,0,0.8);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
color: white;
display: block;
letter-spacing: 2px;
margin: 0;
padding: 2px;
position: relative;
text-align: center;
}
#contentFourText {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
height: 97px;
padding: 5px;
position: relative;
text-align: center;
}
#footer {
background-color: #f2f2f2;
display: block;
position: relative;
margin: 0;
width: 100%;
min-width: 1024px;
font-size: 14px;
-webkit-user-select: none;
}
#contact {
display: block;
position: relative;
text-align: center;
}
#copyright {
display: block;
position: relative;
text-align: center;
}
Here's fiddle : https://jsfiddle.net/c74dy9dj/
Try to add clear: both; to footer CSS:
#footer {
background-color: #f2f2f2;
display: block;
position: relative;
margin: 0;
width: 100%;
min-width: 1024px;
font-size: 14px;
-webkit-user-select: none;
border: 1px gray dotted;
background-color: rgba(120,120,120,.5);
clear: both; /* <-- check this out! */
}
You're using floats which causes elements after a floating element to flow around it.
Here is a good explanation
https://css-tricks.com/almanac/properties/c/clear/
You can fix this by adding "clear: both" to #footer
#footer {
clear:both;
}
Is there a way to have a responsive container, so all items inside of that container are in the middle of the page, no matter what screen dimension?
Thanks :)
Images are obviously missing, but here's the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sharpturn Network</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:500' rel='stylesheet' type='text/css'>
<meta content="width=device-width; initial-scale=1; maximum-scale=1" name="viewport">
<link href="stylesheet.css" rel="stylesheet"><!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<img id="logo" src="img/upload.png">
<nav>
<ul>
<li><a class="active" href="index.html">HOME</a></li>
<li><a class="nav" href="#">UPLOAD</a></li>
<li><a class="nav" href="support.html">SUPPORT</a></li>
<li><a class="nav" href="#">FAQS</a> </li>
</ul>
</nav>
</header><img class="banner" src="img/banner.jpg">
<h1 class="title">SIMPLE AS 1, 2, 3!</h1>
<div class="steps">
<img src="img/form.png">
<h2 class="subtitle">Complete our form</h2>
<p>A form diversly designed to take you upto no more than 5 minutes to complete and submit.</p>
</div>
<div class="steps">
<img src="img/wait.png">
<h2 class="subtitle">Patience is a virtue</h2>
<p>Allow upto 72 hours for an submission review and response from our team.</p>
</div>
<div class="steps">
<img src="img/uploaded.png">
<h2 class="subtitle">Viola! All done.</h2>
<p>Your talent is now being promoted and showcased world wide.</p>
</div>
<img class="banner" src="img/grande.jpg">
</body>
</html>
CSS
/*MAIN*/
body {
line-height: 1.25em;
font-family: 'Roboto',sans-serif;
background: url(img/banner.png);
background-size: cover;
/* For flexibility */
color: #505050;
margin: 0;
padding: 0;
}
header {
background: #505050;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #fff;
z-index: 100;
padding-bottom: 10px;
margin-bottom: 5px;
}
#logo {
margin-top: 20px;
margin-left: 60px;
float: left;
width: 80px;
height: 60px;
display: block;
padding-bottom: 25px;
}
nav {
float: right;
padding: 20px;
color: #fff;
}
nav .active {
font-size: 20px;
color: #cc293f;
}
nav a {
margin-right: 20px;
font-size: 20px;
color: #fff;
text-decoration: none;
}
#menu-icon {
width: 40px;
height: 40px;
background: #fff url(img/menu-icon.png) center;
}
a:hover {
color: #cc293f;
}
a:hover#menu-icon {
background-color: #fff;
border-radius: 4px 4px 0 0;
}
ul {
list-style: none;
}
li {
color: #fff;
display: inline-block;
float: left;
}
.banner {
width: 100%;
height: 300px;
border-bottom: 1px solid #000;
}
.supportbox1 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox1 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox1 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox2 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox2 p {
padding-left: 8px;
padding-right: 8px;
}
.supportbox2 img {
padding-left: 41%;
padding-top: 40px;
}
.supportbox3 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
border: 3px solid #505050;
float: left;
margin: 50px 70px 25px 10px;
max-height: 500px;
max-width: 300px;
min-height: 500px;
min-width: 300px;
}
.supportbox3 p {
padding-left: 5px;
padding-right: 5px;
}
.supportbox3 img {
padding-left: 41%;
padding-top: 50px;
}
.supportbox3 a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #505050;
border: 3px solid #505050;
color: #cc293f;
font-size: 20px;
margin: 90px 0 55px;
padding: 5px 10px;
position: absolute;
text-decoration: none;
}
.imgicon {
margin-left: -117px;
max-height: 80px;
max-width: 80px;
min-height: 80px;
min-width: 80px;
}
h1.title {
text-align: center;
font-size: 30px;
color: #cc293f;
margin-top: 25px;
margin-bottom: 45px;
}
h1.sub {
font-size: 24px;
color: #cc293f;
text-align: center;
padding-bottom: 50px;
}
h2.subtitle {
color: #cc293f;
text-align: center;
padding-top: -5px;
}
p {
font-family: 'Roboto',sans-serif;
margin-bottom: 20px;
}
.steps {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
float: left;
margin: 0 100px 10px -5px;
max-height: 3500px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
}
.steps p {
font-size: 19px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
}
.steps img {
display: block;
margin-left: auto;
margin-right: auto;
}
/****Responsive ****/
#media only screen and (max-width:640px) {
header {
position: absolute;
}
.banner {
width: 100% !important;
height: 300px;
border-bottom: 1px solid #000;
}
#menu-icon {
display: inline-block;
}
nav ul,nav:active ul {
display: none;
position: absolute;
padding: 10px;
background: #505050;
border: 5px solid #fff;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
font-color: #fff;
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
background-color: #505050;
display: block;
}
nav ul {
background: #505050;
}
Set the container property
text-align:center;
and in the element inside the container ( like a paragraph or img) specify
display:inline-block