Help with media query

HTML & CSS
1

I have an animation that displays three pieces of text: “this = that”, for example. Each separately fades in on a delay, then separately fades out. It looks good on the desktop view, but needs work on the media query.
Here’s the html:

	<section class="animation-box">
	<span class="first-text">this</span>
<span class="second-text">&nbsp;=&nbsp;</span>
<span class="third-text">that</span>
 	 </section>

And the css:

.animation-box {
  width: 50%;
  height: 6.5rem;
  margin: 5% 0 0 35%;
  overflow: hidden;
  position: relative;
  font-size: 20.5%;
  font-style: arial, open sans;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0%;
  }
}

.first-text {
  font-size: 2.5rem;
  position: absolute;
  top: 1.5rem;
  left: 5%;
  opacity: 0;
  color: #f2f2f2;
  animation-name: fadeInOut;
  animation-delay: 4.5s;
  animation-duration: 32s;
}

.second-text {
  font-size: 2.5rem;
 position: relative;
 float: left;
 clear: none;
  top: 1.5rem;
  left: 22%;
  opacity: 0;
  color: #f2f2f2;
  animation-name: fadeInOut;
  animation-delay: 8.5s;
  animation-duration: 32s;
}

.third-text {
  font-size: 2.5rem;
 position: relative;
 float: left;
 clear: none;
  top: 1.5rem;
  left: 23.5%;
  opacity: 0;
  color: #f2f2f2;
  animation-name: fadeInOut;
  animation-delay: 12.5s;
  animation-duration: 32s;
}

	@media only screen and (max-width: 480px){
	   .animation-box {font-size: .9em;}
	   .animation-box {width: 75%; top: 20px; margin: 15% 0 0 20%;}
	   .first-text{font-size: 1.4em;}
	    .second-text{font-size: 1.4em; left:30%;}
	    .third-text{font-size: 1.4em; left:30.5%;}
}

Of course, I’d like ‘this = that’ to line up equal spaced, but when I get it lined up in iPhone, for example, when the phone turns landscape, the ‘this = that’ overlaps, as you can imagine.

Any guidance with getting it equal spaced in most (if not all) device views is appreciated

1 Like
3

If you make the lettering even smaller, will that help?

1 Like
4

Thanks for your reply, but the font size doesn’t seem to be related to the overlap issue.
Any other help is welcomed

5

You really need to stop absolute positioning everything and learn to work in the normal page flow. It will greatly benefit you!

Looking at your code, you have the first span absolute positioned.
Then you have the 2nd & 3rd spans floated and then shifted with relative positioning. Did you know that relative positioned items still maintain there original space in the page flow. It only moves the element visually and leaves behind a black hole. It is not the way to lay out text. Relative positioning is best for subtle shifts. Not for large moves.

Here is your code using display flex for alignment.

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
body{background:#000}

.animation-box {
  display:flex;
  width: 50%;
  min-height: 6.5rem;
  margin: 40px auto 0;
  justify-content: center; /*span margins added below*/
  align-items: center;
  font-size: 20.5%;
  font-style: arial, open sans;
  border:1px solid red;
}
.animation-box span {
  margin: 0 .5em; /*add some spacing between the spans*/
  font-size: 2.5rem;
  opacity: 0;
  color: #f2f2f2;
  animation-name: fadeInOut;
}
.first {
  animation-delay: 1.5s;
  animation-duration: 12s;
}
.second {
  animation-delay: 2.5s;
  animation-duration: 12s;
}
.third {
  animation-delay: 4.5s;
  animation-duration: 12s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  45% {
    opacity: 1;
  }

  100% {
    opacity: 0%;
  }
}

@media only screen and (max-width: 480px){
  .animation-box {
    font-size: .9em;
    width: 75%;
  }
  .animation-box span {font-size: 1.4em;}
}

</style>

</head>
<body>

<section class="animation-box">
  <span class="first">this</span>
  <span class="second">=</span>
  <span class="third">that</span>
</section>

</body>
</html>
3 Likes
6

Very helpful. Much thanks…

Any guidance with this other styling issue (vertical-align) is appreciated.

I’ve tried different things, like this:

<p class="test">Text<i class="fa fa-square" style="font-size: 15px; color:#800000; vertical-align: middle;"></i>Text</p>

and this:

<p class="test">Text<i class="fa fa-square" style="font-size: 15px; color:#800000; vertical-align: middle-text;"></i>Text</p>

yet the ‘square’ icon stays on the baseline.

Any trick to get this vertically in the middle between two words?

I look forward to any assistance.

7

That looks like a font awesome class.

Post a link to your page or post a working code demo, like I just posted below.
In your case it would show that the vertical-alignment is not working.

Or create a codepen demo and paste the link in with your reply.

If you keep making people piece together your code snippets you will find that no one will over much assistance.

middle


<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
span{
  background:red;
}
i {
  font-size:2em;
  vertical-align:middle;
  background:yellow
}
</style>

</head>
<body>

<p>
   <span>filler text</span> <i>Large Middle</i> <span>filler text</span>
</p>

</body>
</html>

Also take note of what the specs define for middle for inline elements
Values for inline elements

middle

Aligns the middle of the element with the baseline plus half the x-height of the parent.

You can also use a <length> value to fine tune vertical alignment, such as…

vertical-align:4px;

or

vertical-align:-2px;

etc.

4 Likes
8

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