CODEWITHSUNDEEP
css
Mulgard
Mulgard

Reputation: 10569

CSS: How to get position and size relative to screen width?

I have a problem with relative positioning, in the following my html code:

<ion-view class="menu-content" view-title="Postkarte">
    <ion-content>
        <div class="postcard">

        </div>
    </ion-content>
</ion-view>

And my current CSS:

.postcard {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-position: center center;
    background-image: url("../img/frames/postcard_00.png");
    background-size: contain;
    background-repeat: no-repeat;
    width: 354px;
    height: 250px;
}

As you can see i defined width and height absolute (354 and 250px). I tried to set the width to 90% but that made the div too small. I guess just 5 x 5 px. I want it to be at 90% of the width of my device. Since im developing an app for mobile devices i also need to check in css if the orientation is landscape or protrait because if it is portrait i need the width to be 90% of the devices screen width and if it is landscape i need the height to be 90% of the devices height.

How can i do that?

Upvotes: 0

Views: 1495

Answers (1)

Eric Mitjans
Eric Mitjans

Reputation: 2169

You can use media queries.

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

      .postcard { height:90%; }

}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 767px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
       .postcard { width:90%; }
}

Upvotes: 1

Related Questions