For these past few weeks I have been working on getting the web page for the Kukui Cup news section to be responsive. Basically, trying to get the content on the website to be organized based on the browser window size.
The challenge for these past few weeks was trying to get the images that represented menu selection along with the header (black background behind the pictures) to move into position as the browser window gets smaller or bigger. Here’s an example of the menu selection
To get things started I went back to the basics to learn how to resize image with a CSS file so I can understand where to edit in the actual code. I happen to come across this website http://haslayout.net/css-tuts/CSS-Proportional-Image-Scale which taught me that resizing the image is related to the pixels.
Besides learning the basics I also had to use a framework so that everything would be organized as the browser resizes. I have come across this framework call Skeleton http://www.getskeleton.com/. I find this framework to work quite well with the existing code. Only problem right now is to understand how to get things to a certain column or size and so forth with this framework.
For now I will continue to play around and see what ways to have the images move along with the header while the browser window resizes. Also, experiment with the code to see if can put things in more columns so it will organized evenly.
No comments:
Post a Comment