Responsive css Animation

HTML-CSS
1

Hi everyone,
merry christmas,
i was trying some animation which is working well on bigger screen but on small screen its not working fine, iam looking for reponsive approach for css animation that work on smaller screen without coding for smaller screen. any help shall be highly appreciated. thanks

2

It’s difficult to give advice without seeing some code, or even knowing which CSS properties you’re animating, but generally you’d animate widths, heights or position properties with relative units like % instead of fixed px values.

3

here is the code pen,

https://codepen.io/gurpreet_singh9189825/pen/abmVpYO

4

I’m confused, the only animation you have is fading in a heading by changing its opacity. I don’t see how that would be different on smaller screens.

If the issue is that the font size is too big on a small screen, that’s nothing to do with the animation, you’d need a media query to change the font size.

5

Hi,
But for media query i have to reposition elements and font size, is their any approach that position adjust itself and font size scale up and down as per screen?
i tried giving position values in percentages but on bigger screen its looking different, i dont know why percentages giving different result

6

Hi,

I’m no expert, but I had the same issue with one of my FCC project. Have you tried using viewport width (vw) to your font size?

Merry Christmas!

7

Hi, see my pen.
i code for smaller screen and for bigger screen i use media query but still same problem.
no i havent tried vw for font size

https://codepen.io/gurpreet_singh9189825/pen/poEdpzX

8

I’m not exactly sure what you’re trying to achieve, but I’m guessing you want the font to scale with the screen size. In that case, vw would indeed be the right unit for that. You can try giving your .modern class a font size of 10vw, for example, and see if that does what it should.

10vw means that the font size is always 10% of the total browser window width. If the screen gets wider, the font gets bigger. At some point, when the image doesn’t grow anymore, you’d usually include a media query to make sure the font doesn’t grow anymore, something like

.modern {
    font-size:10vw;
}

@media (min-width:1500px) {
    .modern {
        font-size:150px;
    }
}
9

Yes we can do this, thanks, is their any solution to position as well, i put position in percent and i code for smaller screen but on bigger screen i have to rearrange the positions is their any solution to this as well?
Thanks in advance

10

But the font already stays where it is, relative to the picture, and it scales with the picture. Can you show a screenshot describing the problem?

11

Hi, you are right, after applying font-size in vw it actually works, what i did wrong is given 10vw to mobile approach and on big screen i was changing it to 100px via media query which is not needed . now its working good, thanks, iam learning responsive design could you advice any good book or tutorial?

12

I can’t recommend any books or many tutorials, I watched one or two courses on CSS from this channel (NetNinja) and then started building pages. The websites I keep referring to when I don’t remember things are

1 Like
13

@Gurpreet_Singh I just googled and found few of these free online articles that might turn useful for you:





Happy designing and create a blast this year :slight_smile:
14

@LynnCobb Thanks for finding some time and posting these links iam thankful.
these could be useful, again thanks a lot