Question 243994 in Html Question posted in
Some basic documentation can be found here.

Html – CSS working for mobile view but not wide screens

My CSS is working for mobile view but not wide screens. Limiting the height to a certain number of pixels for the container of the image is working on small screens but not on wide screens.

.spandemo {
  display: inline-block;
  padding-left: 39%;
}

@media screen and (max-width: 600px) {
  .spandemo {
    display: inline-block;
    padding-left: 30%;
  }
  .column {
    width: 100%;
  }
  .column img {
    max-height: 140px;
    height: 70%;
    width: auto;
  }
}

@media screen and (min-width: 600px) {
  img {
    max-height: 100px !important;
    height: 70%;
    width: auto;
    padding-bottom: 10px;
  }
}
<div class="row">
  <div class="column"><img class="responsive" src="https://picsum.photos/seed/left/200/300" style="width:50%" border="1" />
    <img class="responsive" src="https://picsum.photos/seed/right/200/300" style="float:right; width:50%" border="1" />
    <span style="float:left;">&nbsp;&nbsp;Before</span><span class="spandemo" style="float:left;">&nbsp;&nbsp;After</span></div>
</div>

It (limiting the height to a certain number of pixels for the container of the image) is working on small screens but not on wide screens

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The

    @media screen and (max-width: 600px) { 
  .spandemo { 
    display: inline-block; 
    padding-left: 30%; 
    }

    was missing a closing tag. I added a flower bracket after all the above, hugging the left margin and it is working fine now. Thanks for trying to help anyway (I specially thank @Peter Krebs for formatting my question and code and spotting that the closing flower bracket was missing)!


  2. 0

    I think you have to increase the max-height of the image in min-width: 600px, like

    @media screen and (min-width: 600px) {
  img {
    max-height: 380px !important;
    height: 70%;
    width: auto;
    padding-bottom: 10px;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search