How do I make my website more responsive? (the idea)

How do I make my website more responsive? (the idea)
0

#1

That’s how it looks full screen

That’s how it looks like at about less than 1000px

I changed the position for no reason whatsoever…
The graph is not responsive at all and I know it, unfortunately it is going to be tricky because it was made with d3.js and the base project was not responsive: Population Pyramid Chart

The errors are coming from the d3 graph

I am really bad at responsive design.


#2

Try rotating graph 180° and numbers also 180°. This can be achieved by using flex.


#3

What kind of layout are you trying to achieve?

To gain more clarity, you could experiment with layout versions or even prototypes before you code the layout. Maybe on paper, or with some prototyping software like Sketch or Adobe XD.


#4

:sweat_smile::sweat_smile:I don’t have much experience with D3.js, so far I’ve only finished the course on FCC and I’ve updated the chart I am using right now in order to make it work.
It is a bit overwhelming. :sweat_smile::sweat_smile:


#5

Rotating has nothing with d3. And ordinary css transform: rotate and/or css flex will do just fine. And media queries to encompass these styles . Imagine this: An media query that rotate graph when width get to certain width i.e gets smaller.