CODEWITHSUNDEEP
jqueryhtmlcss
Dean.V
Dean.V

Reputation: 111

Use orientation detection to determine position of an image

I got a header(h1) on a HTML page where a title is centered. The portrait mode lets an image be above that title, and I want the image to be on the left side of the Title when changing orientation to landscape.

I've tried with <br> combining with @media screen and (orientation:portrait/landscape) and different settings without any progress. If I use float left the image still stay on the line above the Title etc. I really have no clue how to solve it..

<!DOCTYPE HTML> 
<html> 
<body> 
<h1><img>"picture"</img><br>Car</h1> 
</body> 
</html>

Does anyone have any suggestions?

Upvotes: 0

Views: 251

Answers (1)

Roy Sonasish
Roy Sonasish

Reputation: 4609

Hope this code will help you.

html Code

<h1><img src="img.jpg" /> <span>Call</span></h1>

Css Code for Normal View

h1{
    text-align:center;
}
h1 img{
    display:inline;
}
h1 span{
    display:block;
}

Css Code for landscape View

h1 span{
    display:inline;
    background-color:#3CF;
    position:relative;
    top:-25px;
}

adjust the top position according to your image height.

Upvotes: 1

Related Questions