An issue with coding a webpage.

Question

I am trying to create an effect of a computer screen displaying typed out quotes. I have successfully created the effect as long as you are viewing it with my 24" monitor (width - 1920). It does not line up with the monitor image at all with any other resolution.
I am using a bootstrap 4 template and have modified the css, html, and java to create the one that is working. How would i make the effect work for other resolutions? Oh, yeah i was only anle to make the effect work with using absolute positioning.
Here is the relevant web site - www.djp-designs.com/index-test.html.
I just started coding all of this in September. I could really use some advice. The webpage is what i am trying to create for my school portfolio page.

Answer 1

Absolute positioning won't go well with responsiveness. You need to maybe align your objects using flexbox or grid or something. I will take a look when I get back to my computer.

Also, you now about media query, right? Maybe you'll need to use it in addition to bootstrap.

Answer 2

I tried that @media and it didn't seem to work at all...well 768 worked for everything i think.

Answer 3

Fixed the issues. Used divs and containers coupled with positioning.