Help with text appearing smaller in the mobile view

HTML & CSS
1

This (animated) text looks good in the desktop view, but the text needs to appear smaller in the mobile view:

<div class="animate six" style="width:100%;">
		<span>t</span><span>e</span><span>x</span>
		<span>t</span><span>e</span><span>x</span><span>t</span>
		<p class="text">&nbsp;&nbsp;TEXT-TEXT</p>
		<span>t</span><span>e</span><span>x</span><span>t</span><span>t</span><span>e</span><span>x</span>
		<span>t</span><span>t</span><span>e</span>
		<span>x</span><span>t</span><span>.</span>
		</div>

here’s the css:

@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i');
*
{
margin: 0;
}

.animate {
font-size: 30px;
margin: 50px 0 0;
font-family: arial, sans-serif;
color: #ffffff;
word-wrap:break-word;
padding: 30px;
}

	.animate span {
		display: inline-block;
	}

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

any guidance with this is appreciated

2

Reduce the font size with a media query

@media all and (max-width: 400px){
   .animate {font-size: 1.2em;}
}

Edit:
One other thing, what possessed you to wrap each letter in a span?

It can be done with just two spans.

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

.animate {
  font-size: 30px;
  margin: 50px 0 0;
  font-family: arial, sans-serif;
  color: #ffffff;
  word-wrap:break-word;
  padding: 30px;
}

.animate span {
  display: inline-block;
}

.six span {
  color: #ffffff;
  opacity: 0;
  transform: rotate(-180deg) translate(150px, 0);
  animation: twister .7s forwards;
}
p.text {
  margin: 0;
  padding-left: 20px;
}

@keyframes twister {
  10% {opacity: 1;}
  100% {
    transform: rotate(0deg) translate(0);
    opacity: 1;
  }
}
@media all and (max-width: 400px){
   .animate {font-size: 1.2em;}
}
</style>

</head>
<body>

<div class="animate six">
  <span>text text</span>
  <p class="text">TEXT-TEXT</p>
  <span>text text text</span>
</div>

</body>
</html>
3

Thanks for your reply (and edit).
The media query worked well, (the edit changed the original animation from rolling-out the text, to flipping the text). But, I appreciate the extra reply.

I’m now wondering how to change the position of the media queried text, essentially moving it a little more into the upper left corner in the mobile view. In the desktop view it is in the upper left, but in the mobile view it is pretty much more in the center of the view port. (I don’t know if this should be a forum separate posting question).

That text is currently located within these div’s, like so:

<div class="pt_featured_video" style="width:100%;">
<h0><div class="animate six" style="width:100%;">
		<span>t</span><span>e</span><span>x</span>
		<span>t</span><span>e</span><span>x</span><span>t</span>
		<p class="text">&nbsp;&nbsp;TEXT-TEXT</p>
		<span>t</span><span>e</span><span>x</span><span>t</span><span>t</span><span>e</span><span>x</span>
		<span>t</span><span>t</span><span>e</span>
		<span>x</span><span>t</span><span>.</span>
		</div>
</h0>
</div>

And the css like so:

.pt_featured_video { position: relative; display: block;padding: 0 15px; background-color: transparent;}
.pt_featured_video h0 { position: absolute; z-index: 5; background: rgba(0, 0, 0, 0.100); top: 18px; left: 18px; color: rgba(255, 255, 255, 0.8); margin: 20px 0px 0px 0px; padding: 10px; border-radius: 0%; width:100%; }

any assistance with moving the text for the mobile view is welcomed

4

OK, I see the difference now. My bad!

Add the changes to the media query I just showed you.
Your top:18px and left:18px in .pt_featured_video need to be adjusted

@media all and (max-width: 400px){
   .animate {font-size: 1.2em;}
   .pt_featured_video  {top:5px; left:5px;}
}

Adjust the offset values as needed, but that should reposition it.

There is no H0 tag, not sure what your doing there.

5

Thanks again for your help.
However, this isn’t moving the text up and left:

@media all and (max-width: 400px){
   .animate {font-size: 1.2em;}
  .pt_featured_video {top:1px; left:1px;}
{

Any additional guidance is appreciated

6

Ok, so now I have (corrected the h0 tag) and this works successfully:

	@media only screen and (max-width: 480px){
	   .animate {font-size: 1.2em;}
	 .pt_featured_video h4  {top:-15px; left:-5px; }
}
7

Have you ever completed a fundamental HTML and CSS course?

One thing that one learns through the process of education is to “research”/read about each element and property that one uses… especially when a page doesn’t work as expected. Find out if the property is behaving the way you expect it to. Sometimes our expectations can be wrong.

Personally, I have written more than 100 “test pages” focussing on certain elements to see how they work in different circumstances and to help me understand the definitions that I read in Mozilla.org and w3c.org. It’s no different than learning the vocabulary of a spoken language. Sometimes one has to refer to a dictionary to check the spelling or definition of a word. One must also check HTML and CSS references frequently to verify that code choices actually exist or that a certain value exists and how it is used.

We have asked you many times to show us a “working example” of your troublesome code, not just a detached, incomplete snippit. You respond by ignoring our request and by expecting us to guess around until we stumble into something that works for you.

Consider this yet another request to “help us help you” by taking more responsibility for your learning and for your presentation of problems.

8

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