CODEWITHSUNDEEP
joomlaresponsive-designmedia-queriesjoomla3.0
Justyne Lobello
Justyne Lobello

Reputation: 3

Media Queries on Joomla 3 Not working Suddenly

For some reason, my Joomla 3 website (using the Protostar Template) has media queries that just aren't working anymore. A specific example is located on this page. If you view the page on your phone, the large bus image on the page is supposed to "stack" on the text below it once the window gets to 599px or less.

What's strange is things like this were working, then suddenly stopped working. I tried to find out what could have gone wrong with no luck.

Here's my CSS Code that includes the media queries. I just put it all in the template.css file:

.bustype{width:206px;
height:296px;
border:2px solid black;
margin-right:10px;
  margin-left:10px;
margin-bottom:25px;
display:inline-block;
padding:5px
}
#bustypewrap{
width:100%;
margin:auto;
text-align:center;}

.busimage{
    width:45%;
    margin-left:5%;
    float:left}
 .buscopy{
     width:40%;
     float:right;
     text-align:justify}
  .clearitall{
      clear:both;}

.footerbb{
    width:100%;
    padding:15px;
  margin-top:20px;
    text-align:center;
    background-color:#00467e;
    color:#fff;}
.spectable{
  display:block;
}
.spectablemobile{
  display:none;
}
  .mobilelogo{
    display:none;
  }

.buttonblue, .buttonblue:hover {
font-size:18px;
  a{color:#fff;}
  a:hover{color:#fff;}
    background-color: #1d78cb;
    -webkit-box-shadow: 0px 3px 0px 0px #0f3e68;
    -moz-box-shadow: 0px 3px 0px 0px #0f3e68;
    box-shadow: 0px 3px 0px 0px #0f3e68;
}
.mobilebanner{display:none;}
.popupimagesbuses{
float:left;
margin:10px;}
}
@media only screen and (max-device-width: 599px) {
  .spectablemobile{
    display:block;
  }
  .spectable{
    display:none;
  }

  .busimage{
    width:100%;
    }
 .buscopy{
     width:100%;
     text-align:justify}
.mobilebanner{display:block;}  
  #content{
    padding-left:10px;
    padding-right:10px;
  }
  body{
    padding-left:0px!important;
  }
}

@media only screen and (max-device-width: 979px) {
  .mobilelogo{
    display:block;
  }

    }

I only included the code that I added in, the rest is basic CSS from the template (Protostar) that may be modified with colors, etc- but that's about it.

Any help you can provide will be greatly appreciated! Thank you.

Upvotes: 0

Views: 276

Answers (1)

jonasfh
jonasfh

Reputation: 4579

You have a typo before the media query (an extra curly brace ...): 

.popupimagesbuses{
float:left;
margin:10px;}
}

Upvotes: 3

Related Questions