Select one of your previous labs, preferably the one that you think looks the be

Question

Select one of your previous labs, preferably the one that you think looks the best, and make it responsive so that it looks great on a smartphone in portrait mode with media queries. It should look the way it used to, but just have a more compact look and feel when the screen width shrinks down to 320 pixels. In addition to performing media queries based on size and color, you should include at least one layout-based media query such that the physical position and layout of items changes in phone portrait mode. If none of your previous labs seem to have content that is conducive to demonstrating changing a page layout for a smaller form factor, you should create a new example instead, so as to demonstrate your mastery of media queries and making a site that adapts to both computers and smartphones.

Explanation / Answer

There is no chnage in HTML and JavaScript

Below is updated CSS file:

html {
min-width: 340px;
}

body {
background: -moz-linear-gradient(-45deg, rgba(249,247,247,0.69) 0%, rgba(181,181,181,0.73) 14%, rgba(177,179,249,0.81) 38%, rgba(39,49,244,0.93) 77%, rgba(31,47,119,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(249,247,247,0.69) 0%,rgba(181,181,181,0.73) 14%,rgba(177,179,249,0.81) 38%,rgba(39,49,244,0.93) 77%,rgba(31,47,119,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(249,247,247,0.69) 0%,rgba(181,181,181,0.73) 14%,rgba(177,179,249,0.81) 38%,rgba(39,49,244,0.93) 77%,rgba(31,47,119,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0f9f7f7', endColorstr='#1f2f77',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
min-width: 340px; /*Set minimum width of body to 320px*/
box-sizing: border-box;
}

.ferrets_webpage li {
font-style: italic;
}

.ferrets_webpage .list-item-highlight {
font-weight: bold;
color: yellow;
}

.ferrets_webpage .footer {
font-family: "Calibri";
}

.ferrets_webpage h1 {
font-family: "Arial";
color: black;
}

.ferrets_webpage h1, h2 {
display: inline-block;
}

.ferrets_webpage h1, h2, h3 {
margin: 0px;
}

.ferrets_webpage .standard-paragraph {
font-family: "calibri";
font-size: 18px;
color: #000000;
width: 800px;
margin-top: 10px;
margin-bottom: 10px;
}

.ferrets_webpage .ferret {
display: table;
font-size: 19px;
border: 2px solid blue;
margin-left: 20px;
margin-bottom: 20px;
}

.ferrets_webpage .name, .type, .supplies {
display: inline-block;
font-family: "calibri";
font-size: 18px;
}

.ferrets_webpage .name {
width: 140px;
border-right: 2px solid blue;
}

.ferrets_webpage .ferrets-playing-images {
width: 300px;
height: 200px;
border: 3px solid blue;
background-image: url("images/Ferrets-playing.gif");
background-size: 300px 200px;
display: inline-block;
vertical-align: middle;
}

.ferrets_webpage .ferrets-playing-images-highlight {
width: 300px;
height: 200px;
border: 3px solid white;
background-image: url("images/Ferrets-playing.gif");
background-size: 300px 200px;
display: inline-block;
vertical-align: middle;
}

.ferrets_webpage .ferrets-playing-caption {
display: inline-block;
vertical-align: middle;
width: 480px;
}

@media only screen and (min-width: 320px) and (max-width: 820px) { /*Media queries to work between 320 and 820 px resolution*/
.ferrets_webpage .standard-paragraph {
width: 100%;
}

.ferrets_webpage li {
width: 95%;
}

.ferrets_webpage .name, .ferrets_webpage .supplies, .ferrets_webpage .type {
width: 20%;
font-size: 14px;
float: left; /*Changes the position of the column to align in table model*/
height: 35px;
}

.ferrets_webpage .ferret > div {
position: relative;
width: 100%;
}

.ferrets_webpage .ferret .Diet .name, .ferrets_webpage .ferret .Diet .type {
height: auto;
}

.ferrets_webpage .supplies, .ferrets_webpage .type {
width: 65%;
}
}

Related Questions

Navigate

• Browse (All)
• Browse S
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.