at-rul or selector expected css(css-ruleorselectorexpected) - css

I'm confused. Was trying to get rid of render blocking css on my website.
So I followed an instruction of aoxao.co.
I use Wordpress and Autoptimize for minifying all my .css file to one file.
Now I generated a critical path file for my homepage on jonassebastianohlsson.com.
Unfortunately I get the error mentioned in the title.
You can find all of the code down below and the line which produces the error in between (the line with the charset rule.
Have I missed anything?
BTW: I already tried the solution of another post which said I should untick the "Validate: Styles" - option in Visual Studio Code.
Thanks for your help!
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
article,header,nav,section {
display: block
}
a {
background-color: transparent
}
strong {
font-weight: bold
}
img {
border: 0
}
button {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button {
text-transform: none
}
button {
-webkit-appearance: button
}
button::-moz-focus-inner {
border: 0;
padding: 0
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
html {
font-size: 10px
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff
}
button {
font-family: inherit;
font-size: inherit;
line-height: inherit
}
a {
color: #337ab7;
text-decoration: none
}
img {
vertical-align: middle
}
.img-responsive {
display: block;
max-width: 100%;
height: auto
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0
}
h2,h4 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit
}
h2 {
margin-top: 20px;
margin-bottom: 10px
}
h4 {
margin-top: 10px;
margin-bottom: 10px
}
h2 {
font-size: 30px
}
h4 {
font-size: 18px
}
p {
margin: 0 0 10px
}
ul {
margin-top: 0;
margin-bottom: 10px
}
ul ul {
margin-bottom: 0
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px
}
#media (min-width:768px) {
.container {
width: 750px
}
}
#media (min-width:992px) {
.container {
width: 970px
}
}
#media (min-width:1200px) {
.container {
width: 1170px
}
}
.row {
margin-left: -15px;
margin-right: -15px
}
.collapse {
display: none
}
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent
}
.dropdown {
position: relative
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
text-align: left;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-webkit-background-clip: padding-box;
background-clip: padding-box
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap
}
.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none
}
.nav>li {
position: relative;
display: block
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent
}
#media (min-width:769px) {
.navbar {
border-radius: 4px
}
}
#media (min-width:769px) {
.navbar-header {
float: left
}
}
.navbar-collapse {
overflow-x: visible;
padding-right: 15px;
padding-left: 15px;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch
}
#media (min-width:769px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none
}
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important
}
.navbar-fixed-top .navbar-collapse {
padding-left: 0;
padding-right: 0
}
}
.navbar-fixed-top .navbar-collapse {
max-height: 340px
}
#media (max-device-width:480px) and (orientation:landscape) {
.navbar-fixed-top .navbar-collapse {
max-height: 200px
}
}
.container>.navbar-header,.container>.navbar-collapse {
margin-right: -15px;
margin-left: -15px
}
#media (min-width:769px) {
.container>.navbar-header,.container>.navbar-collapse {
margin-right: 0;
margin-left: 0
}
}
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030
}
#media (min-width:769px) {
.navbar-fixed-top {
border-radius: 0
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px
}
.navbar-brand {
float: left;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
height: 50px
}
.navbar-brand>img {
display: block
}
#media (min-width:769px) {
.navbar>.container .navbar-brand {
margin-left: -15px
}
}
.navbar-toggle {
position: relative;
margin-right: 5px;
padding: 9px 10px;
margin-top: 8px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-ms-border-radius: 1px;
-o-border-radius: 1px
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px
}
#media (min-width:769px) {
.navbar-toggle {
display: none
}
}
.navbar-nav {
margin: 7.5px -15px
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px
}
#media (min-width:769px) {
.navbar-nav {
float: left;
margin: 0
}
.navbar-nav>li {
float: left
}
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px
}
}
.navbar-nav>li>.dropdown-menu {
margin-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0
}
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7
}
.navbar-default .navbar-brand {
color: #777
}
.navbar-default .navbar-nav>li>a {
color: #777
}
.navbar-default .navbar-toggle {
border-color: #ddd
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #888
}
.navbar-default .navbar-collapse {
border-color: #e7e7e7
}
.container:before,.container:after,.row:before,.row:after,.nav:before,.nav:after,.navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after,.navbar-collapse:before,.navbar-collapse:after {
content: " ";
display: table
}
.container:after,.row:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after {
clear: both
}
#-ms-viewport {
width: device-width
}
h2 {
font-size: 37px
}
h4 {
font-size: 27px
}
#media (max-width:768px) {
h2 {
font-size: 28px
}
h4 {
font-size: 22px
}
}
body {
font-size: 14px
}
.navbar a {
font-size: 12px
}
#charset "UTF-8".navbar button.navbar-toggle { -webkit-box-shadow:
none; -moz-box-shadow: none; box-shadow: none }
.navbar .navbar-brand,.hestia-about p {
font-size: 18px
}
body {
font-size: 14px
}
.navbar,.navbar a {
font-size: 12px
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
line-height: 1.618
}
ul {
line-height: 1.618
}
h2,h4 {
font-weight: 500;
line-height: 1.618
}
button {
font-size: 12px;
font-weight: 400
}
button {
font-size: inherit;
line-height: inherit
}
.navbar .navbar-brand {
line-height: 30px
}
.navbar .navbar-nav>li>a {
font-weight: 400
}
.navbar .dropdown-menu li>a {
font-size: 13px
}
.hestia-about {
font-weight: 300
}
.hestia-about h2,.hestia-about h4 {
font-weight: 700
}
#media (max-width:768px) {
.navbar .navbar-nav li .caret {
font-size: 20px
}
.navbar .navbar-nav .dropdown .dropdown-menu li a {
line-height: 20px
}
}
body {
direction: ltr;
color: #3c4858;
font-family: "Roboto", "Helvetica", "Arial", sans-serif
}
h2,h4 {
font-family: "Roboto", "Helvetica", "Arial", sans-serif
}
a {
color: #9c27b0
}
.container {
max-width: 100%
}
#media (min-width:749px) {
.container {
max-width: 748px
}
}
#media (min-width:768px) {
.container {
max-width: 750px
}
}
#media (min-width:992px) {
.container {
max-width: 970px
}
}
#media (min-width:1200px) {
.container {
max-width: 2000px
}
}
body {
direction: ltr;
background-color: #e5e5e5;
overflow-x: hidden
}
img,button {
max-width: 100%
}
img {
height: auto
}
ul {
margin-bottom: 30px
}
.container {
max-width: 100%
}
:focus,:active,::-moz-focus-inner {
outline: 0!important
}
button {
border: 0
}
button {
font-family: inherit;
padding: 7px
}
button {
position: relative;
margin: 10px 1px;
padding: 12px 30px;
border: none;
border-radius: 3px;
white-space: normal;
letter-spacing: 0;
text-transform: uppercase
}
button {
-webkit-box-shadow: 0 2px 2px 0 rgba(153, 153, 153, .14), 0 3px 1px -2px rgba(153, 153, 153, .2), 0 1px 5px 0 rgba(153, 153, 153, .12);
-moz-box-shadow: 0 2px 2px 0 rgba(153, 153, 153, .14), 0 3px 1px -2px rgba(153, 153, 153, .2), 0 1px 5px 0 rgba(153, 153, 153, .12);
box-shadow: 0 2px 2px 0 rgba(153, 153, 153, .14), 0 3px 1px -2px rgba(153, 153, 153, .2), 0 1px 5px 0 rgba(153, 153, 153, .12)
}
button {
-webkit-box-shadow: 0 2px 2px 0 rgba(156, 39, 176, .14), 0 3px 1px -2px rgba(156, 39, 176, .2), 0 1px 5px 0 rgba(156, 39, 176, .12);
-moz-box-shadow: 0 2px 2px 0 rgba(156, 39, 176, .14), 0 3px 1px -2px rgba(156, 39, 176, .2), 0 1px 5px 0 rgba(156, 39, 176, .12);
box-shadow: 0 2px 2px 0 rgba(156, 39, 176, .14), 0 3px 1px -2px rgba(156, 39, 176, .2), 0 1px 5px 0 rgba(156, 39, 176, .12)
}
button {
color: #fff;
background-color: #9c27b0
}
.navbar button.navbar-toggle {
color: #555
}
.navbar {
background-color: #fff;
color: #555;
border-radius: 0;
position: fixed;
border: none;
padding: 0;
-webkit-box-shadow: 0 1px 10px -6px rgba(0, 0, 0, .42), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 4px 5px -2px rgba(0, 0, 0, .1);
box-shadow: 0 1px 10px -6px rgba(0, 0, 0, .42), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 4px 5px -2px rgba(0, 0, 0, .1)
}
.navbar .navbar-collapse {
border: none
}
.navbar .title-logo-wrapper {
max-width: 250px;
display: flex;
align-items: center
}
.navbar>.container {
display: flex;
padding: 10px 15px;
vertical-align: middle;
align-items: center
}
.navbar.hestia_left .navbar-collapse {
margin-left: auto
}
.navbar.hestia_left>.container {
flex-direction: row
}
.navbar.hestia_left .navbar-nav {
display: flex;
flex-wrap: wrap;
justify-content: flex-end
}
.navbar .navbar-header .navbar-brand {
padding: 0 15px;
position: relative;
color: inherit;
height: auto
}
.navbar .navbar-header .navbar-brand img {
width: auto;
max-height: 50px
}
.navbar-toggle-wrapper {
margin-left: auto;
display: flex;
align-items: center;
flex-direction: row
}
.navbar .navbar-toggle {
float: none;
border: 0;
margin-right: 0
}
.navbar .navbar-toggle .icon-bar {
border: 1px solid;
position: relative
}
.navbar .navbar-nav>li {
margin: 0
}
.navbar .navbar-nav>li>a {
text-transform: uppercase
}
.navbar .navbar-nav>li a {
padding-top: 15px;
padding-bottom: 15px;
border-radius: 3px;
color: inherit
}
.navbar .navbar-nav>li .dropdown-menu {
margin-top: -5px;
border: none
}
.navbar .navbar-nav>li .dropdown-menu li {
color: #333;
position: relative
}
.navbar .navbar-nav>li .dropdown-menu li>a {
background-color: transparent;
margin: 0 5px;
padding: 10px;
border-radius: 2px
}
.navbar .navbar-nav>li:not(.btn)>a:before {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 3px;
background-color: rgba(255, 255, 255, .1);
content: "";
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 50%;
-ms-transform-origin: 50%;
transform-origin: 50%
}
#main-navigation ul.nav>li {
opacity: 1;
visibility: visible
}
.hestia-about {
padding: 65px 0 30px
}
.hestia-about {
background-attachment: fixed;
color: #999
}
.hestia-about h2,.hestia-about h4 {
color: #3c4858;
text-decoration: none;
word-wrap: break-word;
font-family: "Roboto Slab", "Times New Roman", serif
}
.blog-post {
word-wrap: break-word
}
.main {
position: relative;
background: #fff
}
.main-raised {
margin: -60px 30px 0;
border-radius: 6px 6px 0 0;
-webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2);
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -5px rgba(0, 0, 0, .2)
}
.home .main-raised section:first-of-type {
border-radius: 6px 6px 0 0;
overflow: hidden
}
#media (max-width:1199px) {
.hestia-about .row {
padding: 0 15px
}
.main-raised {
margin: -60px 15px 0
}
}
#media (max-width:991px) {
.navbar .navbar-nav>li {
margin-right: 10px;
margin-left: 10px
}
.hestia-about .row {
padding: 0 10px
}
}
#media (min-width:992px) {
.navbar .navbar-collapse {
text-align: center
}
.navbar .navbar-nav>li {
margin: 0
}
}
#media (min-width:769px) {
.navbar.hestia_left .title-logo-wrapper {
min-width: 250px
}
.dropdown .dropdown-menu {
display: block;
visibility: hidden;
margin-top: -20px;
opacity: 0
}
}
#media (max-width:768px) {
.container .navbar-header {
width: 100%;
display: flex;
margin: 0 auto
}
.navbar>.container {
padding: 10px 15px;
align-items: center;
display: block
}
.navbar .nav.navbar-nav {
display: block
}
.navbar.navbar-fixed-top .navbar-collapse {
max-height: calc(100% - 70px);
margin-top: 70px;
overflow-y: auto;
position: fixed;
z-index: 9999;
background: #fff;
width: 100%;
left: 0;
top: 0;
margin-left: 0;
margin-right: 0;
-webkit-overflow-scrolling: auto
}
.navbar .navbar-nav {
margin: 7.5px 0
}
.navbar .navbar-nav li {
box-sizing: border-box;
float: left;
margin: 0;
padding: 0;
width: 100%;
text-align: left
}
.navbar .navbar-nav .dropdown a .caret {
border: 1px solid #555;
border-radius: 2px;
box-sizing: content-box;
color: #555;
display: inline-block;
font-family: "Font Awesome 5 Free";
font-weight: 900;
height: 30px;
margin-left: 0;
position: absolute;
right: 15px;
text-align: center;
top: 10px;
width: 30px;
z-index: 100
}
.navbar .navbar-nav .dropdown a .caret:before {
content: "\f107";
top: 5px;
position: relative;
display: inline-block
}
.navbar .navbar-nav .dropdown .dropdown-menu {
background: 0 0;
box-shadow: none;
position: static;
margin-top: 0;
padding: 0;
width: 100%
}
.navbar .navbar-nav .dropdown .dropdown-menu li a {
margin: 0;
padding: 15px 0 15px 30px
}
.navbar .navbar-header .navbar-brand {
padding-left: 0
}
.home .main-raised section:first-of-type {
border-radius: 0
}
.main-raised {
margin-right: 0;
margin-left: 0;
border-radius: 0
}
.hestia-about {
padding-top: 30px
}
.hestia-about h2 {
margin-top: 0
}
.home:not(.blog) .main-raised {
margin-top: 0
}
}
.elementor-page .hestia-about>.container {
width: 100%
}
.home.elementor-page .main-raised>section.hestia-about {
overflow: visible
}
.elementor-text-editor p {
font-size: inherit
}
a {
color: #002970
}
button {
background-color: #002970
}
h2,h4,.hestia-about h2,.hestia-about h4 {
font-family: Sanchez
}
body,ul {
font-family: Sanchez
}
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
#font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 400;
font-display: auto;
src: url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-regular-400.eot);
src: url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-regular-400.woff2) format("woff2"), url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-regular-400.woff) format("woff"), url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-regular-400.ttf) format("truetype"), url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-regular-400.svg#fontawesome) format("svg")
}
#font-face {
font-family: "Font Awesome 5 Free";
font-style: normal;
font-weight: 900;
font-display: auto;
src: url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-solid-900.eot);
src: url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-solid-900.woff2) format("woff2"), url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-solid-900.woff) format("woff"), url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-solid-900.ttf) format("truetype"), url(//analogninja.de/wp-content/themes/hestia/assets/font-awesome/css/../webfonts/fa-solid-900.svg#fontawesome) format("svg")
}
.elementor-clearfix:after {
content: "";
display: block;
clear: both;
width: 0;
height: 0
}
.elementor {
-webkit-hyphens: manual;
-ms-hyphens: manual;
hyphens: manual
}
.elementor *,.elementor:after,.elementor:before {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.elementor a {
-webkit-box-shadow: none;
box-shadow: none;
text-decoration: none
}
.elementor img {
height: auto;
max-width: 100%;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none
}
.elementor-section {
position: relative
}
.elementor-section .elementor-container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-right: auto;
margin-left: auto;
position: relative
}
.elementor-section.elementor-section-boxed>.elementor-container {
max-width: 1140px
}
.elementor-row {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
#media (max-width:1024px) {
.elementor-row {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
.elementor-column-wrap {
width: 100%;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.elementor-widget-wrap {
position: relative;
width: 100%;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start
}
.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.elementor-widget-wrap>.elementor-element {
width: 100%
}
.elementor-widget {
position: relative
}
.elementor-column {
position: relative;
min-height: 1px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated {
padding: 10px
}
#media (min-width:768px) {
.elementor-column.elementor-col-100 {
width: 100%
}
}
#media (max-width:767px) {
.elementor-column {
width: 100%
}
}
.elementor-widget-heading .elementor-heading-title {
padding: 0;
margin: 0;
line-height: 1
}
.elementor-widget-heading .elementor-heading-title {
font-family: "Sanchez", Sans-serif;
font-weight: 600
}
.elementor-widget-text-editor {
font-family: "Sanchez", Sans-serif;
font-weight: 400
}
.elementor-386 .elementor-element.elementor-element-b5f43bf>.elementor-container {
max-width: 900px
}
.elementor-386 .elementor-element.elementor-element-b5f43bf {
margin-top: -40px;
margin-bottom: 0
}
.elementor-386 .elementor-element.elementor-element-6dfb8a4.elementor-widget-heading .elementor-heading-title {
color: #0c0c0c
}
.elementor-386 .elementor-element.elementor-element-6dfb8a4 .elementor-heading-title {
font-family: "Sanchez", Sans-serif;
font-weight: 700
}
.elementor-386 .elementor-element.elementor-element-5451f39>.elementor-container {
max-width: 900px
}
.elementor-386 .elementor-element.elementor-element-fe48f01 {
color: #0c0c0c;
font-size: 1.3em
}
.elementor-386 .elementor-element.elementor-element-14a2f0a>.elementor-container {
max-width: 900px
}
.elementor-386 .elementor-element.elementor-element-061141d.elementor-widget-heading .elementor-heading-title {
color: #0f0f0f
}
.elementor-386 .elementor-element.elementor-element-1284051>.elementor-container {
max-width: 900px
}
.elementor-386 .elementor-element.elementor-element-7755a44 {
color: #0c0c0c;
font-size: 1.3em
}
.elementor-386 .elementor-element.elementor-element-c88de32>.elementor-container {
max-width: 900px
}
.elementor-386 .elementor-element.elementor-element-7c59ba1.elementor-widget-heading .elementor-heading-title {
color: #0c0c0c
}
.elementor-386 .elementor-element.elementor-element-39a07a8>.elementor-container {
max-width: 900px
}
.elementor-386 .elementor-element.elementor-element-f0bdcd3 {
color: #0c0c0c;
font-size: 1.3em
}
.elementor-386 .elementor-element.elementor-element-d63182f>.elementor-container {
max-width: 900px
}
.elementor-386 .elementor-element.elementor-element-953030e .obfx-grid-col-image {
height: 230px;
border-radius: 15px;
margin: 0
}
.elementor-386 .elementor-element.elementor-element-953030e .obfx-grid-wrapper {
padding-right: calc(15px);
padding-left: calc(15px);
padding-bottom: 30px
}
.elementor-386 .elementor-element.elementor-element-953030e .obfx-grid-container {
margin-left: calc(-15px);
margin-right: calc(-15px)
}
#media (max-width:767px) {
.elementor-386 .elementor-element.elementor-element-b5f43bf {
margin-top: -15px;
margin-bottom: 0
}
.elementor-386 .elementor-element.elementor-element-6dfb8a4>.elementor-widget-container {
margin: 10px 0 0
}
.elementor-386 .elementor-element.elementor-element-fe48f01 {
font-size: 1.1em
}
.elementor-386 .elementor-element.elementor-element-7755a44 {
font-size: 1.1em
}
.elementor-386 .elementor-element.elementor-element-f0bdcd3 {
font-size: 1.1em
}
.elementor-386 .elementor-element.elementor-element-953030e .obfx-grid-wrapper {
padding-right: calc(0px);
padding-left: calc(0px);
padding-bottom: 10px
}
.elementor-386 .elementor-element.elementor-element-953030e .obfx-grid-container {
margin-left: calc(0px);
margin-right: calc(0px)
}
}
body.custom-background {
background-color: #686868
}
.navbar .navbar-header .navbar-brand img {
max-height: 60px
}
.navbar .navbar-nav>li>a {
font-size: 14px!important
}
a {
color: #1e8dfc
}
.lazyload {
opacity: 0
}
.obfx-grid:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
font-size: 0;
content: " "
}
.obfx-grid-container {
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-right: -15px;
margin-left: -15px;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.obfx-grid-wrapper {
padding-right: 15px;
padding-left: 15px
}
.obfx-grid .obfx-grid-col-image {
display: block;
overflow: hidden;
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0 0 10px;
box-shadow: 0 3px 10px 0 rgba(181, 181, 181, 1)
}
.obfx-grid .obfx-grid-col-image {
display: inline-block;
width: 100%;
height: 200px
}
.obfx-grid .obfx-grid-col-image img {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
max-width: none;
height: auto;
max-height: none;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.obfx-grid-desktop-1 .obfx-grid-wrapper {
width: 100%
}

Related

Navigation position "absolute" not working

I'm trying to move the Navigation position "menu" to the top, check the pic:
.site-header-layout-two .main-navigation {
position: absolute;
bottom: 0;
right: 20px;
margin: 0;
top: 1px;
}
But if I change the top value or bottom value automatically the menu will stuck at the bottom.
Am I doing it wrong! or there is other code line conflict with this one! Here is my full code if you want to check other things:
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/*---------
# Typography
----------*/
body,
button,
input,
select,
textarea {
color: #808080;
font-size: 16px;
font-size: 14px;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
}
p {
margin: 0 0 25px;
}
dfn,
cite,
em,
i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code,
kbd,
tt,
var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 15px;
font-size: 0.9375rem;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,
ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
}
/*---------
# Elements
----------*/
html {
box-sizing: border-box;
}
*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
box-sizing: inherit;
}
body {
background: #FFF; /* Fallback for when there is no custom background color defined. */
background-position: center top;
background-size: cover;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote,
q {
quotes: "" "";
}
hr {
background-color: #ccc;
border: 0;
height: 1px;
margin-bottom: 1.5em;
}
ul,
ol {
margin: 0 0 25px 20px;
padding: 0 0 0 10px;
}
ul li,
ol li {
margin: 0 0 12px;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li > ul,
li > ol {
margin-bottom: 0;
margin-left: 1.5em;
}
dt {
font-weight: bold;
}
dd {
margin: 0 1.5em 1.5em;
}
img {
height: auto; /* Make sure images are scaled correctly. */
max-width: 100%; /* Adhere to container width. */
}
figure {
margin: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
table {
margin: 0 0 1.5em;
width: 100%;
}
th {
font-weight: bold;
}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: 300;
line-height: 1.0em;
word-wrap: break-word;
color: #5E5E5E;
margin-top: 0;
}
h1 {
font-size: 32px;
margin-bottom: .55em;
}
h2 {
font-size: 28px;
margin-bottom: .65em;
}
h3 {
font-size: 22px;
margin-bottom: .8em;
}
h4 {
font-size: 20px;
margin-bottom: 1.1em;
}
h5 {
font-size: 16px;
margin-bottom: 1.3em;
}
h6 {
font-size: 14px;
margin-bottom: 1.4em;
}
.entry-content code {
display: block;
background: #f7f7f7;
border: 1px solid #D8D8D8;
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09);
margin: 5px 0;
overflow-x: auto;
}
/*------------
# Navigation
------------*/
/*-----------
## Links
---------------*/
a {
text-decoration: none;
outline: none;
box-shadow: none;
}
a:visited {
}
a:hover,
a:focus,
a:active {
}
a:focus {
}
a:hover,
a:active {
outline: 0;
}
/*---------
## Menus
---------*/
.main-navigation ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation li {
position: relative;
float: left;
margin: 0 5px;
text-transform: uppercase;
}
.main-navigation li a {
display: block;
text-decoration: none;
font-weight: 400;
color: #FFF;
}
.main-navigation li a span {
display: none;
}
.main-navigation ul ul {
background-color: rgba(0, 0, 0, 0.9);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
float: left;
position: absolute;
top: 57px;
left: -999em;
z-index: 99999;
display: none;
}
.main-navigation ul ul a {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
white-space: nowrap;
text-align: left;
width: 100%;
padding: 15px 25px 15px 20px;
min-width: 190px;
float: none;
}
.main-navigation ul ul ul {
top: 1px;
}
.main-navigation ul ul li {
float: none;
width: 100%;
display: block;
margin: 0;
}
.main-navigation li:hover > a,
.main-navigation li.focus > a {
}
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: 0;
display: block;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
right: 100%;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
}
/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
display: block;
}
#main-menu:after {
display: block;
content: '';
clear: both;
}
.header-menu-button {
display: none;
}
.menu-dropdown-btn {
display: none;
position: absolute;
top: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.1);
color: #838383;
margin: 0;
padding: 10px 14px;
/* box-shadow: -1px 0 0 rgba(0, 0, 0, 0.08); */
height: 35px;
line-height: 15px;
text-align: center;
font-size: 14px;
z-index: 9;
cursor: pointer;
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
/* Small menu */
.menu-toggle {
display: none;
}
.main-menu-close {
display: none;
}
/*-----------
# Accessibility
-------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
/*--------------
# Alignments
---------------*/
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/*-------------
# Clearings
--------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: "";
display: table;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
clear: both;
}
/* -------- Header Elements -------- */
.site-header {
background-color: rgba(0, 0, 0, 0.8);
position: relative;
color: #FFF;
}
.site-header-layout-two .site-header {
box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.6) inset;
padding: 0 0 5px;
}
.site-header .site-container {
position: relative;
max-width: 1280px;
}
.header-container {
position: relative;
z-index: 4;
}
.header-social-icon {
font-size: 15px;
color: inherit;
margin: 2px 0 0 10px;
display: inline-block;
vertical-align: top;
}
.site-branding {
float: left;
position: relative;
z-index: 12;
padding: 30px 0;
}
.site-branding-img {
padding: 0;
}
.site-branding a {
display: block;
line-height: inherit;
}
.site-branding a img {
display: block;
}
.site-title {
margin: 0;
padding: 0 0 10px;
font-size: 40px;
line-height: 50px;
font-weight: 300;
text-transform: uppercase;
}
.site-description {
margin: 0;
padding: 0;
font-size: 15px;
line-height: 16px;
font-weight: 300;
text-transform: uppercase;
color: inherit;
}
.site-header-right {
position: absolute;
top: 50%;
right: 20px;
margin: -70px 0 0;
text-align: right;
}
.site-header-right-txt {
margin: -52px 0 0;
}
.site-header-right-no-txt {
margin: -70px 0 0;
}
.site-header-right-no-ss {
margin: -38px 0 0;
}
.site-header-right-no-sst {
margin: -58px 0 0;
}
.site-header-signup {
}
.site-header-cart {
}
.site-header-right-top {min-height: 36px;}
.site-topbar-right-no {
font-size: 15px;
border-bottom: 1px dashed #FFF;
padding: 0 0 5px;
}
.site-topbar-right-no i.fa {
font-size: 14px;
margin: 0 2px 0 4px;
}
.site-topbar-right-no span {
font-size: 24px;
margin: 0 0 0 30px;
}
.site-header-right-bottom {
padding: 6px 0 0;
}
.site-header-social {
padding: 2px 0 0;
}
.social-pinterest span {
font-size: 11px;
position: relative;
top: -2px;
margin: 0 0 0 4px;
}
.header-cart {
display: inline-block;
vertical-align: middle;
padding: 0;
}
.header-cart a {
display: inline-block;
vertical-align: middle;
color: inherit;
text-transform: uppercase;
}
a.header-cart-contents {
color: inherit !important;
}
.header-cart-amount {
}
.header-cart-checkout {
margin: 0 0 0 4px;
font-size: 16px;
}
#main-menu {
text-align: center;
}
.main-navigation {
padding: 0;
-webkit-transition: right 0.4s ease 0s;
-moz-transition: right 0.4s ease 0s;
-ms-transition: right 0.4s ease 0s;
-o-transition: right 0.4s ease 0s;
transition: right 0.4s ease 0s;
}
.site-header-layout-one .main-navigation {
background-color: rgba(0, 0, 0, 1);
position: relative;
z-index: 4;
}
.site-header-layout-one .main-navigation li a {
padding: 18px 20px 18px;
}
.site-header-layout-one .main-navigation ul ul li a {
padding: 14px 25px 16px;
}
.main-navigation ul ul li {
position: relative;
}
.main-navigation ul ul ul {
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
right: auto;
left: 0;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
right: auto;
left: 100%;
}
/* -------- Header Layout Two -------- */
.site-top-bar {
background-color: rgba(0, 0, 0, 0.6);
}
.site-top-bar-left {
float: left;
padding: 2px 0 0;
min-height: 31px;
}
.site-top-bar-right {
float: right;
padding: 2px 0 0;
min-height: 31px;
}
.site-header-layout-two {
}
.site-header-layout-two .header-social-icon {
margin: 0 10px 0 0;
}
.site-header-layout-two .site-topbar-right-no {
display: inline-block;
font-size: inherit;
vertical-align: middle;
margin: 0 12px 0 0;
padding: 0;
border: 0;
}
.site-header-layout-two .site-topbar-right-no span {
font-size: inherit;
}
.site-header-layout-two .main-navigation {
position: absolute;
bottom: 0;
right: 20px;
margin: 0;
}
.site-header-layout-two .main-navigation li {
margin: 0;
}
.site-header-layout-two .main-navigation li a {
padding: 55px 25px 60px;
}
.site-header-layout-two .main-navigation ul li:last-child a {
padding: 55px 0 60px 25px;
}
.site-header-layout-two .main-navigation ul ul li a {
padding: 14px 25px 16px !important;
}
.site-header-layout-two .main-navigation ul ul {
top: 130px;
border-top: 6px solid #000;
}
.site-header-layout-two .main-navigation ul ul ul {
top: 1px;
border: 0;
}
.sabino-header-nav {
display: inline-block;
vertical-align: middle;
margin: -1px 8px 0 0;
}
.sabino-header-nav ul {
margin: 0;
padding: 0;
}
.sabino-header-nav ul li {
display: inline-block;
vertical-align: middle;
list-style-type: none;
margin: 0;
padding: 0;
}
.sabino-header-nav ul li a {
display: block;
text-transform: uppercase;
padding: 0px 3px;
margin: 0 2px;
color: inherit;
}
.sabino-header-nav ul li:first-child a {
padding: 0px 3px 0 0;
margin: 0 2px 0 0;
}
body.show-site-search .search-block {
display: block;
}
/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
display: none;
}
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
display: block;
}
/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
display: block;
}
#media only screen and (max-width: 960px) {
.menu-dropdown-btn {
display: block;
}
.header-menu-button {
display: block;
padding: 14px 0 16px;
text-transform: uppercase;
font-size: 17px;
cursor: pointer;
text-align: center;
}
.header-menu-button i {
font-size: 17px;
vertical-align: middle;
}
.header-menu-button span {
vertical-align: middle;
margin: 0 0 0 6px;
}
.site-header-layout-two .header-menu-button {
padding: 48px 0 60px 80px;
}
.main-navigation #main-menu {
color: #FFFFFF;
position: fixed;
top: 0;
right: -280px;
width: 280px;
max-width: 100%;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 82px 22px 30px 22px;
background: #000000;
z-index: 99998;
height: 100%;
overflow: auto;
transition: right 0.4s ease 0s;
}
.main-navigation li {
display: block;
float: none;
}
.main-navigation li a {
display: block;
float: none;
padding: 8px 0 !important;
color: #C5C5C5 !important;
text-align: left;
}
.main-navigation ul ul {
position: relative !important;
top: 0 !important;
left: 0 !important;
float: none !important;
background-color: rgba(255, 255, 255, 0.14) !important;
padding: 0;
margin: 0;
display: none !important;
}
.main-navigation ul ul li:last-child a,
.main-navigation ul ul li a {
padding: 7px 10px;
width: auto;
}
.main-navigation ul ul li a {
background: none !important;
}
#primary-menu {
display: block;
}
.main-menu-close {
display: block;
border-radius: 4px;
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
color: #898989;
text-align: center;
padding: 0 8px 0 12px;
height: 40px;
line-height: 38px;
cursor: pointer;
z-index: 99;
}
.main-menu-close .fa-angle-left {
position: relative;
left: -4px;
}
li.open-page-item > ul.children,
li.open-page-item > ul.sub-menu {
display: block !important;
}
body.admin-bar .main-menu-close {
top: 52px;
}
body.admin-bar .header-cart {
top: 55px;
}
}
#media only screen and (max-width: 880px) {
.post-loop-thumbnail {
float: none !important;
width: 100% !important;
}
.post-loop-content {
float: none !important;
width: 100% !important;
padding: 20px 5px 0 !important;
}
.content-layout-blocks .sabino-blog-breakup .post-loop-thumbnail {
position: relative !important;
height: 400px !important;
}
.content-layout-blocks .sabino-blog-breakup .post-loop-content {
margin: 0 !important;
padding: 20px !important;
}
.content-layout-blocks .sabino-blog-breakup .blog-top-layout .post-loop-thumbnail {
height: auto !important;
}
}
#media only screen and (max-width: 782px) {
.page-template-default .content-area,
.woocommerce #container,
.woocommerce-page #container,
.content-area {
box-shadow: none;
width: 100%;
float: none;
padding: 25px 0 30px;
}
.content-layout-blocks.content-joined-widgets .content-area,
.content-layout-blocks.content-joined-widgets #container,
.content-layout-blocks.content-broken-widgets .content-area,
.content-layout-blocks.content-broken-widgets #container {
box-shadow: none;
width: 100%;
float: none !important;
padding: 25px 20px 30px;
}
.content-layout-blocks .site-container-main {
padding: 0 20px;
}
.page-template-default .widget-area,
.widget-area,
.content-layout-blocks.content-broken-widgets .widget-area {
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08);
width: 100%;
float: none;
padding: 0 0 5px !important;
margin: 0 0 10px;
}
.page-template-template-left-sidebar-php .content-area {
box-shadow: none;
width: 100%;
float: none;
padding: 25px 0 30px;
}
.page-template-template-left-sidebar-php .widget-area,
.page-template-template-left-sidebar-php .content-layout-blocks.content-broken-widgets .widget-area {
box-shadow: none;
width: 100%;
float: none;
padding: 0 0 5px;
margin: 0 0 10px;
}
/*--------------------------------------------------------------
Header One Styling
--------------------------------------------------------------*/
.site-branding {
float: none;
padding: 10px 0;
text-align: center;
}
.site-header-right {
position: relative;
margin: 0;
top: auto;
right: auto;
text-align: center;
}
.site-header-right-top {
min-height: initial;
}
.site-header-right-bottom {
padding: 0 0 5px;
}
.site-header-layout-two .main-navigation {
position: relative;
right: auto;
}
.site-header-layout-two .header-menu-button {
padding: 5px 0 15px;
}
.site-top-bar-left {
float: none;
text-align: center;
min-height: 20px;
}
.site-top-bar-right {
float: none;
text-align: center;
padding: 2px 0 2px;
}
.search-block {
position: relative;
top: 0 !important;
right: 0;
padding: 12px;
}
.search-block .search-field {
width: 100%;
}
.site-footer-standard .site-footer-widgets .site-container > ul {
display: block;
}
.site-footer-standard .site-footer-widgets .site-container > ul > li {
display: block;
width: 100%;
padding: 10px 0 20px !important;
}
.site-footer-bottom-bar-left,
.site-footer-bottom-bar-right {
float: none;
text-align: center;
}
}
body.show-main-menu #main-menu {
right: 0px !important;
}
body.show-main-menu #page {
right: 280px !important;
}
change below class, reduce the padding
.site-header-layout-two .main-navigation li a {
padding: 19px 25px 6px;
}
and remove below code
.site-header-layout-two .main-navigation ul li:last-child a {
padding: 55px 0 60px 25px;
}
Maybe try setting float: left; on the "Martcor" logo, and float: right; on you navigation items on the right side.

SlickNav menu doesn't move, prependTo doesn't work

I have slicknav on my Wordpress theme but it stays on top of the page. I tried editing the prependto, but still it doesnt move. Here's the HTML:
<div class="logo-wrap">logo html</div>
<nav class="main-nav"></nav>
<div class="mobile-nav"></div>
<div id="hello">this is where I want the slick nav to appear</div>`
Here's the JS:
;(function ($, document, window) {
var
// default settings object.
defaults = {
label: 'MENU',
duplicate: true,
duration: 200,
easingOpen: 'swing',
easingClose: 'swing',
closedSymbol: '►',
openedSymbol: '▼',
//prependTo: 'body',
prependTo: '#hello',
parentTag: 'a',
closeOnClick: false,
allowParentLinks: false,
nestedParentLinks: true,
showChildren: false,
brand: '',
init: function () {},
open: function () {},
close: function () {}
},
mobileMenu = 'slicknav',
prefix = 'slicknav';
Here's the CSS:
.slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438rem 0.625rem; line-height: 1.125rem; cursor: pointer; }
.slicknav_menu .slicknav_menutxt { display: block; line-height: 1.125rem; float: left; }
.slicknav_menu .slicknav_icon { float: left; margin: 0.188rem 0 0 0.438rem; }
.slicknav_menu .slicknav_no-text { margin: 0; }
.slicknav_menu .slicknav_icon-bar { display: block; width: 1.125rem; height: 0.125rem; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188rem }
.slicknav_nav { clear: both; }
.slicknav_nav ul, .slicknav_nav li { display: block; }
.slicknav_nav .slicknav_arrow { font-size: 0.8rem; margin: 0 0 0 0.4rem; }
.slicknav_nav .slicknav_item { display: block; cursor: pointer; }
.slicknav_nav a { display: block; }
.slicknav_nav .slicknav_item a { display: inline; }
.slicknav_menu:before, .slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both; }
.slicknav_menu { *zoom: 1; }
.slicknav_menu { font-size: 13px; font-size: 0.8125rem; }
.slicknav_btn { margin: 0 5px; text-decoration: none; background: #9EB058; }
.slicknav_menu .slicknav_menutxt { color: #fff; font-weight: bold; }
.slicknav_menu .slicknav_icon-bar { background: #f5f5f5; }
.slicknav_menu { border-top:1px solid #DCDCCD; border-bottom: 2px solid #9EB058; }
.slicknav_nav { font-size: 16px; font-size: 1rem; font-weight: 600; color: #fff; margin: 0; padding: 0; margin-bottom: 20px; }
.slicknav_nav, .slicknav_nav ul { list-style: none; overflow: hidden; }
.slicknav_nav ul { padding: 20px 0 0 15px; border-top: 2px solid #DCDCCD; }
.slicknav_nav ul ul { border: 0; padding: 0 0 0 15px; }
.slicknav_nav .slicknav_item { padding: 5px 10px; margin: 2px 5px; }
.slicknav_nav a { padding: 5px 10px; margin: 2px 5px; text-decoration: none; color: #4F4322; }
.slicknav_nav .slicknav_item a { padding: 0; margin: 0; }
.slicknav_nav .slicknav_item:hover { background: #9EB058; color: #fff; }
.slicknav_nav a:hover { background: #9EB058; color: #fff; }
.slicknav_nav .slicknav_txtnode { margin-left: 15px; }
How do I move the slicknav menu?

Content Jumps When Loading Page

Whenever I load my page, the content area for the product jumps to position (shifts downwards) and so do the social media icons in the footer. You'll see this happen if you refresh the page or simply click on either of the product categories on the left or the navigation links in the fixed footer.
This is happening predominately in Safari. I'm running 8.0.7 on Mac OS X 10.10.4 (Yosemite). Firefox 45.0.2 seems ok. Chrome 50.0.2661.86 acts a little weird with the icons flashing and copyright text, so I believe that has the same issue though the load time may be quicker.
I've looked at my CSS, but I can't fathom why it's doing it(?). I'm really stuck and realise it's perhaps something simple I'm overlooking. Driving me loopy! :-(
A friend told me it has something to do with the floats for the catalogue_wrapper_right, it shouldn't be there. That's for the content. And, I'm not sure again for the footer. Help much appreciated to get this fixed.
The product content text is being populated using PHP from my database.
The key elements here to look at are catalogue_wrapper and catalogue_wrapper_right for the content, and then container and social for the footer div blocks.
Thanks.
CSS:
/* ===============================
Author: Ashley Smith
Date: July 11, 2015
Notes:
Colour Palette:
---------------
Light Cream: #f2f3ee
Orange: #d17f38
Yellow: #e8c04f
Brown: #4b2707
=============================== */
/* General */
body {
background: url('../images/wood 4.jpg') top left no-repeat; top no-repeat; background-attachment: fixed;
background-size: 100% 100%;
color: black;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
font-size: 14px;
font-family: 'Open Sans', "Helvetica Neue", Arial, sans-serif;
}
.container {
width: 1280px;
margin: 0 auto;
padding: 30px 24px;
background: white;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
clear: both;
}
/* Typography */
p {
margin: 0;
padding: 0;
}
a {
text-transform: uppercase;
text-decoration: none;
list-style: none;
padding: 0px 10px;
font-weight: bold;
color: black;
margin: 0;
}
/* Header */
header.main{
background: white;
padding: 10px;
margin-top: -30px;
margin-bottom: -30px;
height: 141px;
}
header nav {
text-align: center;
}
header nav ul {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
line-height: 141px;
}
header nav ul li {
display: inline-block;
padding: 0 20px;
}
header nav ul li a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
header nav ul li#logo a {
display: block;
width: 200px;
height: 150px;
padding: 0;
background: url('../images/LogoM.svg') center center no-repeat;
background-size: 300px;
}
header nav ul li#logo a p {
opacity: 0;
}
/* Small Basket */
#small_basket {
width: 200px;
margin-bottom: 20px;
}
#basket_left dt {
clear: left;
width: 170px;
}
#basket_left {
margin-top: 30px;
margin-bottom: 0;
}
#basket_left dd {
text-align: right;
width: 150px;
margin-bottom: 15px;
}
#basket_left, #basket_left dd, #basket_left dt {
float: left;
}
#basket_left dd.bl_ti, #basket_left dd.bl_st, #basket_left dd.bl_vat, #basket_left dd.bl_total {
display: block;
width: 0px;
padding: 0;
clear: all;
margin-left: 0px;
}
.your_bas {
width: 200px;
border-bottom: dashed 1px #aaa;
padding-bottom: 9px;
}
.check_button {
border-bottom: dashed 1px #aaa;
}
.check_button, .check_button a {
clear: left;
padding: 0px 0px 14px 0px;
font-style: normal;
font-size: 14px;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: normal;
text-transform: none;
}
.red {
color: red;
}
span.cart_pic {
background: url('../images/cart.png') center center no-repeat;
display: inline-block;
position: relative;
top: 10px;
left: 15px;
width: 30px;
height: 30px;
}
/* Store Content Styling */
#wrapper {
width: 1280px;
text-align:left;
margin:0 auto;
padding: 14px 0;
}
#outer {
width: 1280px;
margin: 0 auto;
padding: 30px 24px;
background: white;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
box-shadow: 0px 0px 19px 0px rgba(0,0,0,1);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#cat_left {
width: 150px;
}
#cat_left p {
font-size: 20px;
margin: -5px;
font-weight: 300;
text-indent: 5px;
}
#cat_right {
margin-left: 147px;
width: 900px
}
#cat_navigation {
margin-top: 20px;
margin-bottom: 14px;
width: 200px;
line-height: 35px;
list-style: none;
border-top: dashed 1px #aaa;
padding: 0;
float: left;
}
#cat_navigation li {
float: left;
background-color: rgba(209,209,209,0.4);
text-align: center;
width: 100%;
padding: 2px;
margin-bottom: 10px;
}
#cat_navigation li a {
width: 150px;
opacity: 0.2;
font-size: 14px;
font-weight: 300;
padding: 0;
}
#cat_navigation li a.act {
opacity: 1;
font-weight: 700;
}
#cat_prod {
border-bottom: dashed 1px #aaa;
margin-bottom: 0;
padding-bottom: 14px;
}
#cat_prod h1 {
font-size: 20px;
margin: -5px;
margin-bottom: 1px;
font-weight: 300;
}
/* Catalogue Styling For Products Alignment... Continued */
.catalogue_wrapper {
width:100%;
border-bottom: dashed 1px #aaa;
height: 100%;
display: block;
clear: both;
position: static;
}
.catalogue_wrapper_left {
display: inline-block;
width: 120px;
margin-top: 20px;
}
.catalogue_wrapper_right {
display: block;
width: 750px;
position: relative;
left: 150px;
height: 180px;
margin-top: -120px;
margin-bottom: -40px;
}
.catalogue_wrapper_right h4 a {
padding: 0;
font-size: 20px;
}
.catalogue_wrapper_left a img {
width: 120px;
height: 150px;
}
.catalogue_wrapper_left a {
padding: 0;
}
/* Catalaogue Floats */
#cat_left, #cat_right, #catalogue_wrapper, #catalogue_wrapper_left, #catalogue_wrapper_right {
float: left;
}
/* Catalogue Products Pages */
.catalogue_wrapper_product_right {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
display: block;
width: 750px;
position: relative;
left: 150px;
height: 180px;
margin-top: -70px;
margin-bottom: -40px;
}
.product_info {
font-size: 14px;
display: block;
width: 750px;
text-transform: none;
top: -63px;
}
/* Buttons */
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Basket and Checkout Buttons */
.sbm, .btn {
vertical-align: middle;
cursor: pointer;
display:block;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
}
.sbm_blue {
background: transparent;
background-color: #43a9d9;
border-radius: 4px;
border: none;
padding: 10px 15px;
}
.btn {
text-transform: uppercase;
background: transparent;
background-color: #43a9d9;
border: none;
border-radius: 4px;
color: white;
}
#btn_login {
text-transform: uppercase;
border-radius: 4px;
background: transparent;
background-color: #43a9d9;
border: none;
color: white;
padding: 0px 15px;
}
#btn {
text-transform: uppercase;
background-color: #43a9d9;
border-radius: 4px;
color: white;
padding: 0px 15px;
}
.fl_l {
float: left;
}
.fl_r {
float: right;
}
/* Basket Button */
.add_to_basket {
padding: 6px 12px;
text-transform: uppercase;
background-color: #43a9d9;
border-radius: 4px;
color: white;
}
/* Basket Page */
.ta_r, th.ta_r, .td.ta_r {
text-align: right;
padding: 10px;
}
.ta_left {
text-align: left;
padding: 10px;
}
.ta_right {
text-align: right;
padding: 10px 0px;
}
.col_15 {
width: 15%
}
.tbl_repeat {
width: 900px;
margin-top: 25px;
}
.ta_left_name {
text-align: left;
padding: 10px;
width: 650px;
}
.ta_left_qty input {
width: 40px;
}
.ta_r a {
padding: 0;
text-transform: none;
}
.fld_qty {
border: solid 1px #aaa
}
.fld_qty {
width: 30px;
text-align: right;
padding: 0
}
/* Checkout Page */
.tbl_insert {
margin-bottom:14px;
width: 900px;
line-height: 34.5px;
}
.tbl_insert td {
padding:3px;
}
.tbl_insert th {
padding: 3px 10px 3px 0;
width: 170px;
font-weight: normal;
vertical-align: top;
}
.fld {
width: 700px;
}
.warn {
display: block;
color: #900;
padding: 0;
vertical-align: text-bottom;
}
/* Orders Table */
.order_table {
width: 900px;
}
th.fix_width {
width: 900px;
}
hr#prod_break {
/* Gradient transparent - color - transparent */
border: 0;
height: 1px;
width: 600px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.tbl_repeat
{
position:relative;
-webkit-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.tbl_repeat:before, .tbl_repeat:after
{
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:400px / 100px;
border-radius:400px / 100px;
}
/* Product Paging */
.paging {
list-style: none;
width: 900px;
float: left;
/* background: #efefef; */
padding: 10px 10px;
color: white;
}
.paging li {
float: left;
margin-right: 10px;
font-size: 14px;
}
.paging a {
text-transform: none;
text-decoration: underline;
color: black;
padding: 0;
font-weight: normal;
color: white;
}
/* Pagination Navigation Buttons
http://www.flaticon.com/packs/metrize - - no class colour: #D9D9D9
*/
a.first {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/first.svg') top center no-repeat;
background-size: 32px;
}
a.firstno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/firstno.svg') top center no-repeat;
background-size: 32px;
}
a.previous {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/previous.svg') top center no-repeat;
background-size: 32px;
}
a.previousno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/previousno.svg') top center no-repeat;
background-size: 32px;
}
a.next {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/next.svg') top center no-repeat;
background-size: 32px;
}
a.nextno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/nextno.svg') top center no-repeat;
background-size: 32px;
}
a.last {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/last.svg') top center no-repeat;
background-size: 32px;
}
a.lastno {
position: relative;
display: block;
width: 32px;
height: 32px;
background: url('../images/lastno.svg') top center no-repeat;
background-size: 32px;
}
a#top_of_page {
display: block;
position: relative;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
background-color: #43a9d9;
top: -31px;
left: 45px;
color: white;
border-radius: 4px;
padding: 7px;
}
/* Proceed to Paypal */
#frm_pp {
display: none
}
.dn {
display: none;
}
/* Google reCAPTCHA */
.g-recaptcha {
display: inline-block;
position: relative;
width: 304px;
height: 78px;
}
/* Footer */
footer.main, #footer {
bottom: 0px;
width: 100%;
height: 182px;
position: fixed;
text-align: center;
margin-bottom: -20px;
}
footer.main div.footbord {
border-top-left-radius: -10px;
border-top-right-radius: -10px;
background-color: blue;
}
#uncopyright, #credits {
width: 100%;
margin: 5px 5px;
text-align: center;
display: inline-block;
position: static;
clear: both;
}
#uncopyright {
display: inline-block;
position: static;
margin-top: -20px;
clear: both;
}
div.social img {
width: 40px;
position: relative;
margin: 5px;
display: inline-block;
}
.social {
position: static;
height: 56px;
display: inline-block;
}
.social, .social a {
text-transform: uppercase;
text-decoration: none;
list-style: none;
padding: 0px 10px;
font-weight: bold;
color: black;
margin: 0;
}
/* -- Center Placeholder For Form Text and Keep Entry Field Left -- */
::-webkit-input {
text-align: left;
}
::-webkit-input-placeholder {
text-align: center;
}
::-moz-placeholder {
text-align: center;
}
/* -- Blank Spacing At Bottom Of Main Container -- */
div.nav_top {
height: 30px;
width: 100px;
}
div.nav_top_after {
height: 30px;
width: 100px;
}
div.cont_bot {
height: 230px;
width: 100px;
}
div.cat_space {
height: 20px;
}
/* Force Elements To Self Clear Its Children: http://css-tricks.com/snippets/css/clear-fix/ */
.clearfix:after {
visibility: hidden;
display: block;
content: "";
clear: both;
height: 0;
}
* html .group { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */
I fixed it by messing around all evening with floats in CSSEdit. A great application!

How to solve internet Explorer 7 css menu bug

I have an Internet Explorer 7 css issue with my navigation menu.
The links are getting pushed out of line in Internet Explorer.
I think I have a padding problem, any help would be great!!!
http://jsfiddle.net/558pA/
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
font-size: 62.5%;
text-rendering: optimizeLegibility;
background: #fff;
}
li {
list-style: none;
}
a:link, a:visited {
color: #4083a9;
outline: none;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #205f82;
}
.green-btn {
background: #4cc44a;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#header {
width: 100%;
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
z-index: 9997;
}
#header-inner {
position: relative;
margin: 0 auto;
padding: 0 12px;
max-width: 970px;
}
#logo {
float: left;
padding: 0px 20px 0 0;
}
#logo a {
display: block;
width: 82px;
height: 50px;
background-repeat: no-repeat;
background-position: 0 50%;
background-image: url(../img/assets/chartego-logo.png);
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
#logo img {
height: 0;
}
#logo a:hover {
opacity: .6;
}
#nav {
margin: 0 0px 0 20px;
color: #777;
padding:0px;
float:right;
}
#nav>li {
float: right;
font-size: 1.25em;
line-height: 1;
}
#nav>li>a {
display: block;
height: 50px;
padding: 0 20px;
line-height: 50px;
text-decoration: none;
color: #999;
}
#nav>li#user-profile {
float: right;
}
#nav>li img {
float: right;
position: relative;
top:13px;
}
#nav li ul.tabs {
width: 180px;
padding: 0 0 10px 0;
background: #333;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
z-index: 999;
position: absolute;
right: 0px;
}
#nav li ul.tabs li a {
display: block;
padding: 5px 15px;
font-size: 12px;
font-weight: normal;
line-height: 2;
color: #999;
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a:hover {
color: #ddd;
background: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav li ul.tabs li {
clear: left;
margin: 0;
width: 100%;
}
#nav li#user-profile ul.tabs li:first-child a {
font-weight: bold;
}
#toggle-nav {
display: none;
}
#nav li#user-profile span.profile-name {
display: none;
}
#chart-btn {
background: #4cc44a;
color: white;
padding: 10px 20px;
margin-top: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-right: 20px;
}
#chart-btn a {
color: white !important;
}
/* =============================================================================
NAVIGATION MEDIA MAX 800PX
========================================================================== */
#media screen and (max-width: 800px) {
#header {
position: fixed;
height: 40px;
}
#toggle-nav {
position: absolute;
top: 0;
left: 0px;
display: block;
width: 48px;
height: 40px;
text-indent: -9999px;
background-repeat: no-repeat;
background-position: 15px 50%;
background-image: url(../img/assets/icon-hamburger.png);
opacity: .5;
}
#logo a {
display: block;
height: 40px;
margin: 0 auto 0 auto;
}
#logo {
float: none;
padding-right: 0;
text-align: left;
}
#nav {
float: left;
width: 100%;
margin: 0 0 10px 0;
text-align: left;
}
#nav li {
position: relative;
float: none;
margin-right: 0;
text-align: left;
font-size: 12px;
background: rgba(47, 47, 47, 0.98);
}
#nav li ul.tabs {
display: block;
position: static;
float: none;
width: 100%;
left: 0;
margin: 0;
padding: 0;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav li ul.tabs li a {
padding: 15px;
font-size: 12px;
font-weight: normal;
line-height: 1;
text-transform: none;
}
#nav li#user-profile {
float: none;
}
#nav li#user-profile img {
float: left;
margin: 0 8px 0 0;
}
#nav li#user-profile span.profile-name {
display: inline;
}
#nav li a:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #fff;
}
#nav li ul.tabs li a:hover {
color: #999;
background: none;
}
#nav li#user-profile ul.tabs li:first-child {
display: none;
}
#header-inner {
width: auto;
padding: 0;
}
#nav li a {
height: auto;
padding: 15px;
font-size: 14px;
font-weight: bold;
line-height: 1;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: #fff;
}
#nav>li img {
top:0px;
}
#chart-btn {
background:none;
color: white;
padding: 10px 20px;
margin-top: 8px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin-right: 20px;
}
#chart-btn a {
color: white !important;
}
}

Responsiveness Not Working on Mobile

I have my first responsive design website here
I tried resizing my window using Chrome and FF and i see that the responsiveness is working ... But when i viewed it on my phone it looks the same as i see it in my desktop.
Here's my CSS
#import url(http://fonts.googleapis.com/css?family=Roboto);
#import url(http://fonts.googleapis.com/css?family=Lato:300,700);
html {
font-family: 'Roboto', sans-serif;
font-size: 14px;
line-height: 1.2em;
background-color: #FFF;
color: rgb(68, 68, 68);
font-weight: normal;
!important;
-webkit-font-smoothing: antialiased;
}
.side-container {
margin: 0;
padding: 0;
padding-right: 0;
}
.sidebar {
width: auto;
position: fixed;
overflow-x: auto;
overflow-y: auto;
background-color: transparent;
float: left;
border-left: 740px solid transparent;
padding: 50px 0 0 0;
}
.main-content-wrapper {
margin: 0;
width: 620px;
padding: 60px 60px 200px 60px;
position: absolute;
}
.postcont.main-content-wrapper, .main-content-wrapper {
margin: 0;
}
::selection {
background: #202020;
color: #fff;
text-shadow: none;
}
.ease {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.prettyprint {
background-color: rgb(46, 46, 46);
display: inline-block;
padding: 2px 8px;
border: 1px solid rgb(0, 0, 0);
font-size: 0.9em;
}
.profile {
padding: 60px 20px 20px 60px;
width: 250px;
}
.profile .avatar {
max-width: 80px;
height: auto;
opacity: 0;
}
.profile .avatar-wrapper {
display: block;
margin: 0 0 20px 0;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
background-position: center center;
background-size: 80px 80px;
width: 80px;
height: 80px;
}
.profile .username {
text-decoration: none;
color: rgb(68, 68, 68);
font-family: 'Lato', sans-serif;
font-weight: normal;
}
.profile .Med.bio {
font-size: 14px;
line-height: 1.5em;
font-family: 'Lato', sans-serif;
}
.profile .Tiny.location {
color: #999;
font-family: 'Lato', sans-serif;
}
.profile p {
margin: 0.2em 0;
color: rgb(68, 68, 68);
}
.profile .twitter-handle a {
background-image: url(../images/twitter-bird-black-bgs.png);
background-repeat: no-repeat;
display: block;
opacity: 0.2;
background-position: top left;
width: 26px;
height: 26px;
background-size: 26px 26px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
margin: 10px 0;
}
.profile .twitter-handle a:hover {
opacity: 0.6;
}
.profile .twitter-handle span {
display: none;
}
.mini-profile {
padding: 30px 0;
margin: 20px 0 0 0;
border-top: 1px solid #FFF;
border-bottom: 1px solid rgb(214, 214, 214);
-moz-box-shadow: 0 1px 0 rgb(255, 255, 255), 0 -1px 0 rgb(214, 214, 214);
-webkit-box-shadow: 0 1px 0 rgb(255, 255, 255), 0 -1px 0 rgb(214, 214, 214);
box-shadow: 0 1px 0 rgb(255, 255, 255), 0 -1px 0 rgb(214, 214, 214);
}
.mini-profile .avatar-wrapper, .mini-profile .avatar {
max-width: 50px;
height: auto;
display: inline-block;
vertical-align: top;
}
.mini-profile .avatar-wrapper {
float: left;
}
.mini-profile .profile-about {
display: block;
padding-left: 20px;
margin-left: 50px;
}
.mini-profile .username, .mini-profile .bio, .mini-profile .twitter-handle {
margin: 0;
padding: 0;
}
.mini-profile .username {
font-weight: bold;
line-height: 1em;
padding-bottom: 6px;
}
.mini-profile .twitter-handle {
font-weight: bold;
}
.mini-profile .location {
display: none;
}
.mini-profile .twitter-handle a {
background-image: url(../images/twitter-bird-light-bgs.png);
opacity: 1;
}
.jplnav {
list-style-type: none;
margin: 0;
padding: 0 0 0 60px;
}
.jplnav li a {
display: block;
margin: 0;
}
.jplnav a {
text-decoration: none;
display: block;
padding: 5px 0;
}
.jplnav a:hover {
text-decoration: none;
color: rgb(111, 152, 190);
}
.jplnav li.active a {
color: #CCC;
}
.section-trigger {
background-color: transparent;
}
ul.sections {
margin: 0;
padding: 0;
}
.menu, .expand-profile {
width: 44px;
display: none;
position: absolute;
right: 10%;
top: 30px;
opacity: 0.3;
text-align: center;
background-color: rgb(179, 179, 179);
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
padding-top: 10px;
padding-bottom: 6px;
color: #000;
}
.menu:hover, .expand-profile:hover {
cursor: pointer;
opacity: 0.5;
}
.close-menu {
font-family: Arial !important;
font-size: 50px;
display: none;
line-height: 30px;
vertical-align: middle;
}
.wedge {
height: 4px;
margin: 0 8px 5px 8px;
background-color: #000;
display: block;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.expand-profile {
right: 25%;
font-family: Georgia, Roboto, "Droid Serif", serif;
font-style: italic;
font-weight: bold;
font-size: 36px;
line-height: 0.8em;
}
.pager-footer {
margin: 40px 0;
padding: 10px 0;
}
.pager {
}
.pager span, .pager a {
display: inline-block;
padding: 2px;
}
.Loading {
text-align: center;
padding: 30px;
display: block;
margin-top: -50px;
margin-left: -1px;
}
.Loading img {
display: none;
margin: 0 auto;
}
h1 {
color: #202020;
font-size: 52px;
line-height: 1em;
font-weight: 300;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
text-shadow: 0 2px 0 #FFF;
}
h1 a {
color: inherit;
}
h2, h3, h4, h5, h6 {
color: #202020;
font-family: 'Lato', sans-serif;
font-weight: bold;
}
.jplnav a {
font-size: 18px;
color: #91b6e4;
}
.jplnav li a {
font-family: 'Lato', sans-serif;
}
.Lrg {
font-size: 20px;
color: #202020;
font-weight: bold;
}
.Lrg a {
color: inherit;
}
.Med {
font-size: 16px;
line-height: 1.8em;
color: rgb(68, 68, 68);
}
.Sml {
font-size: 13px;
line-height: 1.4em;
color: rgb(68, 68, 68);
}
.Tiny {
font-size: 12px;
font-weight: normal;
color: rgb(68, 68, 68);
}
a {
color: rgb(96, 167, 207);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.post-header {
padding: 0 0 30px 0;
}
.post-header h1 {
margin: 0 0 10px 0;
padding: 0;
}
.post-date {
padding-top: 0;
margin-bottom: 0;
display: block;
color: #bfbfbf;
}
.entry {
padding: 0;
}
.entry span {
background-color: transparent !important;
}
.entry img {
max-width: 520px;
height: auto;
}
.entry blockquote {
font-style: normal;
margin: 10px 0;
padding: 20px;
background-color: #FFF;
display: block;
}
.entry blockquote.quote {
border-left: 0;
font-size: 1.2em;
color: #202020;
}
.entry blockquote.quote:before {
content: "“";
font-family: Georgia;
font-size: 40px;
line-height: 30px;
}
.post-footer {
padding: 0 0 50px 0;
margin-bottom: 50px;
border-bottom: 1px solid rgb(214, 214, 214);
-moz-box-shadow: 0 1px 0 rgb(255, 255, 255);
-webkit-box-shadow: 0 1px 0 rgb(255, 255, 255);
box-shadow: 0 1px 0 rgb(255, 255, 255);
}
.post-origin {
padding-bottom: 6px;
margin: 20px 0 20px 0;
display: block;
}
.image-block {
vertical-align: bottom;
padding: 10px;
}
.image-block img {
opacity: 0;
}
.image-block a {
display: inline-block;
}
.photo-detail {
-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
display: inline-block;
margin: 0 auto;
padding: 0;
}
body.dribbble .postcont.main-content-wrapper, body.dribbble .main-content-wrapper {
margin-top: 0;
}
body.dribbble-shot .entry {
max-width: none;
text-align: center;
}
body.dribbble-shot .post-header h1 {
width: 400px;
margin: 0 auto;
}
body.dribbble-shot .photo-detail {
/* width: 400px; */
}
body.dribbble-shot .suppliment-group {
text-align: left;
width: 400px;
margin: 0 auto;
padding-top: 40px;
}
body.dribbble-shot .suppliment {
display: block;
margin-top: 6px;
}
body.dribbble-shot .mini-profile {
display: none;
}
body.flickr .postcont.main-content-wrapper, body.flickr .main-content-wrapper {
/* margin-top:0; */
}
body.flickr-photo .main-content-wrapper {
width: auto;
position: relative;
padding-top: 20px;
}
body.flickr-photo .sidebar {
width: auto;
position: relative;
float: none;
border-left: none;
padding: 30px 0;
}
body.flickr-photo .jplnav {
margin-left: 90px;
}
body.flickr-photo .jplnav li {
display: inline-block;
margin-right: 10px;
}
body.flickr-photo .profile {
width: auto;
padding: 10px 60px;
}
body.flickr-photo .profile .avatar-wrapper {
float: left;
width: 50px;
height: 50px;
background-size: 50px 50px;
}
body.flickr-photo .profile-about {
margin-left: 90px;
display: none;
}
body.flickr-photo .section-trigger {
display: none;
}
body.flickr-photo .post-header {
margin-top: 0;
padding-top: 50px;
}
body.flickr-photo .breadcrumb {
line-height: normal;
padding-top: 0;
margin-bottom: 10px;
color: #CCC;
}
body.flickr-photo .breadcrumb a {
color: inherit;
}
body.flickr-photo .post-header h1 {
max-width: none;
font-size: 38px;
margin: 0 0 0px 0;
color: rgb(185, 185, 182);
max-width: 600px;
}
body.flickr-photo .entry {
max-width: none;
}
body.flickr-photo .entry .description {
max-width: 600px;
margin-top: 50px;
}
body.flickr-photo .photo-detail {
text-align: center;
}
body.flickr-photo .entry img {
max-width: 100%;
width: auto;
margin: 0 auto;
}
body.flickr-photo .mini-profile {
display: none;
}
body.flickr-photo .post-footer {
border-bottom: 0;
margin-top: 50px;
max-width: 600px;
}
body.flickr-photoset .post-header {
padding: 20px 0 0 10px;
}
.video-block {
margin: 10px 0;
}
/* hide hastags */
.ot-hashtag {
display: none;
}
.link a {
background-color: rgb(224, 240, 255);
display: inline-block;
padding: 4px 8px;
}
.map {
display: block;
margin: 10px 0;
}
.googleplus-post .post-footer {
border-bottom: none;
padding-top: 50px;
}
/*
* Etsy
*/
body.etsy-section .post-header {
padding: 20px 0 0 10px;
}
body.etsy-listing .post-header {
padding: 60% 50px 0 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body.etsy-listing .post-header h1 {
background-color: rgba(255,255,255,0.9);
display: inline-block;
padding: 30px 30px 30px 44px;
margin: 0;
}
body.etsy-listing .post-header p.Lrg {
background-color: rgba(255,255,255,0.8);
display: inline-block;
padding: 4px 12px;
margin: 0;
height: auto;
line-height: 1em !important;
margin: 0;
display: inline-block;
vertical-align: bottom;
}
body.etsy-listing .photo-detail {
margin-bottom: 20px;
}
body.instagram-photo .mini-profile {
display: none;
}
.postcont.achievement, .postcont.portfolio, rticle.reviews {
margin-bottom: 50px;
}
.postcont.achievement header, .postcont.portfolio header, .postcont.reviews header {
padding-bottom: 0;
}
.angellist-grid, .angellist-grid ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.angellist-grid-content {
display: inline-block;
margin: 0 6px 0 0;
}
.angellist-grid-content .angellist-company-name a:before {
content: " / ";
rgb(78, 78, 78);
}
.angellist-grid-content:first-child .angellist-company-name a:before {
content: "";
}
.angellist-company-image {
display: none;
}
.angellist-company-concept {
display: none;
}
.angellist-grid-content:hover .angellist-company-concept {
display: block;
position: absolute;
}
.angellist-grid-content .angellist-company-concept {
position: absolute;
background-color: #FFF;
padding: 20px 20px 5px 20px;
width: 200px;
margin-left: -65px;
margin-top: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
opacity: 0;
display: block;
visibility: hidden;
white-space: normal;
text-align: center;
-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.angellist-company-image-popup {
width: 60px;
height: 60px;
display: block;
margin: 0 auto;
-webkist-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-position: center center;
background-size: 60px 60px;
background-repeat: no-repeat;
background-color: #FFF;
padding: 6px;
-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.angellist-company-image-popup img {
display: none;
}
.angellist-grid-content .angellist-company-concept:after {
top: -5px;
right: 110px;
bottom: auto;
left: auto;
border-width: 0 5px 5px;
border-color: rgb(255,255,255) transparent;
content: "";
position: absolute;
border-style: solid;
display: block;
width: 0;
}
.angellist-company-concept p.Sml {
color: #202020;
}
.angellist-grid-content:hover .angellist-company-concept {
visibility: visible;
opacity: 1;
margin-top: 0;
-webkit-transition: opacity 0.2s ease-in-out 0.3s, margin-top 0.2s ease-in-out 0.3s;
-moz-transition: opacity 0.2s ease-in-out 0.3s, margin-top 0.2s ease-in-out 0.3s;
-o-transition: opacity 0.2s ease-in-out 0.3s, margin-top 0.2s ease-in-out 0.3s;
transition: opacity 0.2s ease-in-out 0.3s, margin-top 0.2s ease-in-out 0.3s;
}
.github-languages {
margin-bottom: 50px;
margin-top: 0;
}
.github-social-stats {
list-style-type: none;
margin: 0;
padding: 0;
}
.github-social-stats li {
float: left;
margin-right: 10px;
}
.github-social-stats span.Lrg {
font-weight: bold;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial;
display: block;
}
.portfolio .post-header h1, .github-languages .post-header h1 {
font-size: 1.4em;
}
.portfolio .post-header, .github-languages .post-header, .github-repo .post-header {
padding-bottom: 0;
}
.github-repo .post-header h1 {
font-size: 1.8em;
}
.github-repo .entry p {
margin: 0;
padding: 0;
}
.github-starred {
font-size: 0.8em;
}
.github-starred .Lrg {
font-size: 1em;
}
.github-main-language {
font-size: 0.8em;
}
.github-main-language .Lrg {
font-weight: bold;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial;
font-size: 1em;
}
body.feed .entry h1 {
text-shadow: none;
font-size: 1.2em;
text-transform: capitalize;
color: #202020;
font-family: 'Lato', sans-serif;
font-weight: bold;
}
.feed .entry img {
max-width: 100%;
height: auto;
}
body.page h1 {
margin: 0 0 10px 0;
padding: 0;
}
/* * * * * * * * * * * * * * * * * * * * * * * *
* Responsive Styles
* * * * * * * * * * * ** * * * * * * * * * * * */
/* Large desktop */
#media (min-width: 1200px) { /* */
}
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { /* */
}
/* Shrink Navigation */
#media (max-height: 798px) {
/*
*
*
* Vertical Responsive Profile
*
*
*/
.profile {
padding-top: 20px;
padding-bottom: 20px;
}
.profile .avatar-wrapper {
/* display: none; */
}
/*
*
*
* Vertical Responsive Site Navigation
*
*
*/
.jplnav a {
font-size: 18px;
}
.jplnav {
margin: 40px 0 0 0;
}
.jplnav li {
padding: 15px 0;
}
.jplnav a {
padding: 0;
}
}
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
.sidebar {
float: none;
width: 100%;
overflow-x: auto;
overflow-y: auto;
background-color: #fff;
position: relative;
border: 0;
padding: 20px 0;
}
.main-content-wrapper {
margin: 0;
padding: 60px 60px 200px 60px;
position: relative;
width: auto;
}
.postcont.main-content-wrapper, .main-content-wrapper {
margin: 0;
}
/*
*
*
* Responsive: Site Navigation
*
*
*/
.jplnav {
padding: 10px 0;
display: none;
}
.jplnav li {
display: block;
padding: 0;
margin: 0;
margin-left: 10%;
margin-right: 10%;
text-align: left;
}
.jplnav a {
padding: 10px;
font-size: 20px;
border-top: 1px solid rgba(0,0,0,0.1);
}
/*
*
*
* Responsive: Sub Navigation
*
*
*/
.section-trigger {
margin: 0;
list-style-type: none;
position: relative;
top: auto;
left: auto;
right: auto;
border-bottom: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
padding: 10px;
text-align: left;
z-index: 99;
}
.sections {
text-align: center;
position: relative;
}
.section-trigger > ul.sections {
display: block;
opacity: 1;
filter: alpha(opacity=1);
position: relative;
bottom: auto;
margin: 0;
padding: 0;
}
.sections li {
display: block;
margin: 0 0 8px 0;
padding: 0;
}
.sections a {
display: block;
padding: 10px;
margin: 10px;
border: 3px solid rgba(0,0,0,0.1);
text-align: center;
font-weight: bold;
}
.section-block {
float: none;
margin: 0;
padding: 0;
}
/*
*
*
* Responsive: Image Block Styling
*
*
*/
.image-block {
vertical-align: bottom;
padding: 10px;
}
.image-block img {
opacity: 1;
display: block !important;
width: auto !important;
max-width: 100% !important;
min-width: 100% !important;
height: auto !important;
}
.image-block a {
display: block;
}
/*
*
*
* Responsive: Single Photo image styling
*
*
*/
.photo-detail {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
display: block;
margin: 0 auto;
border: 0;
}
.photo-detail img {
width: 100%;
height: auto;
}
/*
*
*
* Responsive Pager
*
*
*/
.pager-footer {
margin: 25px 10px 50px 10px;
padding-top: 25px;
border-top: 1px solid #000;
}
.pager {
}
.pager span, .pager a {
display: block;
padding: 10px;
margin: 10px;
border: 3px solid rgba(0,0,0,0.1);
text-align: center;
font-weight: bold;
}
.menu, .expand-profile {
display: block;
}
/*
*
*
* Responsive: Generic Font Treatments
*
*
*/
.Lrg {
font-size: 24px;
}
.Med {
font-size: 18px;
}
.Sml {
font-size: 18px;
}
/*
*
*
* Responsive: User Profile
*
*
*/
.profile {
padding: 0;
margin: 0 0 20px 0;
float: none;
width: auto;
}
.profile .avatar-wrapper {
display: block;
margin-top: 20px;
margin-left: 10%;
background-repeat: no-repeat;
background-size: 60px 60px;
width: 60px;
height: 60px;
}
.profile .avatar {
max-width: 60px;
height: auto;
display: block;
}
.profile p {
margin: 0 auto;
padding: 0;
width: 80%;
}
.profile p.username {
margin: 10% 0 0 10%;
line-height: normal;
display: inline-block;
}
.profile .Med.bio {
font-size: 22px;
line-height: 1.5em;
color: #d4d4d4;
}
.profile .twitter-handle a {
margin: 0;
opacity: 0.3;
background-size: 36px 36px;
width: 36px;
height: 36px;
position: absolute;
right: 40%;
top: 34px;
}
.profile .twitter-handle span {
display: none;
}
.profile p.username, .profile .bio, .profile .location, .profile p {
display: none;
}
.profile p.twitter-handle {
display: block;
}
/*
*
*
* Responsive Loading image
*
*
*/
.Loading {
left: 0;
right: 0;
top: 50%;
display: block;
background-color: rgba(255, 255, 255, 0.9);
}
.Loading img {
display: block;
margin: 0 auto;
}
/*
*
*
* Responsive: Post Styling
*
*
*/
.post-header {
padding: 10% 10% 0 10%;
}
.post-header h1 {
word-break: normal;
font-size: 30px;
}
.post-footer {
padding: 0 10% 10% 10%;
}
.entry {
padding: 0 10% 10% 10%;
}
.entry img {
max-width: 100%;
}
.entry {
}
iframe, embed, object {
max-width: 260px;
}
/*
*
*
* Responsive: Flickr, Dribbble Styling Overrides
*
*
*/
body.dribbble-shot .entry, body.flickr-photo .entry {
padding: 10px;
}
body.dribbble-shot .post-header, body.flickr-photo .post-header {
margin-top: 0;
padding-top: 10px;
}
body.dribbble-shot .post-header h1, body.flickr-photo .post-header h1 {
opacity: 1;
font-size: 1em;
}
/*
*
*
* Flickr Responsive Profile
*
*
*/
body.flickr-photo .sidebar {
padding: 0;
}
body.flickr-photo .jplnav {
margin-left: 0;
}
body.flickr-photo .jplnav li {
display: block;
margin-right: 0;
}
body.flickr-photo .profile {
padding: 0;
}
body.flickr-photo .profile .avatar-wrapper {
float: none;
background-size: 60px 60px;
width: 60px;
height: 60px;
}
body.flickr-photo .profile-about {
display: block;
padding: 0;
}
.profile .profile-about {
display: block;
padding: 0;
}
/*
*
*
* Responsive: Etsy Overrides
*
*
*/
body.etsy-listing .post-header {
padding: 400px 0 0 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
body.etsy-listing .post-header h1 {
display: block;
padding: 20px 10% 20px 10%;
margin: 0;
font-size: 20px;
line-height: 1.3em !important;
text-shadow: none;
background-color: rgb(255,255,255);
}
body.etsy-listing .post-header p.Lrg {
background-color: rgb(255,255,255);
display: inline-block;
padding: 4px 12px;
margin: 0;
height: auto;
line-height: 1em !important;
margin: 0;
display: inline-block;
vertical-align: bottom;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
.main-content-wrapper {
margin: 0;
padding: 0 0 200px 0;
position: relative;
width: auto;
}
/*
*
*
* Responsive: Section Navigation
*
*
*/
.sections a {
display: block;
padding: 0 4px 4px 0;
color: inherit;
font-size: 20px;
}
/*
*
*
* Responsive: User Profile Navigation
*
*
*/
.expand-profile {
right: 30%;
}
.profile .twitter-handle a {
right: 50%;
}
/*
*
*
* Responsive: Generic Font Treatments
*
*
*/
.Lrg {
font-size: 24px;
}
.Med {
font-size: 18px;
}
.Sml {
font-size: 14px;
}
}
This has to go in your head element
<meta name="viewport" content="width=device-width, initial-scale=1">
You can read more here
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
Add this within your head tag.
Add this to your <head> section:
<meta name="viewport" content="width=device-width">

Resources