My media query does not override the regular CSS unless I use !important all the time. What's the error? Here you can see the CSS with the !importants. If I remove them, the styling goes back to the regular CSS, even when the screen is less than 850px. Could you please help?
#media all and (min-width: 200px) and (max-width: 850px) {
html body {
position: absolute;
height: 100%;
width: 100% !important;
margin: 0 auto;
text-align:center;
}
#header {
background-color: white;
position: fixed;
top: 0px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
width: 95%;
height: 120px;
z-index:9999;
}
#header-inner{
width: 100% !important;
float: right;
}
div#title {
margin: 0px !important;
position: absolute;
width: 100% !important;
height: 70px;
background: url('mobillogo.png');
background-repeat: no-repeat;
background-size: auto 70px;
}
.wrapper {
width: 100% !important;
overflow:auto;
margin-left: auto;
margin-right: auto;
}
#first {
padding-top: 150px;
padding-bottom: 30px;
overflow:auto;
width: 95%;
background-color: #f7fdff;
height: ;
}
#second {
margin-top: 65px;
overflow: auto;
width: 95% !important;
margin-bottom: 65px;
background-color: white;
}
#third {
overflow:auto;
width: 95% !important;
background-color: #f3efef;
padding-bottom: 4em;
}
#footer
{
height: 115px;
width:100% !important;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
background-color: white;
padding-top: 1em;
padding-bottom: 0.5em;
}
#footbox {
height: 70px;
width: 100% !important;
margin-top: 0px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#contains {
width: 100% !important;
margin-top: 50px;
}
h1 {
float: left;
width: 100% !important;
margin-top: 2em;
font-family: Jersey;
font-size: 3.5em;
text-align: center;
color: #f44336;
}
#logo {
margin-top:70px !important;
width: 100% !important;
height: 70px;
}
div#logo img {
position: static !important;
height: 13vw !important;
}
#footbox {
height: 70px;
width: 95%;
margin-top: 0px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#checklist {
overflow: auto;
position: relative;
float: left;
width: 100% !important;
font-family: 'Open Sans', sans-serif;
padding-bottom: 8vh;
padding-top: 15px;
text-align:left;
}
#short {
width: 100% !important;
color: black;
font-weight: bold;
font-size: 1.3em;
margin: 0px !important;
}
#form {
overflow: auto;
border-radius: 5px;
padding: 0px !important;
position: relative;
width: 100% !important;
display: inline-block;
-webkit-transition:background 0.3s;
-moz-transition:background 0.3s;
-o-transition:background 0.3s;
transition:background 0.3s;
transition-timing-function: ease-in-out;
}
ul.inline {
width: 100% !important;
list-style-type: none;
columns: 1 !important;
-webkit-columns: 1 !important;
-moz-columns: 1 !important;
list-style-position: inside;
padding: 0px;
margin: 0px;
}
#fulltext {
width: 90%;
padding-right: 30px;
}
.text {
width: 75% !important;
}
}
html body {
position: absolute;
height: 100%;
width: 100%;
margin: 0 auto;
text-align:center;
}
#font-face {
font-family: Jersey; src: url('Jersey M54.ttf');
}
p {
font-family: 'Open Sans', sans-serif;
text-align:left;
}
.lightup {
background-color: #ffc107;
}
button {
float: right;
margin-right: 10px;
font-size: 1.2em;
background: #5fbd5f;
color: white;
padding: 5px;
font-family: 'Open Sans', sans-serif;
color: white;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
border: 0;
outline: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
button:hover {
cursor: pointer;
cursor: hand;
}
button:active{
border: 0;
outline: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);ű
}
a, u {
text-decoration: none;
}
#header-inner{
width: 1100px;
float: right;
}
#header {
background-color: white;
position: fixed;
top: 0px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
width: 100%;
height: 120px;
z-index:9999;
}
.wrapper {
overflow:auto;
width: 1100px;
margin-left: auto;
margin-right: auto;
}
#first {
padding-top: 150px;
padding-bottom: 30px;
overflow:auto;
width: 100%;
background-color: #f7fdff;
height: ;
}
#second {
margin-top: 65px;
overflow: auto;
width: 100%;
margin-bottom: 65px;
background-color: white;
}
#third
{
overflow:auto;
width: 100%;
background-color: #f3efef;
padding-bottom: 4em;
}
#footer
{
height: 115px;
width:100%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
background-color: white;
padding-top: 1em;
padding-bottom: 0.5em;
}
#footbox {
height: 70px;
width: 1100px;
margin-top: 0px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#contains {
width: 100%;
margin-top: 50px;
}
#toTop {
clear:both;
width: 600px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
font-family: 'Bree Serif', serif;
color: white;
border-radius: 5px;
background: #f44336;
padding-left: 15px;
padding-right: 15px;
font-size: 70px;
}
#logo {
float:left;
margin-top:1em;
}
h1 {
position: relative;
vertical-align: text-top;
margin-top: -12px;
font-family: Jersey;
font-size: 3.5em;
text-align: right;
color: #f44336;
}
h4 {
margin-top: 0px;
margin-bottom: 0;
font-family: Jersey;
font-size: 2em;
text-align: center;
color: white;
}
h5 {
position:relative;
float:left;
font-family: 'Open Sans', sans-serif;
color: #f44336;
font-size: 37px;
padding:5px;
width:250px;
margin-top: -15px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: right;
}
#purple {
text-align: center;
vertical-align: middle;
margin-top: 10px;
position:relative;
padding-right: 15px;
}
.caltxt {
padding-top: 0px;
padding-left: 15px;
font-size: 1em;
color: white;
}
#calendar {
margin-bottom: 5em;
margin-left: 80px;
float: left;
width: 600px;
height: 400px;
}
#sept {
float: left;
position: relative;
width: 25%;
height: 100%;
background-color: #4caf50;
}
#oct {
float: left;
position: relative;
width: 25%;
height: 75%;
background-color: #f44336;
}
#nov {
float: left;
position: relative;
width: 25%;
height: 75%;
background-color: #266fea;
}
#dec {
float: left;
position: relative;
width: 25%;
height: 75%;
background-color: #ffc107;
}
#plus {
float: left;
position: relative;
width: 75%;
height: 25%;
background-color: #9c27b0;
z-index: 0;
}
.calendar {
-webkit-transition: all 250ms;
-moz-transition: all 250ms;
transition: all 250ms;
}
.calendar:hover {
z-index: 9998;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
transform: translateY(-5px);
}
div#title {
margin-top: 50px;
position: absolute;
width: 1100px;
height: 70px;
background: url('weblogo.png');
background-repeat: no-repeat;
background-position: 0px;
background-size: auto 70px;
}
#checklist {
overflow: auto;
position: relative;
float: left;
width: 750px;
font-family: 'Open Sans', sans-serif;
padding-bottom: 8vh;
padding-top: 15px;
text-align:left;
}
#short {
width: 750px;
color: black;
font-weight: bold;
font-size: 1.3em;
}
#form {
overflow: auto;
border-radius: 5px;
padding: 15px;
position: relative;
width: 260px;
display: inline-block;
-webkit-transition:background 0.3s;
-moz-transition:background 0.3s;
-o-transition:background 0.3s;
transition:background 0.3s;
transition-timing-function: ease-in-out;
}
.text {
width: 90%;
text-align: left;
padding: 5px;
margin-top: 0px;
margin-bottom: 5px;
font-family: 'Open Sans', sans-serif;
border: 1px solid grey;
border-radius: 5px;
}
#fulltext {
width: 90%;
padding-right: 30px;
}
#name {
background: url(profile.png) no-repeat scroll 5px 5px;
background-color: white;
background-size: 20px;
margin-top: auto;
margin-bottom: auto;
padding-left:30px;
margin-bottom: 10px;
}
#email {
background: url(message.png) no-repeat scroll 5px 8px;
background-color: white;
background-size: 20px;
margin-top: auto;
margin-bottom: auto;
padding-left:30px;
margin-bottom: 10px;
}
#university {
background: url(university.png) no-repeat scroll 5px 4px;
background-color: white;
background-size: 20px;
margin-top: auto;
margin-bottom: auto;
padding-left:30px;
margin-bottom: 10px;
}
h3 {
font-family: 'Bree Serif', serif;
width: 130px;
color: white;
border-radius: 5px;
background: #f44336;
padding: 5px;
}
#textbox{
width: 90%;
height: 5em;
}
#textbox::-webkit-input-placeholder{
color:transparent;
}
#textbox::-webkit-input-placeholder::before {
color:#666;
content:"program?*";
}
h2 {
font-weight: bold;
font-size: 1em;
font-family: 'Open Sans', sans-serif;
}
ul.inline {
list-style-type: none;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
list-style-position: inside;
padding: 0px;
margin: 0px;
}
ul.inline li {
padding: 5px;
background-image: url(check.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: 0px center;
padding-left: 25px;
}
#fun {
float: left;
padding-bottom: 50px;
}
#creativity {
padding-bottom: 80px;
}
#community {
float: left;
margin-left: 75px;
}
#innovation {
float: left;
margin: 30px;
}
#challenge {
float: left;
margin-left: 100px;
margin-top: -25px;
margin-bottom: 5em;
height: 220px;
}
#csanad {
height: 130px;
float: left;
margin-left: 5%;
margin-top: 4%;
padding-bottom: 80px;
}
#adam {
height: 130px;
float: left;
margin-left: 0%;
margin-top: 70px;
}
#adamtxt {
font-size: 0.9em;
width: 61%;
float:left;
margin-top: 72px;
margin-left: 25px;
}
#rapper {
width:400px;
float: left;
}
#csanadtxt {
font-size: 0.9em;
width: 32%;
float:left;
margin-top: 4%;
margin-left: 25px;
}
#noura {
height: 130px;
float: left;
margin-left: 15px;
margin-top: 75px;
}
#nouratxt {
font-size: 0.9em;
width: 23%;
float:left;
margin-top: 80px;
margin-left: 25px;
}
#container {
}
div#logo img {
position: absolute;
height: 25px;
}
#menu{
position: relative;
padding: 0px;
float: right;
}
ul#menu li {
list-style: none;
display: inline-block;
font-size: 0.95em;
height: 1vw;
}
ul#menu li a {
padding: 5px;
padding-left: 0.45vw;
padding-right: 0.45vw;
color: #ff4412;
font-family: 'Open Sans', sans-serif;
outline: none;
text-transform: uppercase;
border-radius: 5px;
}
div#container div#header div#header-inner ul#menu li a:focus {
text-decoration: none;
}
div#container div#header div#header-inner ul#menu li a:hover {
background: #ff4412;
color: white;
text-decoration: none;
}
div#container div#header div#header-inner ul#menu li.highlight a {
color: white;
border-radius: 5px;
background: #ff4412;
}
div#container div#header div#header-inner ul#menu li.highlight:hover {
opacity: 0.9;
}
Explanation
How the browser see your CSS without !important:
for screen 200px < x < 800px do this {
bla bla bla
}
but... wait a second.. forget about it, do this for all screens {
bla bla bla
}
When you add !important the browser will take it like this:
for screen 200px < x < 800px do this {
bla bla bla
!do not listen to me if I will ever give you any other instructions
}
but... hey dude, want any instructions? Can you do this for all screens? {
bla bla bla
}
If you place #media block in the end of your file and remove all the !importants it will look like this:
for all screens do this {
bla bla bla
}
but for screens 200px < x < 800px do this {
bla bla bla
}
Demo
Open this snippet in full page mode and try to change browser's window size
#media (max-width: 800px) {
.bad {
background-color: green;
}
}
.bad, .good {
width: 100px;
height: 100px;
background-color: firebrick;
}
#media (max-width: 800px) {
.good {
background-color: green;
}
}
<div class="good"></div>
<div class="bad"></div>
Flip the order to place the media query later. It doesn't seem to add any selector weight, so the later one takes priority.
So you would have (snipped):
html body {
position: absolute;
height: 100%;
width: 100% !important;
margin: 0 auto;
text-align:center;
}
#media all and (min-width: 200px) and (max-width: 850px) {
html body {
position: absolute;
height: 100%;
width: 100% !important;
margin: 0 auto;
text-align:center;
}
}
See, for example, CSS specificity on MDN, which does not list #media-queries as increasing weight.
In my case, my media queries were being added after the initial SCSS and they were still being overridden.
I found out it was because the nesting did not match between the initial styles and the media queries!
I had:
.icon-tray {
// stuff
.icon-tray-icon {
// stuff
div {
// stuff
}
}
}
Then, my media queries had:
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
.icon-tray {
// stuff
}
.icon-tray-icon {
// stuff
div {
// stuff
}
}
}
So I changed it to this, and it worked:
#media (min-width: 768px) {
.icon-tray {
// stuff
.icon-tray-icon {
// stuff
div {
// stuff
}
}
}
}
Hope it's clear and helps someone!
css style priority sequence
"!important"
Priority goes to most explicitly define rule.
ex:
1)
.class1 {
.class2 {
.class3 { color: green }
}
}
2)
.class1 {
.class3 { color: red }
}
Priority goes by order (bottom are prior to top)
You must check <head> tag. First, include the main style css file and then include the responsive css file.
something like this :
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<link rel="stylesheet" type="text/css" href="reponsive.css">
Put your responsive css after style css if there is matched issue. Problem will solved.
I had the same issue. I resolved it by placing the media query styles at the end of other styles.
Related
<div class="row iex-reepay">
<div class="col-lg-4 col-md-4">
<div class="after-element-pseudo">
<img src="/wp-content/uploads/sites/61/2018/10/iex-ikon-2.png" class="iex-icon"></div>
</div>
<div class="col-lg-4 col-md-4 col-lg-offset-1 col-md-offset-2"><img src="/wp-content/uploads/sites/61/2018/10/iex-ikon-2.png" class="reepay-icon"></div>
</div>
I have made a pseudo-class after element which works fine without media-queries.
When i start working responsive with my media-queries something goes wrong.
It seems like it only uses the after:element i made on large screen when media-queries is not needed.
I tried to separate my media-queries to their own stylesheet but the issue is still there. I tried to change a img size and nothing changes.
I really tried everything, validating my CSS etc.
#media screen and (max-width:1199px) {
.feature-icons-div {
margin-right: 38px;
}
.after-element:after {
content: "";
width: 55px;
height: 81px;
background-size: 55px 19px;
display: inline-block;
background-image: url(/wp-content/uploads/sites/61/2018/10/arrow-after-element.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
bottom: 36px;
right: -79px;
}
}
#media screen and (max-width:992px) {
.reepay div#manage-subscribtion-section section#themo_service_block_split_1 {
padding-top: 60px;
padding-bottom: 95px;
}
}
#media screen and (max-width:991px) {
.after-element {
position: relative;
}
.after-element-pseudo:after {
content: "";
width: 55px;
height: 81px;
background-size: 55px 19px;
display: inline-block;
background-image: url(/wp-content/uploads/sites/61/2018/10/arrow-after-element.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
bottom: 36px;
right: 42px;
}
img.reepay-icon {
max-width: 93px;
}
img.iex-icon {
max-width: 93px;
}
.iex-icons-div {
margin-top: 45px;
}
.reepay h2 {
color: #4f4f4f !important;
font-size: 24px;
}
.reepay div#manage-subscribtion-section section#themo_service_block_split_1 {
padding-top: 60px;
padding-bottom: 275px;
}
div#reepay-integeration-top section#themo_iex_block_visma_1 li p {
font-size: 20px;
}
div#reepay-integeration-top #themo_iex_block_visma_1 {
padding-top: 145px;
padding-bottom: 25px;
}
}
#media screen and (max-width:767px) {
.reepay h1 {
font-size: 34px;
}
img.subscribtion-image {
margin-top: 286px;
}
.reepay div#manage-subscribtion-section section#themo_service_block_split_1 {
padding-top: 60px;
padding-bottom: 106px;
}
.reepay .split-blocks .service-block p {
margin-left: 34px;
}
/*
.border-without-background-feature:after {
content: "";
width: 59px;
height: 81px;
background-size: 52px 19px;
display: inline-block;
background-image: url(/wp-content/uploads/sites/61/2018/10/arrow-after-element.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
top: 129px;
transform: rotate(89deg);
} */
.border-radius-for-iex:after {
content: "";
width: 59px;
height: 81px;
background-size: 52px 19px;
display: inline-block;
background-image: url(/wp-content/uploads/sites/61/2018/10/arrow-after-element.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
right: 58px;
transform: rotate(89deg);
/* bottom: -111px; */
top: 132px;
}
.iex-icons-div {
margin-left: 0;
}
.border-radius-for-iex {
display: inline-block;
height: 120px;
width: 120px;
border-radius: 50%;
background-color: #fff;
position: relative;
/* margin: auto 0; */
margin-left: 104px;
}
.border-without-background-feature {
position: relative;
display: inline-block;
margin-left: 96px;
}
}
#media screen and (max-width:540px) {
.reepay .split-blocks .service-block p {
margin-left: 14px;
}
.reepay h1 {
font-size: 24px;
}
div#order-right-now .iex-btnn {
background-color: #15d384;
border: none;
color: white;
padding: 14px 49px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
border-radius: 26px;
}
.reepay h2 {
color: #4f4f4f !important;
font-size: 20px;
}
div#order-right-now .iex-btnn {
background-color: #15d384;
border: none;
color: white;
padding: 14px 60px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
border-radius: 26px;
}
}
#media screen and (max-width:320px) {
img.center-block.reepay-header-dashboard {
padding-top: 35px;
padding-right: 22px;
}
.reepay h1 {
font-size: 24px;
}
div#reepay-integeration-top section#themo_iex_block_visma_1 li p:before {
content: "";
width: 55px;
height: 81px;
background-size: 25px 19px;
display: inline-block;
background-image: url(/wp-content/uploads/sites/61/2018/10/arrow.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
left: -19px;
top: 6px;
}
div#reepay-integeration-top section#themo_iex_block_visma_1 li p {
font-size: 17px;
}
}
/* This is for all the h1 on the site */
.reepay h1 {
font-size: 37px;
}
/* This is for all the h2 on the site */
.reepay h2 {
color: #4f4f4f !important;
}
div#reepay-integeration-top em {
font-style: normal;
font-weight: 900;
font-size: 46px;
}
/* This is the header of the Reepay site start */
.reepay .navbar {
background-color: #fff;
margin-bottom: 0;
background-color: #0464ab !important;
}
.reepay .navbar .navbar-nav>li.active>a {
color: #fff;
text-transform: initial;
font-size: 20px;
}
.reepay html .navbar .navbar-nav>li>a:hover:after,
html .navbar .navbar-nav>li.active>a:after,
html .navbar .navbar-nav>li.active>a:hover:after,
html .navbar .navbar-nav>li.active>a:focus:after {
bottom: 5px;
background-color: #fff;
display: none;
}
.reepay .navbar .navbar-nav>li.active>a,
.navbar .navbar-nav>li.active>a:hover,
.navbar .navbar-nav>li.active>a:focus {
color: #fff;
}
.reepay .navbar-default {
background-color: #0464ab;
border-color: #0464ab;
}
/* This is the header of the Reepay site end */
/* Second section start */
div#reepay-integeration-top #themo_iex_block_visma_1 {
padding-top: 96px;
padding-bottom: 0px;
}
div#reepay-integeration-top li p {
margin-top: 12px;
}
div#reepay-integeration-top li {
list-style: none;
}
div#reepay-integeration-top section#themo_iex_block_visma_1 li p {
font-size: 23px;
}
div#reepay-integeration-top section#themo_iex_block_visma_1 li p:before {
content: "";
width: 55px;
height: 81px;
background-size: 25px 19px;
display: inline-block;
background-image: url(/wp-content/uploads/sites/61/2018/10/arrow.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
left: -19px;
top: 16px;
}
img.center-block.reepay-header-dashboard {
padding-top: 35px;
}
/* This is the section for order now button */
div#order-right-now .iex-btnn {
background-color: #15d384;
border: none;
color: white;
padding: 14px 99px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
border-radius: 26px;
}
div#order-right-now section#themo_iex_brands_1 {
padding-top: 6px;
padding-bottom: 30px;
}
/* This is the section of manage-subscribtion */
div#manage-subscribtion-section p {
color: #4f4f4f;
font-size: 19px;
}
img.manage-subscribtion-icons {
margin-top: 30px;
}
.reepay div#manage-subscribtion-section section#themo_service_block_split_1 {
padding-top: 60px;
padding-bottom: 40px;
}
/* Remove the borders that i cant remove from the backend, i thuink it gets shout out from somewhere else to all subsites */
.reepay .border-wrap.top .border {
border-left: 2560px solid #e5e5e4;
border-top: 70px solid transparent;
border-right: 0 solid transparent;
border-bottom: 0 solid transparent;
display: none;
}
.reepay .border-wrap.bottom .border {
border-left: 2560px solid #e5e5e4;
border-top: 0 solid;
border-right: 0 solid transparent;
border-bottom: 70px solid transparent;
display: none;
}
.reepay section#themo_iex_testimonials_1 {
display: none;
padding-top: 5px;
padding-bottom: 5px;
}
/* This is the service-block section */
div#service-block-for-glyphicons h2 {
text-align: center;
margin-bottom: 50px;
padding-top: 15px;
}
div#service-block-for-glyphicons .service-blocks-horiz {
padding-top: 60px;
padding-bottom: 40px;
}
/* Feature page --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- */
div#feature-integeration-top section#themo_iex_block_visma_1 {
padding-top: 24px;
padding-bottom: 0px;
}
div#feature-integeration-top p {
font-size: 23px;
}
/* manage subscribtion for feature */
.border-radius-for-iex img {
position: absolute;
left: 28px;
top: 17px;
}
.border-radius-for-iex {
display: inline-block;
height: 120px;
width: 200x;
width: 120px;
border-radius: 50%;
background-color: #fff;
position: relative;
}
/* after element for the manage subscribtion feature page */
.reepay section#themo_html_1 {
padding-top: 8px;
padding-bottom: 275px;
}
.inner-wrapper {
background-color: #fff;
/* margin: auto 0; */
text-align: center;
}
.remove-bullet li:before {
content: "";
width: 55px;
height: 81px;
background-size: 25px 19px;
display: inline-block;
background-image: url(/wp-content/uploads/sites/61/2018/10/Vector-Smart-Object-copy-3.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
left: -6px;
/* top: 18px; */
}
.inner-wrapper p {
font-size: 20px;
padding-bottom: -5px;
padding-bottom: 7px;
margin-bottom: 0px;
color: #2083c2;
}
.remove-bullet li {
color: #fff;
font-size: 15px;
margin-top: 20px;
padding-left: 9px;
}
.remove-bullet {
list-style: none;
}
#fff .remove-bullet li {
text-align: center;
}
.row.four-logo {
padding-top: 15px;
padding-bottom: 15px;
background-color: #fff;
margin-top: 24px;
}
img.uniconta {
max-width: 200px;
}
img.billy {
max-width: 190px;
}
img.dinero {
max-width: 190px;
}
img.economic {
max-width: 191px;
}
.row.iex-reepay {
text-align: center;
}
.after-element-pseudo:after {
content: "";
width: 55px;
height: 81px;
background-size: 55px 19px;
display: inline-block;
background-image: url(/wp-content/uploads/sites/61/2018/10/arrow-after-element.png);
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
bottom: 36px;
right: -61px;
}
.row.iex-reepay {
position: relative;
}
/* This is the section for the media queries */
Did you use your separated media-queries CSS link after main style? You have to use all responsive code after main style to get priority.
I cant seem to figure out why the h1 tag is showing differently on mobile browsers.
The site is www.jd-financialservices.co.uk When I view the site on my desktop everything is fine. When I view it on my Nexus 4 however, the 10px gap between h1 and the .topbar div has gone. It's the same on Opera, Firefox and Chrome.
Can anyone help please?
Thank you in advance.
I would advise against using position:relative; and negative top on all of your elements.
With some minor changes to your css you will probably find that it fixes itself: here is my updated version of your css. See if that fixes things.
I updated: aside nav h1 .welcome and footer. By changing some of the header elements to use position:absolute and then using margin to space elements out. You will probably find the css is more compatible cross-browser/device.
#font-face { font-family: 'Constantia'; src: url('constantia/constantia.eot'); src: url('constantia/constantia.eot?#iefix') format('embedded-opentype'), url('constantia/constantia.svg#Constantia') format('svg'), url('constantia/constantia.woff') format('woff'), url('constantia/constantia.ttf') format('truetype'); font-weight: normal; font-style: normal;}
* {
margin-top: 0px;
margin-bottom: 0px;
}
html {
font-family: 'droid sans';
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
body {
width: 940px;
margin: 0 auto;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: underline;
}
header a:hover {
text-decoration: none;
}
h1 {
font-family: 'Constantia', helvetica;
position: absolute;
top: 20px;
}
header {
height: 140px;
position: relative;
margin-bottom: 40px;
}
nav {
width: 660px;
height: 30px;
background-color: #00788a;
position: absolute;
font-size: 1.2em;
bottom: 0;
right: 0;
}
nav li a {
color: #ffffff;
}
nav a:hover {
text-decoration: underline;
}
nav ul {
padding-left: 0px;
}
nav ul li {
display: inline;
line-height: 30px;
vertical-align: middle;
color: #ffffff;
padding-left: 70px;
padding-right: 65px;
}
aside {
height: 600px;
width: 240px;
float: left;
background-color: #00788a;
color: #ffffff;
clear: both;
position: relative;
text-align: center;
margin-bottom: 30px;
}
article a {
color: #00788a;
}
.contain {
width: 940px;
}
footer {
height: 100px;
clear: both;
background-color: #00788a;
color: rgba(255,255,255,0.5);
position: relative;
font-size: 0.85em;
padding: 0 10px;
line-height: 1.5em;
margin-top: 40px;
}
footer li {
display: inline;
border-left: 2px solid rgba(255,255,255,0.5);
padding: 0 5px;
}
footer li:first-child {
border: none;
}
footer ul {
padding-left: 0;
text-align: center;
}
.foot_fade {
color: rgba(255,255,255,0.5);
}
.first_initial {
font-size: 110px;
color: #00788a;
font-weight: lighter;
}
.second_initial {
font-size: 101px;
color: #00788a;
font-weight: lighter;
position: relative;
top: -6px;
}
.rest_of_title {
font-size: 26px;
position: relative;
left: -73px;
top: 20px;
font-weight: lighter;
}
header a {
color: #000000;
}
.header_background {
float: right;
position: relative;
z-index: -1;
}
.topbar {
width: 940px;
height: 30px;
background-color: #00788a;
}
.call_now {
padding: 10px 50px 10px 50px;
font-size: 1.5em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.home_service {
padding: 10px 40px 10px 40px;
font-size: 1.45em;
line-height: 1.5em;
border-bottom: 5px solid #ffffff;
text-shadow: 2px 2px 2px #2a2a2a;
}
.service_list {
font-size: 1.25em;
line-height: 3em;
text-align: left;
padding-top: 35px;
padding-left: 20px;
text-shadow: 2px 2px 2px #2a2a2a;
}
.welcome {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
font-size: 0.9em;
line-height: 2em;
color: #2a2a2a;
position: relative;
/* top: -95px; */
text-align: justify;
}
.services {
width: 660px;
float: right;
padding: 0px 0px 0px 40px;
position: relative;
top: -95px;
}
.services a {
text-decoration: none;
position: absolute;
top: 151px;
left: 0;
width: 275px;
color: #ffffff;
background-color: rgba(0,0,0,0.5);
padding: 10px 0 10px 10px;
}
.services div {
margin-bottom: 15px;
}
.services div:last-child {
margin-bottom: 0;
}
.savings_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire_pic {
position: absolute;
top: 0;
right: 0;
height: 190px;
width: 285px;
}
.protection_pic {
position: relative;
height: 190px;
width: 285px;
}
.insurance_pic {
position: absolute;
top: 205px;
right: 0;
height: 190px;
width: 285px;
}
.mortgage_pic {
position: relative;
height: 190px;
width: 285px;
}
.retire {
width: 300px;
float: right;
margin: 0 0 10px 10px;
}
/*.shadow {
box-shadow: 0 0 3px 1px rgba(42,42,42,0.5);
margin: 3px 0;
}*/
.overlay {
background-color: rgba(0, 0, 0, 0.5);
bottom: 54px;
color: #FFFFFF;
padding: 10px;
position: relative;
width: 265px;
}
.overlay a {
text-decoration: none;
color: #ffffff;
}
.overlay a:hover {
}
.left {
float: left;
}
.right {
float: right;
}
.regulation {
font-style: italic;
color: #9a9a9a;
font-size: 0.9em;
}
.smallprint {
width: 520px;
font-size: 0.9em;
text-align: center;
position: absolute;
right: 210px;
top: 30px;
}
.copyright {
width: 310px;
margin: 0 auto;
}
.scapa {
position: absolute;
bottom: 0;
right: 10px;
font-size: 0.9em;
}
I can't get my css to center the content dive in IE. It works in all other browsers. Please help. I have tried align = center as well and even that didn't help. If there is something that I have done in and around the content div to make it not center I would like to know. Thank you.
BODY {
background-color: #eee;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
}
.wqlogin .fullwrap {
width: 100%;
margin: 0 auto;
background-color: #f7f7f7;
}
.wqlogin .topp {
width: 100%;
height: 110px;
background-color: #fff;
border-bottom: solid 1px #ddd;
}
.wqlogin .topp .wq_logowrap {
width: 910px;
margin: auto;
}
.wqlogin .topp .wq_logowrap .logo {
float: left;
/*margin-left: 10px;*/
display: block;
width: 115px;
height: 105px;
}
.wqlogin .content {
width: 910px;
background-color: #fff;
border: solid 1px #ccc;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
overflow: hidden;
}
.wqlogin .left {
display: block;
float: left;
width: 620px;
overflow: hidden;
}
.wqlogin .left .wrap {
margin: 5px 0 15px 5px;
}
.wqlogin .left .imgholder {
float: left;
margin: 8px 8px 15px 8px;
width: 288px;
height: 186px;
}
.wqlogin .rgt_login {
display: block;
float: left;
width: 280px;
height: 320px;
overflow: hidden;
}
.wqlogin .rgt_login .logwrap {
padding: 10px;
}
.wqlogin .footer {
width: 100%;
float: left;
overflow: hidden;
background-color: #fff;
}
.wqlogin .toptxt {
padding: 10px 10px 0 10px;
font-size: 24px;
/*font-weight: bold;*/
color: #666;
}
.wqlogin .toptxt .sml {
font-size: 20px;
padding-top: 0;
}
.wqlogin .error_txt {
float: left;
width: 100%;
overflow: hidden;
color: #8d0000;
}
.wqlogin .error_txt .message {
float: left;
overflow: hidden;
}
.wqlogin .username, .wqlogin .password {
width: 100%;
margin: 0 0 5px;
padding: 5px 5%;
display: block;
}
.wqlogin .login_link1 {
font-size: 12px;
text-decoration: none;
}
.wqlogin .vzw_header {
border-bottom: solid 1px #ddd;
}
.wqlogin .vzw_button {
margin: 10px 0 10px 0;
}
/*TABLE { border-spacing: 0px; border-collapse: collapse; }*/
For older versions of IE, use a text-align: center in the surrounding container.
Also, make sure the surrounding container is centered itself.
When highlighting text with IE 8 on a webpage that I'm currently developing the font changes and/or sometimes the size. The same thing happens sometimes when I hover over the menu.
This is how my css looks like and I don't know why the error occurs? One more thing that is very strange is that I have installed Windows 7 with paralells on my osx and the error does not occur there but only on PC computers. I have tried changing fonts but with no help...
This is my css:
body {
font-family: verdana, sans-serif;
font-size: 14px;
}
#wrapper, .wrapper {
width: 900px;
padding: 0 30px;
margin-left: auto;
margin-right: auto;
}
#header {
background: url('http://localhost:8888/wp-content/uploads/2012/09/120920_scam_banner.jpg') no-repeat;
height: 150px;
margin: 20px 0;
}
#header div {
width: 900px;
height: 150px;
margin-left: auto;
margin-right: auto;
position: relative;
background: none;
}
#header div a {
text-indent: -9999px;
position: absolute;
width: 900px;
height: 150px;
}
#header div a:hover {
background: none;
}
#section {
}
#menu {
float: left;
width: 175px;
padding: 20px 25px 0 0;
border-right: 2px solid #000;
text-align: right;
}
#menu a, a {
color: #000;
text-decoration: none;
}
.mp-formdiv {
float: right;
}
img {
border: 1px solid #000;
}
#menu a:hover, a:hover {
color: #fff;
background: #000;
}
.menu li {
margin: 3px 0;
text-align: right;
}
#menu h3 {
line-height: 52px;
}
#menu .artists {
padding-left: 10px;
}
#menu-artists li {
}
#content {
float: right;
width: 670px;
padding: 20px 0 50px 20px;
}
#footer {
overflow:hidden;
clear: both;
}
#white_footer {
float: left;
width: 300px;
background: #fff;
height: 20px;
}
#footer_content {
height: 20px;
}
.store {
overflow-y: scroll;
}
#the_store {
margin-top: 10px;
}
/* FONTS */
h1 {
font-size: 3em;
margin-bottom: 40px;
white-space: nowrap;
line-height: 0%;
}
h1.storefront {
font-size: 2em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
#content p strong {
font-weight: bold;
}
#content p img {
float: left;
margin: 5px 20px 20px 0;
}
#content p img:after {
margin-top: 20px;
}
#subscribe_mail input[type=text]{
width: 85px;
height: 12px;
font-size: 0.60em;
margin-bottom: 5px;
float: left;
margin-right: 4px;
}
#subscribe_mail input[type=text]:focus {
font-size: 0.75em;
}
#subscribe_mail input[type=submit] {
border: 1px solid #999;
font-size: 0.75em;
float: left;
}
.mp-message, .mp-loading {
font-size: 0.75em;
}
.MailPressFormName {
display: none;
}
#artist_info {
display: none;
margin-top: 40px;
overflow: hidden;
clear: both;
}
.more-less {
background: #000;
float: left;
color: #fff;
padding: 0 2px;
margin-top: 10px;
}
#artist_less {
display: none;
}
.gallery-icon a:hover {
background: none;
}
.gallery dl {
margin-top: 0 !important;
margin-bottom: 15px;
}
.gallery dl dd {
font-size: 0.75em;
}
.newsletterH {
margin-bottom: 5px;
}
I would use Firefox's Firebug plugin to see where the styles are coming from. IE provides a less friendly developer tool window that does something similar (I only use this if the style issue is only occurring in IE). I'd check your :hover and :focus rules first since those would cause things to happen on hover or select.
I've been around and around in circles with this one, almost finished my web page and all good in most browsers except the inevitable IE6! I've been doing some research and found out there is a problem with padding and margin in CSS, and have tried to no avail. Is there someone out there who might be able to help?
www.theclubnetwork.co.uk
body {
background: #ebf5fc url('../Images/body_bg.jpg') repeat-x 0 0;
margin: 0px 0px 0px 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: blue;
margin:0;
padding:0;
}
#env {
position: relative;
margin: 0 auto;
width: 934px;
background: url('../Images/env_bg.jpg') repeat-y 0 0;
margin-top: 10px;
padding: 125px 0 0 0;
}
#main {
width: 934px;
background: transparent url('../Images/main_bg.jpg') no-repeat 0 0;
z-index: 10;
}
#promo {
position: absolute;
top: 0;
left: 0;
width: 934px;
background: url('../Images/promo_bg2.jpg') no-repeat 0 0;
}
#bor {
position: relative;
margin: 0 auto;
top: 5px;
width: 633px;
background: url('../Images/bor_bg.gif') repeat-y 0 0;
padding: 0 0 0 0;
}
#foot {
height: 49px;
width: 912px;
background: url('../Images/foot_bg.png') no-repeat 0 100%;
padding: 0 11px 8px 11px;
color: #506273;
font-size: 11px;
clear: both;
text-align: center;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
}
#foot a {
font-weight: normal;
color: #506273;
padding-left: 0;
background-image: none;
}
#foot div {
padding: 8px 0 0 10px; /*top right bottom left*/
line-height: 16px;
}
#logo {
position: relative;
float: left;
width: 279px;
padding-right:20px;
top:20px;
left: 10px;
text-align: center;
z-index: 6;
background-color: #ffa500;
}
#slow {
position: relative;
text-align: center;
z-index: 6;
}
.nav {
position: relative;
float: left;
width: 125px;
height: 125px;
background-color: #fff;
text-align: center;
z-index: 25;
}
* html #welcome {
margin-left: 0px;
}
#welcome {
position: relative;
margin-left: 2px;
float: left;
width: 297px;
height: 150px;
background-color: #fff;
z-index: 6;
text-align: center;
vertical-align: middle;
}
a.slogan {
width: 150px;
color: blue;
font-size: 17px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.mainslogan {
width: 150px;
color: #ffa500;
font-size: 48px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.sloganmiddle {
width: 150px;
color: #ffa500;
font-size: 21px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.bottomslogan {
width: 150px;
color: #fff;
font-size: 21px;
clear: both;
text-align: center;
text-transform: uppercase;
}
a.welcome_text {
position : relative;
top: 10px;
color: blue;
font-size: 30px;
vertical-align: top;
z-index: 6;
display: block;
}
.our_web {
position : relative;
color: #ffa500;
top: 10px;
font-size: 20px;
padding-bottom:7px;
display:block;
}
a.form {
font-size: 13px;
padding-top:10px;
padding-bottom: 10px;
color: blue;
}
a.first_web {
position : relative;
color: #0d7acf;
top: 0px;
padding-left: 0;
padding-right: 0;
padding-top: 0px;
text-align: middle;
display: inline;
}
p.statement {
position : relative;
top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 0px;
text-align: justify;
}
p.allocated {
text-align: right;
}
* html .clubreg {
padding-right: 0px;
padding-left: 0px;
}
.clubreg {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
overflow: hidden;
z-index: 10;
padding-top: 12px;
padding-right: 13px;
padding-left: 12px;
text-align: left;
}
.memreg {
position: relative;
float: left;
height: auto;
background-color: #fff;
overflow: hidden;
text-align: center;
z-index: 10;
padding-bottom: 10px;
padding-top: 12px;
text-align: left;
}
.clubform {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
z-index: 10;
padding-bottom: 10px;
padding-top: 12px;
padding-right: 12px;
padding-left: 12px;
text-align: left;
}
div.box335 {
width: 220px;
float: left;
background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0;
}
div.box335in {
background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 5px 0px; /*top right bottom left*/
}
div.box220 {
width: 220px;
float: left;
padding-top: 5px;
background: transparent url('../Images/box220_bg_top.gif') no-repeat 0 0;
}
div.box220in {
background: transparent url('../Images/box220_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 30px 30px; /*top right bottom left*/
}
div.box267 {
width: 267px;
float: left;
padding-top: 5px;
background: transparent url('../Images/box267_bg_top.gif') no-repeat 0 0;
}
div.box267in {
background: transparent url('../Images/box267_bg_btm.gif') no-repeat bottom left;
padding: 0px 0px 10px 10px; /*top right bottom left*/
}
#news {
position: relative;
float: left;
margin-left: 2px;
width: 287px;
height: 165px;
background-color: #fff;
z-index: 6;
text-align: left;
color: #0d7acf;
padding-left: 12px;
padding-right: 0px;
padding-top: 13px;
}
div.box454 {
width: 454px;
height: auto;
float: left;
background: transparent url('../Images/box454_bg_top.gif') no-repeat 0 0;
}
div.box454in {
background: transparent url('../Images/box454_bg_btm.gif') no-repeat bottom left;
padding: 10px 10px 30px 10px; /*top right bottom left*/
}
div.box609 {
width: 609px;
min-height: 340px;
height: auto;
float: left;
background: transparent url('../Images/box609_bg_top.gif') no-repeat 0 0;
padding: 0px 0px 15px 0px; /*top right bottom left*/
}
div.box609in {
background: transparent url('../Images/box609_bg_btm.gif') no-repeat bottom left;
min-height: 478px;
padding: 0px 40px 10px 15px; /*top right bottom left*/
}
div.member_title {
color: blue;
width: 100%;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
font-weight: bold;
text-align: center;
}
div.regreasons {
text-align: center;
font-weight: bold;
padding-left: 10px;
padding-right:10px;
}
div.box145 {
width: 145px;
float: left;
padding-top: 5px;
padding-right: 0px;
background: transparent url('../Images/box145_bg_top.gif') no-repeat 0 0;
}
div.box145in {
background: transparent url('../Images/box145_bg_btm.gif') no-repeat bottom left;
min-height: 100px;
padding: 0px 10px 0px 10px; /*top right bottom left*/
}
* html .advertising {
left: 0px;
}
div.advertising {
position: relative;
float: right;
width: 150px;
height: 168px;
left: -2px;
padding-right: 5px;
padding-left: 0px;
padding-bottom: 0px;
text-align: left;
padding-top: 12px;
background-color: #fff;
}
.memreg2 {
position: relative;
float: left;
width: auto;
height: auto;
background-color: #fff;
overflow: hidden;
text-align: center;
z-index: 10;
padding-bottom: 0px;
padding-top: 12px;
padding-left: 12px;
text-align: center;
}
li {
padding-bottom: 8px;
}
div.buttonreg {
text-align: center;
vertical-align:bottom;
}
#faq {
position : relative;
top: 0px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 20px;
text-align: justify;
text-align:center;
}
* html #sales {
margin-left: 0px;
}
#sales {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 367px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
}
#joining {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 535px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
overflow: auto;
}
#control_panel {
position: relative;
float: left;
margin-left: 2px;
width: 297px;
height: 480px;
background-color: #666666;
z-index: 6;
text-align: center;
color: #fff;
overflow: auto;
}
#minimnu {
position : relative;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: left;
}
#focusContainer {
width: 190px;
margin: auto;
background-color: #71707f;
padding: 17px 17px 10px 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#focusContainer a {
display:block;
background-color: #383737;
color: #fff;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
border: 1px solid #000000;
width: 100%;
margin-bottom: 5px;
font-weight: 400;
}
#focusContainer a:hover {
background-color: #ffa500;
color: blue;
}
#m1 a, #m2 a, #m3 a,#m4 a {
padding-left: 10px;
color: #fff;
width: 100%;
background-color:#5d5d5d;
margin-top: -5px;
padding-top: 5px;
padding-left: 5px;
border: 1px solid #000000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.span {
padding-left: 10px;
color: #fff;
width: 150px;
background-color:#5d5d5d;
margin-top: -5px;
padding-top: 15px;
border: 1px solid #000000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
a#selected, a#selected:hover {
background: #ffa500;
color: blue;
}
a.newshead {
text-decoration: underline;
}
#leftside {
position: relative;
float: left;
}
.rbsworldpay {
position: relative;
display: block;
width = 100%;
text-align: center;
margin-left: 2px;
}
#clubinfo {
position: relative;
float: left;
width: 225px;
height: 120px;
background-color: blue;
overflow: hidden;
color: #000000;
text-align: center;
z-index: 11;
text-align: left;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 10px;
}
#meminfo {
position: relative;
float: left;
width: 225px;
height: 120px;
background-color: yellow;
overflow: hidden;
color: #000000;
text-align: center;
z-index: 11;
text-align: left;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 10px
}
.moreinfo {
float: right;
padding-right: 10px;
padding-top: 10px;
}
#bottomlink {
color: #0d7acf;
height: 48px;
padding: 0px;
}
a.club_details {
color: blue;
padding-top: 20px;
padding-left: 20px;
font-size: 12pt;
text-decoration: underline;
text-align: center;
}
In response to the only question in your post
"Is there someone out there who might be able to help?"
Yes.
Make sure your HTML has a DOCTYPE, to trigger IE6's standards mode. That's likely to eliminate a lot of CSS craziness (and possibly introduce some other craziness, but there will be less of it and it'll happen in all browsers).
To avoid having trouble with different browser behaviour, I'd suggest you use a CCS reset.
Eric Meyer explains well and offers a free example at meyerweb. That won't solve all your problems, but would certainly be a good start.
A couple of things that I saw right away.
You don't have a font size set for your h2 in the div #sales and IE is using a bigger font size. IE6 uses width and height as suggestions and will expand divs to fit the content.
Your .box335in has a width of 220px however your .member_title div has a width of 220px plus a right padding of 40px for a total width of 260px. Once again IE6 is expanding the .box335in to fit the wider width.
I wouldn't worry about making things compatible with IE6 anymore.