Can anyone suggest a way to ensure that this text's CSS animation is responsive for smaller screens?

I'm currently working on a text slide-in animation, but I'm facing an issue where the text doesn't stack properly on small screens and ends up running off the screen. I want the two sentences to be on the same line for large and extra-large screens, but stack on smaller screens. Right now, it's stacking regardless of screen size and looks fine on medium screens and up, but poses a problem on small screens. Any suggestions on what I can do to fix this?

Screenshots: Full screen Small screen

body {
  text-align: center;
  background: linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);
  color: #555;
  font-weight: 300;
  font-size: 32px;
  padding-top: 40vh;
  height: 100vh;
  overflow: visible;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
}

.intro {
  display: inline-block;
  overflow: hidden;
  white-space: normal;
}

.intro:first-of-type {
  animation: showup 7s infinite;
}

.intro~.intro {
  width: 0px;
  animation: reveal 7s infinite;
  white-space: normal;
}

.intro~.intro span {
  margin-left: -355px;
  animation: slidein 7s infinite;
  white-space: normal;
}

@keyframes showup {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slidein {
  0% {
    margin-left: -800px;
  }
  20% {
    margin-left: -800px;
  }
  35% {
    margin-left: 0px;
  }
  100% {
    margin-left: 0px;
  }
}

@keyframes reveal {
  0% {
    opacity: 0;
    width: 0px;
  }
  20% {
    opacity: 1;
    width: 0px;
  }
  30% {
    width: 650px;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    width: 650px;
  }
}

p {
  font-size: 12px;
  color: #999;
}
<div class="container-fluid">
  <div class="intro">Hello.</div>
  <div class="intro col-xs-12">
    <span>My name is Nate and I need this responsive</span>
  </div>
</div>

Answer №1

After playing around with it a bit, it seems like achieving the desired effect solely through precise CSS animations may not be possible. Your best option is to customize the behavior based on different screen widths by utilizing @media rules:

@media screen and (max-width: 649px) {
    /* Styles for small screens */
}
@media screen and (min-width: 650px) and (max-width: 999px) {
    /* Styles for medium screens */
}
@media screen and (min-width: 1000px) {
    /* Styles for large screens */
}

Answer №2

Consider implementing the following CSS code:

@media screen and (min-width: 480px) {
      html {
      font-size: 75%;
      }
    }

This adjustment should enhance the appearance of the font on smaller screens. Feel free to modify the min-width and the responsive font-size values as needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop the inclusion of the scrollbar in the mat-drawer-inner-container within the Angular mat-drawer Component

Background Story: Working on designing a screen layout that includes the use of a mat-drawer to display a custom component. The challenge arises when the custom component gets nested inside a div (with class="mat-drawer-inner-container") automatically adde ...

Utilizing Javascript for altering HTML elements

It seems this issue is quite puzzling and I believe another perspective could be beneficial in identifying the problem. Despite my efforts, I am unable to understand why the "Energy Calculator" does not return a value when submitted, whereas the "Battery C ...

Which is better for creating a gradual moving background: Javascript or CSS?

I'm attempting to discover how to create a background image that scrolls at a slower pace than the page contents. I'm currently unsure of how to achieve this effect. A great example of what I'm aiming for can be seen here Would this require ...

Error: TweenLite has not been recognized

/justincavery/pen/mPJadb - this is a link to CodePen After copying the code from CodePen and running it, I encountered an error: "Uncaught ReferenceError: TweenLite is not defined". The image only draws once and there is no animation unless I press "F5 ...

The navigation pills in Bootstrap 5 are experiencing functionality issues

Hey everyone, I'm currently tackling a new project and running into an issue with Bootstrap 5 nav pills. I need them to toggle between column and grid view, but they aren't behaving as expected (content displays fine on the first pill, but nothin ...

Utilizing absolute and relative positioning for setting up a flexible sidebar layout

I'm finding myself a bit puzzled when it comes to using Absolute and Relative positioning. In essence, I have a sidebar with about 4 divs in it. My goal is for div 3 to stay in the same position on every page, even if div 1 or div 2 are missing and c ...

Show Excel spreadsheet in a drop-down menu

Seeking assistance - I have an Excel table filled with data that I would like to showcase in a dropdown menu on my website. Here's a more detailed breakdown: Table: | ROW1 | Data | Data | Data | RESULT | RESULT | | ROW2 | Data | Data | Data | RESULT ...

The html viewport size is altered by the mobile keyboard

One issue that arises when using percentage or viewport unit width and height for the <body> element is that the size of these elements will change when a mobile keyboard is invoked due to an input. I have extensively researched this problem without ...

Increasing a local variable in the view using ASP.NET

Despite its seeming simplicity, I'm struggling to find the solution to this problem. When adding a number (like 2) to a page variable, it's being recognized as a string and displaying: instead of 3 : 1+2 @{ var page= 1 ; } <li>@ ...

Ways to update HTML values using Events

I am attempting to retrieve a value using Events (ionic) once it listens for my 'onSMSArrive' event. I am able to successfully retrieve the value from the events. However, I am encountering an issue where the value is not updating in my app. Bel ...

How can we create a flexible item that can be resized along with another item set to a fixed length?

Is there a way to create an element with a fixed height and width of 40px, while having another element next to it that takes up the remaining space of the parent element's width? I want the second element to shrink when resizing, while the first one ...

MathJax only functions properly on Firefox Browser; for all other browsers, it fails to work as intended

I have integrated MathJax into a website that I designed. Everything works perfectly fine on Firefox, but there seems to be an issue with MathJax input when I try to open the site on Opera, for example. Here is the code snippet that is causing problems on ...

Tips for Improving the Naming Conventions of CSS Modules

I currently have the following setup in my webpack.config.js: { test: /\.css$/, use: [ {loader: "style-loader"}, { loader: "css-loader", options: { modules: true, importLoaders: 1, s ...

Applying a distinct CSS style to the final entry of each list item

Is there a way for me to assign a different style for the last entries in my code? <?= $k % 2 == 1 ? 'news-figure' : 'news-figure-b' ?> ...

Comment sections that refresh automatically after being posted

I am determined to provide a clear explanation. Despite having some code, I am uncertain about how to make it clone comments and add new ones with user inputted text. Below is the snippet of code I am struggling with: <!DOCTYPE html> <!-- this i ...

Receiving a null value when using getElementById

I am attempting to read and display a text file, but the Chrome console is showing an error: caught TypeError: Cannot read property '0' of undefined FinanceDashBoard.html:22" I'm not sure where I am going wrong? The code I am using is: & ...

Is there a way to incorporate two Bootstrap navbars on a single page that are of varying heights?

Utilizing Bootstrap 3.0 with dual navbars on a single page that adjust in height using the same variable for both .navbar blocks. Despite attempting to incorporate an additional class to alter the height of the initial navbar, it remains unaffected. Check ...

Display WordPress post content within a specific div element

My Wordpress site has a unique homepage design featuring a div on the left showcasing the titles of the five most recent posts. Adjacent to that is an empty div on the right with a scroll bar. I am in search of a solution whereby clicking on any post tit ...

Button background must be grayscale, while the text should remain unaffected

I have a variety of buttons with different background images. My goal is to apply a grayscale filter to the backgrounds by default and remove the filter on hover, without affecting the color of the button text. Currently, when I apply the grayscale filter ...

Reorganize a list based on another list without generating a new list

Among the elements in my HTML list, there are items with text, input fields, and tables. I also have a specific order list like [3,1,2,0]. Is it feasible to rearrange the items in the HTML list on the page based on this order list without generating a new ...