Css responsive design for existing simple single column web site
- or -
Post a project like this3582
$$
- Posted:
- Proposals: 6
- Remote
- #506965
- Awarded
I can fix your website! Full time freelance web developer specialising in writing code & Wordpress development.
Imdina
Wordpress/Php/PSD to HTML / Web Design / Responsive Design / Open cart / Joomla / Ecommerce/ Woo-commerce
Chandigarh
73242362962363285488630501588503606
Description
Experience Level: Intermediate
General information for the website: Responsive design update
Kind of development: Customization of existing website
Description of requirements/features: J
Overview
Update the styling so that the site is responsive for smaller mobile phone and tablet screen sizes following google general recommendations of screen sizes to support. No need to javascript and or anything fancy– just a simple stylesheet update to handle smaller screen sizes properly, moving inline styling to the stylesheet where necessary. I think it can be just a fixed 3 screen width option sytlesheet simple update to handle tablets and then phones – i.e. if below this screen width do this, if below that screen width do that. Should be quite quick for someone good with responsive design.
Here’s the specific requirements:
Ensure the site works correctly in http://mattkersley.com/responsive/ or similar.
Website:
http://www.disco-party.com
styles.css
All styles are in here.
No cryptic class names please if new classes need to be added – I prefer to use names that describe what things are rather than “aa”, “ab” etc. Keep it nicely organised so it’s not painful for me to update in the future.
Top bar (header.php)
For smaller screen widths:
If logo will be too wide for screen it reduces in size if necessary, filling screen width with a small margin each side.
“Discos with a difference” disappears when there is not enough space for it
“Surrey, Kent & Sussex Party Disco Hire” reduces in size and ends up under the logo centered. Allow for longer text strings shown on some venue pages (this strapline changes dependant on the page)
Menu links change to be shown in 2 columns when needed on a small screen to keep them all shown, ensuring they line up nicely, look good and are easy to use on a touchscreen (enough space around each). Reduce font size if necessary to make it look right.
Home (Index.php)
"You kept everyone on the dance floor all night long!" reduces in size when needed.
The row of 4 images – remove right end ones to leave just 3 then 2 for smaller screens, with one above the other when just 2 and on a phone screen.
Bottom 5 buttons - stack vertically and centre when necessary
FAQ (surrey_mobile_disco_faq.php)
2 photos at top – right side one removed when it won’t fit any more. Left side one reduced in size if needed.
Photos (surrey_mobile_dj.php)
When necessary reduce size of videos and photos to fit small screen widths.
Text between photos – reduce size if necessary so it looks right on smaller screens.
Comments (your_comments.php)
Text – reduce size if necessary so it looks right on smaller screens.
Party Tips (top_10_tips_for_a_great_disco_party.php)
If necessary to make it look right reduce the size of the images.
Venues (venue_counties.php)
4 buttons – change to 1 column centered
Venues – County selected (venue_towns.php)
4 columns of towns – reduce number of columns to 2 and then 1 column for smaller screen widths.
Venues – Town selected (venues.php)
Availability check box moves under google map
Reduce width of google boxes and availability form when screen width is small, so they fit and fill width.
Venues – Venue selected (venue.php)
Availability check box moves under google streetview.
Reduce width of google boxes and availability form when screen width is small, so they fit and fill width.
Contact (kent_mobile_disco_contact.php)
Remove google map when it won’t fit.
Reduce width of availability form when screen width is small, so it fits and fills width.
Other
Headings and body text - reduce size if necessary so it looks right on smaller screens.
The site also has wordpress in a sub directory – ignore this as its already responsive.
Extra notes:
Kind of development: Customization of existing website
Description of requirements/features: J
Overview
Update the styling so that the site is responsive for smaller mobile phone and tablet screen sizes following google general recommendations of screen sizes to support. No need to javascript and or anything fancy– just a simple stylesheet update to handle smaller screen sizes properly, moving inline styling to the stylesheet where necessary. I think it can be just a fixed 3 screen width option sytlesheet simple update to handle tablets and then phones – i.e. if below this screen width do this, if below that screen width do that. Should be quite quick for someone good with responsive design.
Here’s the specific requirements:
Ensure the site works correctly in http://mattkersley.com/responsive/ or similar.
Website:
http://www.disco-party.com
styles.css
All styles are in here.
No cryptic class names please if new classes need to be added – I prefer to use names that describe what things are rather than “aa”, “ab” etc. Keep it nicely organised so it’s not painful for me to update in the future.
Top bar (header.php)
For smaller screen widths:
If logo will be too wide for screen it reduces in size if necessary, filling screen width with a small margin each side.
“Discos with a difference” disappears when there is not enough space for it
“Surrey, Kent & Sussex Party Disco Hire” reduces in size and ends up under the logo centered. Allow for longer text strings shown on some venue pages (this strapline changes dependant on the page)
Menu links change to be shown in 2 columns when needed on a small screen to keep them all shown, ensuring they line up nicely, look good and are easy to use on a touchscreen (enough space around each). Reduce font size if necessary to make it look right.
Home (Index.php)
"You kept everyone on the dance floor all night long!" reduces in size when needed.
The row of 4 images – remove right end ones to leave just 3 then 2 for smaller screens, with one above the other when just 2 and on a phone screen.
Bottom 5 buttons - stack vertically and centre when necessary
FAQ (surrey_mobile_disco_faq.php)
2 photos at top – right side one removed when it won’t fit any more. Left side one reduced in size if needed.
Photos (surrey_mobile_dj.php)
When necessary reduce size of videos and photos to fit small screen widths.
Text between photos – reduce size if necessary so it looks right on smaller screens.
Comments (your_comments.php)
Text – reduce size if necessary so it looks right on smaller screens.
Party Tips (top_10_tips_for_a_great_disco_party.php)
If necessary to make it look right reduce the size of the images.
Venues (venue_counties.php)
4 buttons – change to 1 column centered
Venues – County selected (venue_towns.php)
4 columns of towns – reduce number of columns to 2 and then 1 column for smaller screen widths.
Venues – Town selected (venues.php)
Availability check box moves under google map
Reduce width of google boxes and availability form when screen width is small, so they fit and fill width.
Venues – Venue selected (venue.php)
Availability check box moves under google streetview.
Reduce width of google boxes and availability form when screen width is small, so they fit and fill width.
Contact (kent_mobile_disco_contact.php)
Remove google map when it won’t fit.
Reduce width of availability form when screen width is small, so it fits and fills width.
Other
Headings and body text - reduce size if necessary so it looks right on smaller screens.
The site also has wordpress in a sub directory – ignore this as its already responsive.
Extra notes:
Adam P.
100% (1)Projects Completed
2
Freelancers worked with
2
Projects awarded
100%
Last project
24 Jun 2014
United Kingdom
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies