Module: Editor
Version: 4.4.10 +
User: Developer
Difficulty: Easy
Introduction
In this exercise the Safe2Save website will adjust itself to the size of the visitors' screen. We target multiple screen sizes in CSS by adding multiple media queries.
Prerequisites
- The Futurama Editor must be installed.
- Completing the exercise Orientation first, is recommended.
- We recommend you to test in Opera mobile emulator.
Description
Because there are so many different screen sizes, we want to be able to target our CSS to multiple screen sizes. We'll not only target screen sizes containing a maximum screen width of 640px, but we also want to target devices with a minimal screen width of 200px and a maximum width of 599px.
Assignment
Now the content of the website is optimized for the size of the Galaxy S3 screen. Make sure that the content of the website is not only optimized for the size of the Galaxy S3 but is also displayed well on the screen when the targeted device is the Samsung Galaxy S2 of the Opera mobile emulator in the landscape orientation. ( Galaxy S2 = min-width: 200px and max-width: 599px. Galaxy S3 = min-width: 600px and max-width: 640px )
Solutions
Answers
Add in the bottom of the CSS file ( For devices with min-width: 200px and max-width: 599px ):
@media only screen and (min-width: 200px) and (max-width: 599px) and (orientation : landscape) {
.right{
float:none;
}
.center{
height:250px;
}
.header{
margin-left: 20%;
}
.left{
margin-left:5px;
width:250px;
}
.graphic{
width: 250px;
height: 180px;
}
Download
You can download our solution for this assignment by clicking the image at the right. (Futurama 4.4.10)
Please note that you can very well have a different solution that is just as good as ours.
Related Topics
- Responsive website: Responsive Futurama website tutorial.
- Exercise 1 - Orientation : First exercise responsive website.
2013-07-08