When researching into responsive designs, it was said that images can be most problematic, therefore I decided to create a website based entirely upon images to challenge my skills
I set about creating an in browser experience to allow people to grasp the enormous size and distance of our planet and the others within the solar system.
You can see the website working at different widths here (Note how the distance between the planets gets bigger the wider the browser, this is because the bigger the planets, the distance between them also grows to stick to the actual ratios that have been worked out from nasa statistics);
and you can visit the website and check it out yourself here;
http://scottlewis.eu/exp/space/
I am aware through my research that it is important to check the different browsers, operating systems and devices to make sure my site is available to the largest possible audience.
Below is the html & css code required to make this site work;
NOTES;
I have used percentages on the divs that contain the images to allow the images grow with the screen size.
Percentages have also been used for the padding between the planets, this needs to be done because as the screen sizes grow, the distance between the planets also needs to grow to stay to the correct ratio. This means the smaller the screen, the smaller the planets & distance, and the bigger the screen, the larger the planet size and distance between them.
akbrodie.wordpress.com 