CODEWITHSUNDEEP
htmlcssimage
Rumen Lasev
Rumen Lasev

Reputation: 21

I'm trying to position an image so it has the same position on different screen sizes

I'd like to begin with that, I looked through various solutions here, but none of them worked for me.
My problem is that I'm trying to position this little image but it changes it's position with different screen sizes.
I tried putting it in a div with a relative position and give the image an absolute on but it still doesn't work.
Part of the code:

<div id="container" class="container">
  <div class="logome">
  <img src="nanana.png" alt="logo" /></div>
</div>

#container {
  position: relative;
  margin: 0;
  padding: 0;
}

.logome {
  top: 20%;
  right: 28%;
  position: absolute;
}

Upvotes: 1

Views: 1474

Answers (2)

Wild Beard
Wild Beard

Reputation: 2927

I made a few comments but I feel like I should expand on them a bit.

The problem is the percentage based position values. Percentage will scale with the size of the parent. If you set it to be 25% to the left, no matter how big or small the parent its, it will always try and be 25% to the left.

However, with pixel position, when set to 25px the element will always try and be 25px to the left.

Example Fiddle - Sorry it looks bad but it makes the point!

Edit Relevant Fiddle

.a {
    display: block;
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
.a.b {
    width: 500px;
    height: 600px;
    border: 1px solid green;
}
.c {
    position: absolute;
    top: 25%;
    left: 25%;
    display: block;
    width: 50px;
    height: 50px;
    border: 1px solid blue;
}
.d {
    position: absolute;
    top: 25px;
    left: 25px;
    display: block;
    width: 50px;
    height: 50px;
    border: 1px solid blue;
}
<div class="a">
    <div class="c"></div>
</div>

<div class="a b">
    <div class="c"></div>
</div>

<div class="a">
    <div class="d"></div>
</div>
<div class="a b">
    <div class="d"></div>
</div>

Upvotes: 0

Lewis
Lewis

Reputation: 466

I think you should to use: 

@media only screen and (max-width:483px) and (min-width:310px)
{
  .What you need to resize{
 }
 .Wht you need to resize{
 }
}

Upvotes: 2

Related Questions