12/03/2013

12/03/2013

Today in class we worked on our CA's. With my time I tidied up my content and made some of the pages responsive!

My header background and footer were responsive from the beginning so I didn't need to spend time working on those, but the header Navigation bar would get cut off by the shrinking screen. 

The code for the header wasn't too difficult to figure out. I changed the width's when the screen reached 980px, 650px and 480px, I also did this for all the changes for size in divs and the wrap. Example code of what I changed the Nav Bar:

This is what full screen looks like, no change to the media-query:


.navbar{
top: 100px;
width: 100%;
height: .1px;
text-align: center;
padding-left: 0px;
}

.navbar a {
border-radius: 2.9px; 
font-size: 30px;
font-family: Myriad Pro;
padding-left: 15px;
padding-bottom: 25px;
padding-right: 15px;
color: #F8F8F8;
text-decoration: none;
min-width: 960px;
}

.navbar a:hover {
color: #333333;
} 

This is when the screen reaches 980px. I decided instead of changing the font to something small and unreadable, I would just move the navs under on another. Some of the code is missing as it was already set in the main css and didn't require any altering, so they were not needed in the media-query: 

.navbar{

width: 685px;

height: 15px;

}

.navbar a { 

font-size: 30px;

padding-left: 15px;

padding-bottom: 20px;

padding-right: 15px;

min-width: 600px;

}

When the screen turns to 450px. I had to change the font down by 5px in this one and ofcourse, change the width down to 600px:

.navbar{

width: 450px;

height: 15px;

}

.navbar a {

padding-left: 12px;

padding-bottom: 20px;

padding-right: 12px;

min-width: 600px;

}

 And finally, 480px. All the nav buttons are squished down to a minimal size, that can be viewed on the smallest screens. After this, if the screen becomes any smaller, no change will happen and text will start disappearing off the screen:


.navbar{
top: 100px;
width: 300px;
height: 33px;
text-align: center;
padding-left: 0px;
}

.navbar a {
font-size: 25px;
padding-left: 12px;
padding-bottom: 20px;
padding-right: 12px;
min-width: 600px;
}

I have also made all the content on the Home Page, More Info Page and the Alternatives Page. The plan of the code is more or less the same as how I made the nav bar fit (Other than just removing floats from previously floated parts of the site), just shrinking the width size down is sometimes enough to have the site responsive. 

Homepage in full screen:

Homepage in 980px:

Homepage in 650px:

Homepage in 480px:

More Info page Full:

More Info page 980px:

More Info page 650px:

More Info page 480px:

With the Alternative page, the only problem I ran into was that the glow around the buttons would completely mess up the 480px part, so I had to remove it :( 

Alternative Page Full:

Alternative Page 980px:

Alternative Page 650px:

Alternative Page 480px: