Help with css landscape media query

After some trial and error (mostly error), this text that I want to appear close together (stacked vertically) shows correctly in iPhone portrait view, but the text lines have too much space in between when I turn the phone to landscape view. I tried many things, surfed for answers without success (and tried the suggested “and (orientation : landscape)” in the media query, without success). It’s a text animation that rolls out and stacks vertically. Here’s the code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title></title>
   	 <style>
       	 p.int {
	font-size:32px;
	font-family:arial, open sans;
	font-weight: 900;
	margin: -41px 30px -12px -6px;
	}

	@media screen and (max-device-width:480px) {
	 p.int{
	 font-size: 1.2em;
	margin: -74px 10px -19px -4px;
	 }
	}
	</style>

	<style>
	#dot {
	font-size:69px;
	color: #c07373;
	vertical-align:0.5px;
	margin:0 -2.4px;
	}

	@media screen and (max-device-width:480px) {
	#dot {
	font-size: 4.0em;
	color:#c07373;
	vertical-align:-1.8px;
	margin:0 -5.2px;
	}
	}
    	</style>

	 <style><!-- begin roll-out animation /////-->
	@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
	*
	{
	margin: 0;
	}

	.animate {
	font-size: 29px;
	font-weight: 900;
	font-family: arial, sans-serif;
	color: #C7BCB4;
	word-wrap:break-word;
	padding: 0px 0px 0px 30px;
	}

	.animate span {
	display: inline-block;
	}

	.animate span:nth-of-type(2) {
		animation-delay: .05s;
	}
	.animate span:nth-of-type(3) {
		animation-delay: .1s;
	}
	.animate span:nth-of-type(4) {
		animation-delay: .15s;
	}
	.animate span:nth-of-type(5) {
		animation-delay: .2s;
	}
	.animate span:nth-of-type(6) {
		animation-delay: .25s;
	}
	.animate span:nth-of-type(7) {
		animation-delay: .3s;
	}
	.animate span:nth-of-type(8) {
		animation-delay: .35s;
	}
	.animate span:nth-of-type(9) {
		animation-delay: .4s;
	}
	.animate span:nth-of-type(10) {
		animation-delay: .45s;
	}
	.animate span:nth-of-type(11) {
		animation-delay: .5s;
	}
	.animate span:nth-of-type(12) {
		animation-delay: .55s;
	}
	.animate span:nth-of-type(13) {
		animation-delay: .6s;
	}
	.animate span:nth-of-type(14) {
		animation-delay: .65s;
	}
	.animate span:nth-of-type(15) {
		animation-delay: .7s;
	}
	.animate span:nth-of-type(16) {
		animation-delay: .75s;
	}
	.animate span:nth-of-type(17) {
		animation-delay: .8s;
	}
	.animate span:nth-of-type(18) {
		animation-delay: .85s;
	}
	.animate span:nth-of-type(19) {
		animation-delay: .9s;
	}
	.animate span:nth-of-type(20) {
		animation-delay: .95s;
	}

	/* animation six */
	.six span {
	color: #ffffff;
	opacity: 0;
	transform: rotate(-180deg) translate(150px, 0);
	animation: twister .7s forwards;

	}

	@keyframes twister {
	10% {
	opacity: 1;
	}
	100% {
	transform: rotate(0deg) translate(0);
	opacity: 1;
	}
	}

	@media only screen and (max-width: 760px){
	 .animate {font-size: 1.2em;}
	 .pt_featured_video h4  {top:-15px; left:-5px; width:80%}
	}
	</style>

</head>
<body>
	    <div class="col-md-12">
	    <div class="top-video">
	    <div class="row">
	    <div class="pt_featured_video" style="width:100%;">
		<h4>
	                <div class="animate six" >
		<span>g</span><span>e</span><span>t</span>
		<span>y</span><span>o</span><span>u</span><span>r</span>
		<p class="int">text<span id="dot">.</span>text</p>
		<span>w</span><span>o</span><span>r</span><span>k</span><span>i</span><span>n</span><span>g</span>
		</div>
		</h4>
	                </div>
	                </div>
	    	</div>
	    </body>
</html>

any help will be appreciated

Post a “working page” as described in our posting guidelines so we can simulate the problem on our computers and we will be glad to help. We should not have to use our time guessing where your text is supposed to fit on the page, how the page is framed, and what resources are needed to create a “working page” locally.

I don’t see the problem as described - perhaps there is not enough text in the example to tell how it is supposed to behave - but I do not have an IOS device, either. I also don’t think max-device-width is of any value here. It is written for an expected device. One could never keep up with all of the devices on the market. Would be better to expect a window width and adapt accordingly. Perhaps @PaulOB or another IOS person should pick this up as I believe I am missing the intent of the OP and I don’t want to be a nag.

In the meanwhile, two screen shots, one showing the profile view and one showing the landscape view of the same content would probably be helpful.

The animated dot is interesting :slight_smile:

I formatted the code a tad, added a couple of comments, and moved one inline style up into the CSS. No functional changes to ChrisjChrisj’s example were made.
landscape-media-query-needed=ChrisjChrisj.html|attachment (4.0 KB)

I’m on an iOS device at the moment but I’d need to see a working demo as the one Ron shows above looks the same to me in landscape but does not stack vertically.

Perhaps it’s the font scaling in landscape mode that causes the problem so you could try this.

body {-webkit-text-size-adjust: 100%}

@ChrisjChrisj,

Can you please post a couple of screen shots showing what we should be seeing? how the page should be behaving? I thought my desktop browser kept me from seeing the problem, but Paul was unable to see it, too. We need a bit more information from you.

1 Like

thanks for the replies.
should I put the -webkit in a certain css section?

also, please see attached portrait and landscape screen shot examples:portrait
landscape

Try the code exactly as I gave it to you and then report back. :slight_smile:

thanks again.
regarding " try the code exactly…"

no change to report

any additional suggestions are appreciated

Have you got a link or a codepen so that I can test on my iPhone and see what’s happening?

Thank you for these two screen shots. They help!

After you have filled @Paul’s requests for a codePen or URL to a test site where he can test your original code, if the problem is still not resolved, I would like for you to accept a small challenge.

Create TWO working pages (that you can add to your next reply to this post).
One of the working pages should contain ONLY the code needed to show the portrait view.
The other working page should contain ONLY the code needed to show the landscape view.
In other words, there should be no media queries in either working page because I don’t want them to be responsive.

That’s the challenge. All you need to do is pick the code that is needed for each display. teacher

1 Like

thanks for all of the replies.
ok, I tried this code change. It remedies the phone landscape vertical spacing issue, but wrecks the desktop view - see attached image.

    <style>
        p.int {
        white-space:pre;
		font-size:32px;
		font-family:arial, open sans;
		font-weight: 900;
		//letter-spacing: -1px;
		margin: -41px 30px -12px -6px;
	}

	@media screen and (max-device-width:480px) {
			 p.int {
			 white-space:pre;
			 font-size: 1.2em;
			 margin: -74px 10px -19px -4px;
			 }
}

@media (orientation: landscape) {
  p.int  {
  margin: -94px 10px -19px -4px;
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
</style>

I look forward to any comments

I won’t be able to test until later but the answer will be that you don’t need the orientation media query and you don’t need the device-width media query all you will need is to test on available screen width with a media query for all.

You can’t test using max-device-width:480px as that will only target a few iphones anyway and miss most of the modern ones. there are loads of variations which make it unusable to carry on with this approach. (Note that for iphones the device-width is the same no matter the orientation so again makes this approach pointless.)

You just need to test the max-width (or min-width) and that works for all devices. I have got the link you PM’d me and will try to look later today to see where you are going wrong. I;m guessing is that you have conflicting rules because of all the silly media queries. :slight_smile:

Ok, this is what we have been asking you to do from the start to help with your problem.:slight_smile:

The above is a working version of the text animation.

I removed all your nonsense for the max-device and orientation changes and it works fine in portrait and landscape and desktop at all widths.

You don’t need most of the negative margins as they are just magic numbers that make no sense. The media queries just need to make the text smaller as required if that was the object of the exercise.

Perhaps you can try the revised code and explain why it does no meet your requirements. (Note that I have copied your live link locally and used the code above and it still works as expected.)

Be more logical with your media queries and style rules as the cascade is very important. In most cases media queries modify existing code so make sure they follow the original rules.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.