When I created my website, I decided to create the desktop-sized website first before making it responsive. Overall, this was a weakness on my part because it required me to undo some of the work that I had done (see the post on ‘float: left’).
Getting Started
The first step to achieving a responsive design. This was done by setting the viewport using the code:
meta name=”viewport” content=”width=device-width, initial-scale=1.0″
Editing Image/Video
From there I set about making my images and videos responsive. To do this I altered image sizes in CSS from (n)px to 100%. I then altered the percentage of specific images to match the look that I wanted to give to my website. This involved looking at my website in different viewing sizes and altering the percentage until the images would look good across multiple devices.
Due to the fact that some of my images/videos have a grid format, I also had to change the margins and padding to a percentage. This proved to be time-consuming as I repeatedly had to edit the code until I found a percentage that wouldn’t ruin the placement of the images.
My navigation bar sits above the header video so it isn’t recognised by the code as being there. To avoid the nav bar sitting over the top of the video, I had previously used a top margin to place it where I wanted it. However, this wouldn’t work well when used on different devices because it would leave a large empty space. To combat this issue, I used media queries to alter the margin size when the browser size changed.
Responsive Navigation
One of the trickiest parts of making my website responsive was the navigation bar. It was imperative that this worked correctly because it is an important component of the website. A responsive nav bar was achieved using the combined efforts of CSS and Javascript.
The javascript code demonstrated below allowed the code to add or remove the responsive class:
function myFunction() {
var x = document.getElementById(“mycontainer1”);
if (x.className === “container1”) {
x.className += ” responsive”;
} else {
x.className = “container1”;
}
}
From there, the CSS defined how the navigation should look and media queries were used to define the look when the browser size was reduced:
.container1 .icon { display: none; }
@media screen and (max-width: 800px) { .container1 a:not(:first-child) {display: none;} .container1 a.icon { float: right; display: block; }
@media screen and (max-width: 800px) { .container1.responsive {position: relative;} .container1.responsive a.icon { position: absolute; right: 0; top: 0; }
.container1.responsive a { float: none; display: block; text-align: left; }}}
Lipstick & Life 