CODEWITHSUNDEEP
htmlcss
GISVPN
GISVPN

Reputation: 33

Cannot Change Image Position on Smaller Screen

I have an image that I would like to align on the right of the screen when the screen is small and align on the left on larger screens - I have the code below but not sure why this isn't working as expected:

body, html {
  height: 100%;
}

@media screen and (max-width: 855px) {
  .left_logo {float: right;}
}

.left_logo {
float: right;
position: absolute;
top: 4%;
left: 3%;

}
<body>

<div class="left_logo">
<img src="https://lh3.googleusercontent.com/G5oF0mhpOcQzFTrU6TDUL0JoAjzRt38weiZKua7L61WVT1z3dPcE9gUu-W2EwtM9cZU=s180-rw">
</div>

  
</body>

Example: https://jsfiddle.net/oak22424/djbmqyk0/2/#&togetherjs=JRRSOGIcor

Am I missing something obvious?

Upvotes: 0

Views: 413

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

You can't use position:absolute and float - its either one or the other.

As you want to position the image at a specific top and left value, then you can remove float and just use position: absolute. To move it to the right, you can set right to whatever value you want, and set left to auto to clear the previous value of 3%.

.left_logo {
  left:auto; /* reset the value for left */ 
  right:3%;
}

Also note that you also need to include the media query after the more general CSS, otherwise it will be overridden by the CSS that comes after it.

Working snippet based on your fiddle - view it in full screen to see the image move to the left: 

.left_logo {
    position: absolute;
    top: 4%;
    left: 3%;
}

@media screen and (max-width: 855px) {
  .left_logo {
      left:auto; /* reset left value */
      right:3%;
  }
}
<div class="left_logo">
<img src="https://lh3.googleusercontent.com/G5oF0mhpOcQzFTrU6TDUL0JoAjzRt38weiZKua7L61WVT1z3dPcE9gUu-W2EwtM9cZU=s180-rw">
</div>

Upvotes: 1

Related Questions