Skip to main content
dianef97554739
dianef97554739
Participant
May 31, 2017
Question

I need help my images are not showing up after media query

  • May 31, 2017
  • 2 replies
  • 181 views

@charset "utf-8";

#wrapper {

  width: 100%;

}

body {

  padding: 0;

  margin: 0;

  font-family:Roboto;

}

#wrapper header {

  width: 100%;

  height: 152px;

}

#wrapper header img {

  max-width: 100%;

  width: 100%;

  height: 200px;

}

#wrapper .menu ul {

  margin-top: 39px;

}

.menu ul li {

}

.menu ul #current {

  color: #6CADAB;

}

#main  {

  width: 100%;

  margin-top: 2%;

  margin-bottom: 4%;

}

#main h1 {

  color: #3A4771;

  font-size: 1.5em;

  text-align: center;

  text-shadow: 2px 0px #6CADAB;

}

#main h2 {

  color: #3A4771;

  font-size: 1.25em;

  text-align: center;

  text-shadow: 2px 0px #6CADAB;

  margin-bottom: 0px;

}

#main h3 {

  color: #3A4771;

  text-align: center;

  font-size: 1.15em;

  text-shadow: 2px 0px #6CADAB;

}

#maincontent .leftcontent #image5 {

  width: 100%;

  height: 371px;

  margin-bottom: 12px;

  min-width: 0px;

}

#maincontent .leftcontent #image6 {

  max-width: 100%;

  height: 371px;

}

#maincontent .leftcontent #image7 {

  width: 100%;

  border-radius: 13px;

  height: 510px;

  margin-bottom: 12px;

}

#maincontent .leftcontent #image8 {

  max-width: 100%;

  height: 510px;

  border-radius: 13px;

  min-height: 0px;

}

#maincontent .leftcontent #image9 {

  width: 100%;

  height: 333px;

  border-radius: 13px;

  margin-bottom: 12px;

}

#maincontent .leftcontent #image10 {

  max-width: 100%;

  height: 333px;

  border-radius: 13px;

}

#maincontent  {

  width: 100%;

  margin-top: 5%;

}

#maincontent .leftcontent {

  width: 30%;

  margin-left: 3%;

  margin-right: 2%;

  float: left;

}

#maincontent {

}

.leftcontent iframe  {

  width: 100%;

  border-radius: 13px;

  height: 385px;

  margin-bottom: 12px;

}

#maincontent .leftcontent img {

  width: 100%;

  border-radius: 13px;

  height: 385px;

}

#maincontent .leftcontent .image1 {

  max-width: 100%;

  height: 283px;

  margin-bottom: 12px;

}

#maincontent .leftcontent #image2 {

  max-width: 100%;

  border-radius: 13px;

  height: 273px;

}

#middle   {

  width: 30%;

  margin-right: 2%;

  float: left;

  border-radius: 13px;

  background-color: #056E74;

  margin-bottom: 3%;

  opacity: 1;

}

#maincontent #middle #accordion {

  width: 96%;

  margin-left: 2%;

  margin-right: 2%;

}

#maincontent #middle #twenty {

  width: 98%;

  margin-left: 3%;

  margin-right: 5%;

  padding-top: 2%;

  padding-bottom: 3%;

  text-align: left;

}

#middle #twenty p {

  margin-left: 5%;

  margin-right: 5%;

  color: #FFFFFF;

  font-size: 1.25em;

}

#right {

  width: 30%;

  margin-right: 3%;

  float: left;

  margin-bottom: 8%;

}

#footer {

  width: 100%;

  padding-top: 1%;

  padding-bottom: 1%;

  background-color: #6CADAB;

}

#footer p {

  text-align: center;

  color: #3A4771;

  font-size: 1.25em;

}

#maincontent #right #one {

  max-width: 100%;

  background-color: #056E74;

  margin-bottom: 12px;

  padding-top: 2%;

  padding-bottom: 4%;

  border-radius: 13px;

  height: 355px;

}

#one ul li {

  margin-left: 10%;

  list-style-type: square;

  color: #FFFFFF;

  margin-top: 10%;

  margin-bottom: 15%;

}

#one ul li a {

  color: #FFFFFF;

  font-size: 1.25em;

  text-decoration: none;

}

#maincontent #right #two {

  max-width: 100%;

  background-color: #056E74;

  border-radius: 13px;

  padding-top: 2%;

  padding-bottom: 4%;

  height: 355px;

}

#two ul li {

  margin-left: 10%;

  list-style-type: square;

  color: #FFFFFF;

  margin-top: 10%;

  margin-bottom: 15%;

}

#wrapper #facebook {

  width: 100%;

}

#facebook iframe {

  margin-top: -3%;

  clear: both;

  height: 20px;

  margin-left: 42%;

  width: 18%;

  margin-bottom: 2%;

}

#two ul li a {

  color: #FFFFFF;

  font-size: 1.25em;

  text-decoration: none;

}

#maincontent #right #three {

  max-width: 100%;

  background-color: #056E74;

  border-radius: 13px;

  margin-bottom: 12px;

  padding-top: 4%;

  padding-bottom: 4%;

  height: 243px;

}

#three ul li {

  list-style-type: square;

  margin-left: 10%;

  color: #FFFFFF;

  margin-top: 8%;

}

#three ul li a {

  color: #FFFFFF;

  font-size: 1.25em;

  text-decoration: none;

}

#maincontent #right #four {

  background-color: #056E74;

  max-width: 100%;

  border-radius: 13px;

  padding-top: 4%;

  padding-bottom: 4%;

  height: 223px;

}

#four ul li {

  margin-left: 10%;

  margin-top: 8%;

  list-style-type: square;

  color: #FFFFFF;

}

#maincontent #leftcontent #image2 {

  width: 100%;

  height: 187px;

}

#maincontent #middle p {

  margin-left: 5%;

  margin-right: 5%;

  color: #FFFFFF;

  font-size: 1.25em;

  text-align: left;

  padding-top: 5%;

}

#maincontent #middle #para1 {

  padding-top: 6%;

}

#maincontent #middle #para2 {

  padding-bottom: 6%;

}

#four ul li a {

  color: #FFFFFF;

  font-size: 1.25em;

  text-decoration: none;

}

.maincontent #middle p {

  color: #FFFFFF;

  font-size: 1.25em;

  margin-left: 5%;

  margin-right: 5%;

  margin-top: 3%;

  margin-bottom: 3%;

}

.maincontent #middle #para2 {

  margin-bottom: 2%;

}

.maincontent #middle #para1 {

  margin-left: 5%;

  margin-right: 5%;

  margin-top: 2%;

  color: #FFFFFF;

  font-size: 1.25em;

}

#maincontent .leftcontent #image4 {

  width: 100%;

  border-radius: 13px;

  height: 253px;

  margin-bottom: 12px;

}

#middle #accordion #aromas1 {

  text-align: center;

  font-size: 1.25em;

  color: #FFFFFF;

}

#middle #accordion #aromas2 {

  text-align: center;

  color: #FFFFFF;

  font-size: 1.25em;

}

#maincontent .leftcontent #image4 {

  max-width: 100%;

  border-radius: 13px;

  height: 310px;

}

#middle #accordion #aromas3 {

  color: #FFFFFF;

  text-align: center;

  font-size: 1.25em;

}

#maincontent #right #five  {

  background-color: #056E74;

  max-width: 100%;

  margin-bottom: 12px;

  border-radius: 13px;

  padding-top: 4%;

  padding-bottom: 9%;

  height: 300px;

}

#five ul li {

  margin-top: 10%;

  margin-bottom: 10%;

  list-style-type: square;

  color: #FFFFFF;

  margin-left: 1%;

  list-style-position: inside;

}

#five ul li a {

  color: #FFFFFF;

  font-size: 1.25em;

  text-decoration: none;

}

#maincontent #right #six {

  max-width: 100%;

  background-color: #056E74;

  border-radius: 13px;

  padding-top: 4%;

  padding-bottom: 4%;

  height: 325px;

}

#right #six ul li {

  color: #FFFFFF;

  margin-top: 10%;

  margin-left: 5%;

  list-style-type: square;

  margin-bottom: 12%;

}

#six ul li a {

  color: #FFFFFF;

  font-size: 1.25em;

  text-decoration: none;

}

#maincontent #right #seven {

  max-width: 100%;

  background-color: #056E74;

  margin-bottom: 12px;

  border-radius: 13px;

  padding-top: 3%;

  padding-bottom: 3%;

  height: 485px;

}

#seven ul li {

  list-style-type: square;

  margin-left: 10%;

  color: #FFFFFF;

  margin-top: 18%;

  margin-bottom: 19%;

}

#seven ul li a {

  color: #FFFFFF;

  font-size: 1.25em;

  text-decoration:none;

}

#eight ul li {

  margin-left: 10%;

  margin-top: 19%;

  margin-bottom: 18%;

  list-style-type: square;

  color: #FFFFFF;

  list-style-position: inside;

}

#eight ul li a {

  color: #FFFFFF;

  font-size: 1.25em;

  text-decoration: none;

}

#maincontent #right #eight {

  max-width: 100%;

  background-color: #056E74;

  border-radius: 13px;

  padding-top: 3%;

  padding-bottom: 2%;

  height: 480px;

}

#maincontent #middle #accordion {

  width: 98%;

  margin-left: 1%;

  margin-right: 1%;

}

#middle #accordion #case1 {

  text-align: center;

  font-size: 1.25em;

}

#middle #accordion #case2 {

  text-align: center;

  font-size: 1.25em;

}

#middle #accordion #case3 {

  font-size: 1.25em;

  text-align: center;

}

#middle #accordion #leading1 {

  text-align: center;

  font-size: 1.25em;

}

#middle #accordion #leading2 {

  text-align: center;

  font-size: 1.25em;

}

#middle #accordion #leading3 {

  text-align: center;

  font-size: 1.25em;

}

#middle #accordion #freq1 {

  text-align: center;

  color: #FFFFFF;

  font-size: 1.25em;

}

#middle #accordion #freq2 {

  text-align: center;

  color: #FFFFFF;

  font-size: 1.25em;

}

#middle #accordion #freq3 {

  color: #FFFFFF;

  text-align: center;

  font-size: 1.25em;

}

#seven ul li {

}

#accordion div p {

  margin-top: -6%;

  margin-bottom: -2%;

}

#middle #accordion div {

}

#maincontent #right #eleven {

  max-width: 100%;

  background-color: #056E74;

  padding-top: 4%;

  padding-bottom: 4%;

  margin-bottom: 12px;

  border-radius: 13px;

  height: 290px;

}

#eleven ul li {

  color: #FFFFFF;

  list-style-type: square;

  margin-left: 10%;

  margin-top: 9%;

  margin-bottom: 8%;

}

#eleven ul li a {

  color: #FFFFFF;

  font-size: 1.25em;

  text-decoration: none;

}

#maincontent #right #twelve {

  max-width: 100%;

  background-color: #056E74;

  border-radius: 13px;

  padding-top: 4%;

  padding-bottom: 4%;

  height: 290px;

}

#right #twelve ul li {

  margin-top: 8%;

  margin-bottom: 8%;

  color: #FFFFFF;

  list-style-type: square;

  margin-left: 10%;

}

#twelve ul li a {

  color: #FFFFFF;

  text-decoration: none;

  font-size: 1.25em;

}

@media screen and (orientation:portrait) and (min-width:375px) and (max-width:500px){

#maincontent .leftcontent iframe {

  border-radius: 0px;

  margin-left: -5%;

  height: 120px;

}

#wrapper header img {

  height: 154px;

}

#maincontent .leftcontent img {

  display: none;

}

#maincontent .leftcontent {

  clear: both;

  width: 103%;

}

#maincontent .leftcontent .image1 {

}

.image1 {

  width: 100%;

  height: 100px;

}

#maincontent .leftcontent #meditation {

}

#maincontent #middle p {

  font-size: 1em;

}

#maincontent .leftcontent #meditation {

}

#three ul li a {

  font-size: 1em;

  text-decoration: none;

}

#four ul li a {

  font-size: 1em;

}

#main h1 {

  font-size: 1.25em;

  line-height: 10px;

}

#main h2 {

  font-size: 1em;

  line-height: 5px;

}

#main h3 {

  font-size: 0.9em;

  line-height: 3px;

}

#wrapper #footer p {

  font-size: 1em;

}

#maincontent {

}

#maincontent #middle {

  clear: both;

  width: 100%;

  border-radius: 0px;

  background-color: #F8F3F3;

  color: #3A4771;

  margin-top: 21%;

  margin-bottom: 17px;

}

#maincontent #middle #accordion {

  margin-bottom: 10%;

}

#maincontent #middle #twenty {

  margin-top: -26%;

  margin-left: -10px;

}

#maincontent #right #one {

  height: 194px;

}

#one ul li {

  margin-top: 6%;

  margin-bottom: 0%;

  margin-left: 6px;

  padding-right: 5%;

}

#one ul li a {

  font-size: 1em;

}

#maincontent #right #two {

  height: 194px;

}

#two ul li {

  margin-left: 0px;

  margin-top: 6%;

  padding-right: 5%;

  margin-bottom: 0px;

}

#two ul li a {

  font-size: 1em;

  margin-left: 0px;

}

#maincontent #middle #para1 {

  color: #3A4771;

}

#maincontent #middle p {

  color: #3A4771;

}

#maincontent #leftcontent img {

  display: none;

}

#maincontent #middle #para1 {

}

#maincontent #leftcontent #image1 {

  display: none;

}

#middle #twenty p {

  color: #3A4771;

  width: 100%;

}

#maincontent #right {

  width: 103%;

  border-radius: 0px;

}

#maincontent #right #one {

  border-radius: 0px;

}

#maincontent #right #two {

  border-radius: 0px;

}

#maincontent #right #three {

  border-radius: 0px;

  height: 194px;

}

#three ul li {

  margin-left: 0px;

}

#three ul li a {

  padding-right: 10%;

}

#maincontent #right #four {

  border-radius: 0px;

  height: 194px;

}

#four ul li {

  margin-left: 0px;

}

#maincontent #right #six {

}

#maincontent #right #six {

}

#middle #accordion div {

  color: #FFFFFF;

}

#maincontent #right #six {

  border-radius: 0px;

}

#wrapper #maincontent #facebook {

  clear: both;

  width: 100%;

}

#facebook iframe {

  width: 21px;

  height: 18px;

  margin-top: -4%;

}

#footer {

  width: 100%;

  padding-top: 1%;

  padding-bottom: 1%;

  background-color: #6CADAB;

}

.maincontent .leftcontent #image7 {

}

body p {

}

#middle #accordion div {

  font-size: 1em;

}

#accordion div p {

  font-size: 1em;

}

#maincontent #right #seven {

  border-radius: 0px;

  padding-bottom: 0%;

  text-decoration: none;

  height: 0px;

}

#maincontent #right #eight {

  border-radius: 0px;

  padding-bottom: 0%;

}

#maincontent .leftcontent #relaxation {

}

#five ul li {

  padding-right: 5%;

  margin-left: -9px;

  margin-top: -3%;

}

#middle #accordion #case1 {

  font-size: 0em;

}

#middle #accordion #case2 {

  font-size: 1em;

}

#middle #accordion #case3 {

  font-size: 1em;

}

#five ul li a {

  font-size: 1em;

}

#six ul li {

}

#six ul li a {

  font-size: 1em;

}

#maincontent #middle #accordion {

  width: 99%;

}

#maincontent #right #seven {

  height: 300px;

}

#seven ul li {

  margin-left: -11px;

}

#seven ul li a {

  font-size: 1em;

}

#maincontent #right #eight {

  height: 280px;

}

#eight ul li {

  margin-left: -13px;

}

#eight ul li a {

  font-size: 1em;

}

#middle #accordion #case1 {

  height: 27px;

  color: #FFFFFF;

  font-size: 1em;

}

#maincontent .leftcontent #image6 {

}

#middle #accordion #case1 {

}

#middle #accordion #aromas1 {

  font-size: 1em;

}

#middle #accordion #aromas2 {

  font-size: 1em;

}

#middle #accordion #aromas3 {

  font-size: 1em;

}

#maincontent #right #five {

  height: 160px;

}

#five ul li {

  margin-left: 0px;

}

#six ul li a {

}

#six ul li {

  padding-right: 5%;

  margin-left: 0px;

}

#maincontent #right #six {

  height: 194px;

}

#maincontent #right #seven {

  height: 160px;

  border-radius: 0px;

}

#seven ul li {

  margin-top: 4%;

  margin-bottom: 4%;

}

#eight ul li {

  margin-top: 4%;

  margin-bottom: 4%;

}

#maincontent #right #eight {

  height: 140px;

  border-radius: 0px;

}

#middle #accordion #leading1 {

  font-size: 1em;

}

#middle #accordion #leading2 {

  font-size: 1em;

}

#middle #accordion #leading3 {

  font-size: 1em;

}

#maincontent #right #eleven {

  border-radius: 0px;

  height: 132px;

}

#right #eleven ul li {

  margin-top: 3%;

  margin-bottom: 3%;

  margin-left: 5px;

}

#eleven ul li a {

  font-size: 1em;

}

#maincontent #right #twelve {

  border-radius: 0px;

  height: 162px;

}

#twelve ul li a {

  font-size: 1em;

}

#right #twelve ul li {

  margin-top: 3%;

  margin-bottom: 3%;

  margin-left: 5px;

}

#middle #accordion #freq1 {

  font-size: 1em;

}

#middle #accordion #freq2 {

  font-size: 1em;

}

#middle #accordion #freq3 {

  font-size: 1em;

}

}

    This topic has been closed for replies.

    2 replies

    pziecina
    pziecina
    Legend
    June 1, 2017

    To the OP,

    This is your 3rd post with the same question and you failed to reply to the original. Please create and reply to one post  from now on, the original post was -

    https://forums.adobe.com/thread/2339385

    Your second post has already been locked, and i will ask for the original to also be locked.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    June 1, 2017

    First off, why are you using a unique identifier where a class would be better suited.

    As an example

    #middle #accordion #leading1 {

      font-size: 1em;

    }

    #middle #accordion #leading2 {

      font-size: 1em;

    }

    #middle #accordion #leading3 {

      font-size: 1em;

    }

    could be represented (with a corresponding change in the markup) as

    .middle .accordion.leading {

      font-size: 1em;

    }

    In the confines of the media query, I see

    #wrapper header img {

      height: 154px;

    }

    #maincontent #leftcontent img {

      display: none;

    }

    This means that no images will shown in the #leftcontent container when the screen meets the required properties.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices