I am setting up an ID card printing software in PHP both for landscape and portrait mode. The problem is with the print() command it always takes the standard page sizes A4, A3... Because of this it prints the id in a specific section of the card.
Can anyone help or recommend something? Perhaps there is another way to print it without print preview in chrome?
<style>
#page {
/*size: A5;
margin: 5px;*/
width: 53.98mm;
height: 85.60mm;
margin: 0px;
}
#media print {
html, body {
/*width: 210mm;
height: 297mm;*/
/*width: 218mm;
height: 340mm;*/
}
}
#printablediv {
width: 53.98mm;
height: 85.60mm;
}
.idcardreport {
font-family: arial;
-webkit-print-color-adjust: exact;
}
/*IDcard Front Part Css Code*/
.idcardreport-frontend{
margin: 2px;
float: left;
border: 1px solid #000;
padding: 10px;
width: 260px;
text-align: center;
height:370px;
background-size: 100% 100% !important;
}
.logo img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.pick img{
width: 60px;
height: 80px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
.signe img{
width: 50px;
height: 50px;
border: 1px solid #ddd;
margin-bottom: 5px;
}
h3 {
font-size: 14px;
color: #1A2229;
text-align: center;
}
h2 {
font-size: 10px;
color: #1A2229;
text-align: center;
}
h1 {
font-size: 18px;
color: #1A2229;
text-align: center;
}
p {
text-align: left;
font-size: 12px;
margin-bottom: 0px;
margin-top: 1px;
color: #1A2229;
}
.vertical{
writing-mode:tb-rl;
-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform:rotate(180deg);
transform: rotate(180deg);
white-space:nowrap;
display:block;
bottom:0;
}
</style>
<style>
#media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0px;
/*right: -400px;*/
top: 0;
}
}
button.btn.btn-dark {
padding: 10px;
position: relative;
top: -390px;
}
</style>
<button type="button" class="btn btn-dark" onclick="window.print()"><i class="fa fa-print"></i> Print</button>
<div class="wrapper" id="section-to-print"></div> //add ID on the section u want to print
I'm currently developing a wordpress theme with PHP, but my problem is with the css. I have tree divs, which i have inside a parent div. The parents div is by default 100%, so i want to specify the parent div (class: "single-general-sec1"). I've tried to calculate how wide the parent div should be in order for me to center it, but my calculations do not work. Please help.
Parent div should, by my calculation, be: 61% + 425px, but that dosen't work.
.single-general-sec1 {
margin-top: 150px;
margin-bottom: 150px;
height: auto;
width: calc(61% + 425px);
background-color: red;
}
.single-btype-div {
width: 250px;
display: inline-block;
float: left;
}
.single-gen-header {
font-size: 14px;
color: #D9D9D9;
font-family: "Roboto";
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin: 0;
width: auto;
}
.single-gen-desc {
color: #000;
font-family: "Roboto";
font-size: 28px;
font-weight: 300;
letter-spacing: 3px;
margin: 0;
width: auto;
margin-top: 5px;
}
.single-description-div {
width: 55%;
display: inline-block;
margin-left: 3%;
float: left;
}
.single-description-desc {
color: #000;
font-family: "Roboto";
font-size: 20px;
font-weight: 300;
letter-spacing: 1px;
margin: 0;
width: auto;
margin-top: 5px;
}
.single-live-button {
margin-top: 5px;
width: 175px;
height: 40px;
background-color: #8AA6B6;
border-radius: 8px;
border: none;
color: #fff;
font-size: 15px;
font-family: "Roboto";
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.single-live-div {
width: 100px;
display: inline-block;
margin-left: 3%;
}
<div class="single-general-sec1">
<div class="single-btype-div">
<p class="single-gen-header"> - Typ av projekt </p>
<p class="single-gen-desc">
<?php the_field('project-type'); ?> </p>
</div>
<div class="single-description-div">
<p class="single-gen-header"> - Beskrivning </p>
<p class="single-description-desc">
<?php the_field('description'); ?> </p>
</div>
<div class="single-live-div">
<p class="single-gen-header"> - Se live </p>
<a href="<?php the_field('page-url') ?>"><button class="single-live-button">
Besök sida > </button></a>
</div>
</div>
You cannot center a div using % values for width. Also the calculation is wrong: 250px + 175px + 100px = 525px so, the parent div should be 525px in order to fit nested divs. But you should normalize HTML first. Or just use bootstrap.css.
Another thing. For center a div you can use display:inline-block then on his parent use text-align:center.
Or when you have a fixed width, margin:50px auto;
As you can see in the images, the text "English" isn't vertically centered in the WordPress version of the site I'm building but with the same code as I used in the HTML version it works perfectly. Any ideas why?
HTML
<div class="right-bar">
<a class="language">
<img src="img/flags/EN-us.png" alt="English / US">
<span>English</span>
</a>
<a class="search-btn">
<i class="fa fa-search"></i>
</a>
</div>
SASS
.right-bar {
background: #1f1f1f;
float: right;
height: 100%;
padding: 32px 20px 0;
position: relative;
&::after {
position: absolute;
top: 0;
right: 100%;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 98px 83px;
border-color: transparent transparent #1f1f1f;
}
.language {
border: 1px solid #363636;
border-radius: 40px;
color: #898989;
display: block;
float: left;
height: 34px;
font-size: 10px;
font-weight: 700;
line-height: 30px;
padding: 0 20px;
position: relative;
text-transform: uppercase;
z-index: 99;
}
.search-btn {
float: left;
display: block;
margin: 0 0 0 30px;
color: #fff;
font-size: 26px;
font-weight: 400;
transition: color .2s;
&:active {
color:#8eb82f;
}
}
}
SCSS
.language{
img{
vertical-align:middle;
}
}
This may help you.
I have a problem with mapping together table and form. In my table I have some values that with help of a form I want to redirect to a page.I have read that I cannot put a form into a table so I tried not to. But if I let
<form>
<table>
structure, my display on page isn't very nice and I am not responsabile with frontend part but anyway I want to not be problems with it.If I let the table, without the form the display is ok(like in image). An image in left page and the table with the information in the right part. When using form, the table goes down and it's not good. So how to do? I try to include an image here to see how my page looks like without the form, but I really need to use the form. Any suggestion how to resolve this?I mean it's possible to have the display like in the photo but plus using a form and to not change the display?
EDIT: the css where tables are displayed
/* ==========================================================================
Tables
========================================================================== */
/*
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
text-align: left;
}
table th {
padding-right: 40px;
}
html {overflow-y: scroll; overflow-x: hidden;}
body {font-family: 'Open Sans', sans-serif; background:#f0eeed; color: #676767;}
.wrapper {width: 980px; margin: 0 auto;}
#content {padding: 20px 0 80px;}
.header:after {content:"";height:0;display:block;visibility:hidden;clear:both;}
.header {background: #ef8887; border-bottom: 3px solid #db7a78;}
.header .branding-title {float: left; margin: 0 0 0 5px; font: 0/0 serif; text-shadow: none; color: transparent; width:225px; height:125px;background:url(../img/branding-title.png) 0 6px no-repeat;padding: 6px 0;}
.header .branding-title a {display: block; height: 125px; width: 225px;}
.header .nav {float: right; top: 10; right: 0; margin: 0; position: relative; left: 15px; z-index: 99999999;}
.header .nav li {display: inline-block; margin: 0; list-style: none;}
.header .nav li a {
color: white;
text-decoration: none;
display: block;
line-height: 95px;
padding: 10px 0 0;
margin: 0 0 0 50px;
width: 100px;
text-align: left;
background: url('../img/nav-sprite.png') no-repeat 0px 105px;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1px;
}
.header .nav li.on a {text-decoration:underline;}
.header .nav li a:hover, .header .nav li a:active {opacity: 0.7;}
.header .nav li.books a {background-position: 8px -5px;}
.header .nav li.movies a {background-position: 13px -105px;}
.header .nav li.music a {background-position: 15px -235px;}
.header .nav li.suggest a {background-position: 35px -340px;}
#content {min-height: 400px; background: white;}
.section.page:after {content:"";display:block;visibility:hidden;height:0;clear:both;}
.section.page {padding: 34px 0; background: white;}
.section.page h1 {
font-size: 24px;
text-align: center;
line-height: 1.6;
font-weight: normal;
}
.section.page .media-details h1 {
text-align: left;
}
.section.page p {width: 475px; margin-left: auto; margin-right: auto; }
.section.page .media-details h1 .price {color: #9d9f4e; padding-right: 10px; font-size: 34px;}
.section.catalog {padding-bottom: 42px;}
.section.catalog h2 {
font-size: 24px;
text-align: center;
line-height: 1.6;
font-weight: normal;
padding-top: 20px;
}
.section.catalog ul.items {margin: 0 0 -17px 0; padding: 0; width: 997px;}
.section.catalog ul.items li {
display: inline-block;
list-style: none;
width: 204px;
text-align: center;
padding: 14px;
margin: 0 0 17px 17px;
position: relative;
left: -17px;
}
.section.catalog ul.items li a:hover:after {
content: '+';
font-size: 50px; position: absolute; top:35px; right:30px; color: #3888c2; vertical-align: top;
}
.section.catalog ul.items li a {
background: white;
display: block;
padding: 30px 0 10px;
text-decoration: none;
}
.details-button {
color: #888;
}
.section.catalog ul.items li a:hover {
opacity: 1;
color: #666;
}
.section.catalog ul.items li img {
width: 190px;
border: 6px solid #f0eeed;
}
.section.catalog ul.items li p {
margin-left: 0;
margin-right: 0;
width: auto;
}
.media-picture {
float: left;
width: 400px;
text-align: center;
border: 1px solid #d9d9d9;
padding: 14px;
background: #f0eeed;
}
.media-picture span {
background: white;
display: block;
width: 100%;
padding: 36px 0 61px;
}
.media-picture img {width: 292px;}
.media-details {
width: 460px;
float: right;
}
.media-details form {
margin-left: 0;
}
td, th {
padding: 5px 5px;
}
form {width: 475px; margin: 34px auto;}
form tr, tr {text-align:left;vertical-align: top; padding:2px;}
form table {width: 475px; margin-bottom: 16px;}
form th {
width: 150px;
vertical-align: middle;
padding: 8px;
}
form td {
padding: 15px 15px;
}
form td select,
form td input,
form td textarea {
width: 100%;
border-radius: 4px;
padding: 10px;
border: 1px solid #a5a5a5;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
}
form input[type="submit"] {
width: 475px;
text-align: center;
border: 0;
background: #3888c2;
color: #FFF;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 16px;
padding: 14px 0 16px;
font-family: 'Open Sans', sans-serif;
}
form input[type="submit"]:hover {
background: #358dce;
cursor: pointer;
}
.search {
background: #f0eeed;
border-bottom: 3px solid #dddddd;
width:100%;
text-align:right;
}
.search form {
margin: 5px 5px 5px auto;
}
.search form input[type="submit"] {
width: auto;
text-align: center;
border: 0;
background: #3888c2;
color: #FFF;
-webkit-border-radius: 4px;
border-radius: 4px;
font-size: 16px;
padding: 6px;
font-family: 'Open Sans', sans-serif;
}
.page p.message {
background: #ffeca4;
border: 1px solid #f16702;
padding: 1em;
width: 444px;
}
.breadcrumbs {
font-size: 14px;
font-weight: normal;
padding: 14px 0 48px;
}
.breadcrumbs a {
text-decoration: none;
color: #3888c2;
}
.note-designer {
font-size: 14px;
font-style: italic;
font-weight: bold;
}
.footer {
background: #f0eeed;
border-top: 3px solid #dddddd;
padding: 42px 0;
font-size: 12px;
color: #a5a5a5;
}
.footer ul {margin: 0; padding: 0; float: left;}
.footer ul li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
.footer ul li:after {content:" | "}
.footer ul li:last-child:after {content:"";}
.footer p {margin: 0; padding-right: 3px;}
.footer a {text-decoration: none; color: #539def; margin: 0 10px;}
.footer li:first-child a {margin-left: 4px;}
.footer a:hover, .footer a:active {text-decoration: underline;}
sorry for the long code but this is what I found in style css
As mentioned previously, avoid using tables for anything but actual tabular data. Using it to position elements on the page is unpredictable at best.
You said that you aren't responsible for the front end, but do you have access to the HTML? I'm sure many of us could give you some helpful suggestions but we need a reference point beyond a screenshot :).
You might want to check out how some CSS frameworks handle this, it might give you some inspiration (http://getbootstrap.com/css/#forms). I'm not a big Bootstrap guy but there are a lot of basic examples here on form / table formatting.
You should be able to put just about anything inside a form tag without affecting the way anything on the page looks. Assuming you can't just stop using tables asap, you may have to play around with the css to clean this up. If the form tag is affecting the way anything embedded inside it looks then you might have something in your CSS styling the form element. If possible I would eliminate this styling if it exists.
I've been designing my site re-learning CSS after taking a long time, and have been essentially creating a website (integrated with WordPress) by basically doing as little as possible with the HTML/PHP, and trying to design it all from the CSS and available CLASS and IDs setup for me by a template theme. (Blankslate Theme)
This entire time it's been coming along fine in Chrome. I decided before I got too far to check it out on Firefox. Firefox decides everything should be squished to the LEFT, while in Chrome the site looks perfectly centered and matches things I try to do in the CSS.
I tried to align both the WRAPPER, Body, and even HTML to center the entire page, but Firefox refuses to do so. My fixed sidebar on the right is suppose to be spaced away from the main content, which it is in Chrome (unless you increase the size of the entire page, then it overlaps.) In Firefox, it doesn't even try to go as far right as possible, it just squishes in with everything else.
I've also wanted to use Ellipsis to cut off the text in the Sidebar if it's too long, however it refuses to work. It either cuts the text off, but does not substitute ellipsis, or runs off the page.
Below is the structure I'd like:
http://www.icesage.com/i/site2.png
Here is the CSS I'm using. As for the PHP/HTML structure you'll need to go to the actual website itself as there are too many to show here. (Again, it's WordPress, and uses the theme Blankslate as a starting point.)
body {
background-color: black;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: 110%;
line-height: 20px;
text-size: 10px;
font-family: Verdana;
}
#site-title {
position:relative;
top:0px;
margin: 0 auto;
width: 10%;
display:none;
}
/* #header {
position:relative;
top:0px;
margin: 0 auto;
width: 40%;
} */
#footer {
position: relative;
float: right;
bottom: 0;
margin: 2% auto;
right: 25%;
width: 50%;
height: 10px; /* Height of the footer */
background-color:rgba(0,0,0,0.7);
border-radius: 10px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
text-align: center:
padding-top: 5px;
padding-bottom: 9px;
padding-right: 5px;
padding-left: 5px;
display: inline
}
#copyright {
text-align: center;
}
/* Top Navigation */
#menu {
margin: 0 auto;
}
#menu a {
float: left;
color: white;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
#menu a:hover {
background-color: blue;
}
.entry-title {
font-size: large;
width:60%;
text-shadow: 2px 0.5px #1c6191;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
margin: 2px
}
/* h1 .entry-title {
display: none;
font-size: 50px;
}
h2 .entry-title {
display:none;
font-size: 50px;
}
h3 .entry-title {
font-size: 50px;
text-shadow: 2px 0.5px #1c6191;
}
h3 .widget-title {
font-size: 50px;
text-shadow: 2px 0.5px #1c6191;
}
*/
.cat-links {
display:none;
}
/* Main Content Post (Entry) */
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
}
img.alignright {float:right; margin:20px 10 10em 10em; background-color: royalblue; border: 1px;}
img.alignleft {float:left; margin:20px 10em 2em 2em;}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; text-align:center; padding-left: 20px;}
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}
.wp-caption-text {
font-size: small;
font-style:italic;
text-align:center;
}
.post-edit-link {
float: left;
color: white;
position: relative;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
.post-edit-link:hover {
background-color: blue;
}
.comments-link {
float: right;
color: white;
display: block;
position: relative;
height: 40px;
line-height: 40px;
text-decoration: none;
text-align: center;
margin-right: 10px;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 15px;
padding-left: 15px;
}
.comments-link:hover {
background-color: blue;
}
.type-page {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 40px
overflow: auto;
}
.nav-previous {
display: none;
}
.comments {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 20px
}
.comment {
width: 70%;
float: left;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 20px
}
#header {
width: 60%;
margin: 0 auto;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin-bottom: 40px;
}
#titlebanner {
margin: 0 auto;
}
.meta-sep {
display: none;
}
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin: 0 0;
margin: 20px auto;
}
.comment-respond {
color: white;
width: 60%;
float: left;
background-color:rgba(0,0,0,0.7);
border-radius: 20px;
margin: 0 auto;
box-shadow: 5px 0px 4px 0px #1c6191;
font-color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
.entry-date {
color: royalblue;
}
#wrapper {
-moz-margin-start: -40px auto;
margin-right: 0 auto;
}
/* Sidebar */
.widget-area {
position: fixed;
top: 225px;
z-index: 1;
right: 0.5%;
text-shadow: 2px 2px #1c6191;
width: 300px;
float:left;
border-left-style: solid;
border-width: 1px;
border-color: #1c6191;
background-color:rgba(0,0,0,0.9);
border-radius: 10px;
box-shadow: 4px 0px 2px 3px #1c6191;
color: white;
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
margin-right: inherit;
}
.xoxo {
display:block;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2px;
padding-left: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip
text-overflow: ellipsis
text-overflow: "…"
}
#searchsubmit {
display:none;
}
.searchform .screen-reader-text {
display:none;
}
.xoxo .screen-reader-text {
display:none;
}
.entry-content {
width: 90%;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 25px;
padding-left: 25px;
text-align:justify;
/* text-shadow: 2px 0.5px #1c6191; */
}
P {
color: white;
}
#search {
display:none
}
#site-description {
display:none
}
A {
text-decoration: none;
font-family:Verdana;
}
A:link {
text-decoration: none;
color:#04CCFD;
font-family:Verdana;
}
A:visited {
text-decoration: none;
color:#04CCFD;
font-family:Verdana;
}
A:active {text-decoration: none;
color:#04CCFD;
}
A:hover {
text-decoration: none;
color:white;
}
li .widget-container {
font-color: white;
}
/* Sub-Menu Test */
/* End Sub-Menu Test */
video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}
ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
section{display:block}
.clear{clear:both}
.sticky{}
.bypostauthor{}
.wp-caption{}
.wp-caption-text{}
.gallery-caption{}
.alignright{}
.alignleft{}
.aligncenter{}
Website: http://www.icesage.com
Or you can take a look at "Blankslate."
Any help in figuring out what I'm doing wrong or pointing out some sloppy code would be appreciated, but the main question for this post is:
How can I contain everything in the wrapper properly and have the entire site centered, including the sidebar, in all browsers (especially Firefox) like how it appears in Chrome? (Additionally, some of the layout was done accidentally, like the Comment & TopNav buttons appearing slightly off the previous area. Which I want to keep, but I'm not sure how to properly keep it that way.)
I searched thoroughly and the answers provided keep telling me the appropriate CSS to use, and I keep using it to no avail. Other questions are simply left unanswered.
Any help would be appreciated!
The problem is coming from the way you used transform-origin for firefox browser. Look at the following class
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin: 0 0;
margin: 20px auto;
}
As you mentioned "0 0" for origin property. The first value is the horizontal position, the second value is the vertical. So it aligned to left and top position. If you want horizontally center the page then you need to give "center, top" or "50%,0". Update your CSS like below.
html {
zoom: .8;
-moz-transform: scale(0.8);
-moz-transform-origin:50% 0;
margin: 20px auto;
}
Additional Question asked by OP in the comment box:
do you know why the sidebar is still condensed and overlapping the content on the left, when it doesn't do that in Chrome?
This issue came because the default behavior of chrome and firefox. Look at the following class.
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
}
The default chrome property for box-sizing:border-box and firefox is box-sizing:content-box. This is causing the problem. Check what is the difference between these to here
So force firefox to use border-box property for box-sizing. Update the CSS like below.
.post {
width: 70%;
background-color:rgba(0,0,0,0.9);
border-radius: 20px;
box-shadow: 5px 0px 4px 0px #1c6191;
color: white;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
margin: 30px;
margin-left: 5px;
-moz-box-sizing:border-box;
}
The site looks in Chrome exactly as it looks in Firefox. Because of this here:
margin-right: 0 auto;
which is an invalid property for margin-right. You want
margin: 0 auto;