1 Replies - 356 Views - Last Post: 28 June 2019 - 01:45 PM

#1 chrisjchrisj   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 91
  • Joined: 04-February 19

help with css landscape media query

Posted 25 June 2019 - 04:33 PM

After hours of trial and error, this text that I want to appear close together (stacked) shows correctly in iPhoneX 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 "and (orientation : landscape)"). The successfully working portrait view is the @ media screen code below:


 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;
			 }
}



any help will be appreciated

Is This A Good Question/Topic? 0
  • +

Replies To: help with css landscape media query

#2 TechnoBear   User is offline

  • Lady A
  • member icon

Reputation: 455
  • View blog
  • Posts: 1,392
  • Joined: 02-November 11

Re: help with css landscape media query

Posted 28 June 2019 - 01:45 PM

You probably want to use the orientation keyword.

Examples taken from the above link:

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1