HTML - How to make the element responsive?

[Thunda]

Hello everyone!

I've recently started working on a website and as the trend goes I went for responsive layout, using bootstrap (12 grid system). So I have to main elements in body which are a heading and an SVG path animation done with LazyLinePainter. So the problem I have is that the heading, is responsive, it stays in the middle no matter the size of the window, yet the animation refuses to do so. I've used same classes on both divs and can't come out with a solution to the problem so that's why I am writing here. I am posting both the html and css:

HTML

You must be registered to see links

CSS

You must be registered to see links

 

[Thunda]

Ideas?

 

[Mucski]

This would be so much easier if you would have setup a working page ...

Anywho, to center stuff the right code is "margin: 0 auto;" also make sure that the content is smaller then the container. also tell me how can something be 300%? As far as I know the maximum amount is 100%.

Let's say the container is max-width: 960px; then the content will be max-width: 940px; and margin: 0 auto; which will keep it on the center of the page no matter of the size of the window. max-width - can also be 100%. then the content will be anything between 0% to 99%.max

You can also use min-width alongside max-width to ensure that the screen doesn't become "too small". Like min-width: 320px;

Could you tell me why the title position is fixed? And centered with percentages? lol

You must be registered to see links

- try resizing...

You also don't need several containers. You can use only 1 container for everything.

 

[jur13n]

This would be so much easier if you would have setup a working page ...

Anywho, to center stuff the right code is "margin: 0 auto;" also make sure that the content is smaller then the container. also tell me how can something be 300%? As far as I know the maximum amount is 100%.

Let's say the container is max-width: 960px; then the content will be max-width: 940px; and margin: 0 auto; which will keep it on the center of the page no matter of the size of the window. max-width - can also be 100%. then the content will be anything between 0% to 99%.max

You can also use min-width alongside max-width to ensure that the screen doesn't become "too small". Like min-width: 320px;

Could you tell me why the title position is fixed? And centered with percentages? lol

You must be registered to see links

- try resizing...

You also don't need several containers. You can use only 1 container for everything.

300% = 3 times it's parent, just saying,

 

[Mehak50]

I’ve been using it on a production website for 5 months and have run across only two problems:
* Users can’t right click and view image src
* You have to add a link element with proper

You must be registered to see links

​

 

[ChewBecca]

Op requested closure, due to issue being resolved.