Peruttu

Rework CSS for responsive columns

This job is to revise existing CSS for responsive columns of a section of a web page.

The basic layout is already correct, but it gets messy due to overflow at some widths.

The section is hosted as a template at [login to view URL]

You can copy that to your own Codepen, or move it to your own system.

However, you must show me your result at Codepen for approval before payment.

For the top area of the page, you will have to

- change the width breakpoints to those listed below

- remove the screen orientation media query from line 216 of the CSS

- add containers for the text so that it stacks and wraps exactly as shown in the mockup images.

- improve the spacing and alignment of the rows and columns, so that they transition cleanly at breakpoints and appear proper at any width.

- preserve all the scaling, colors, hovers, fonts, etc.

- do not change any CSS above the section marked /* contact code start */.

- remove any extraneous or unnecessary CSS code

- improve specificity of CSS rules so that all !important properties may be removed. (You must acknowledge this requirement in your bid to be accepted.)

Do not use CSS preprocessors, Javascript, any external scripts, frameworks or resources such as Bootstrap, etc.

You do not need to ensure compatibility with IE, Opera, or other minor browsers.

The following are the desired width breakpoints and the description.

(Also refer to the mockup images attached, but do not use them as a pixel-accurate reference since browser renderings will differ.)

max 400px

1st heading "Contacts", one column icon, text unstacked

2nd heading "Documents", same

max 570px

two headings, two columns icon, text stacked

max 900px

two headings, two columns icon, text unstacked

max 1700px

two headings, four columns icon, text stacked

max 1920px

two headings, four columns icon, text unstacked

Above 1920px, the elements' scaling and positioning should be locked, while white space on sides expands to keep the arrangement [login to view URL] Logos area at the bottom of the page is also mostly working, as follows:

< 720px

two rows of logos

> 720px

one row of logos

However, you must ensure the logos are spaced evenly across the rows, at every width up to 1920px, where their scale and positions should be locked, while white space on sides expands to keep the arrangement centered.

Taidot: CSS, CSS3, HTML, HTML5, verkkosivujen suunnittelu

Näytä lisää: css responsive template, html5 css responsive, css responsive html5 wordpress, responsive div css, css columns, responsive grid layout examples, css columns responsive, 2 column responsive layout, css grid, responsive grid css, 3 column responsive layout, css, html, website design, html5, html css responsive template, convert css responsive web design, convert css responsive template, css responsive photo grid, css responsive image slider code

Tietoa työnantajasta:
( 10 arvostelua ) New Westminster, Canada

Projektin tunnus: #17080547

Myönnetty käyttäjälle:

reliabletechno5

Hi, ***I can do this work within few hours & I am able to start this project "RIGHT AWAY". I am proficient in Photoshop designing, JQuery, Javascript, Bootstrap, HTML, CSS, LESS/SASS, Wordpress, Woo-Commerce & Jooml Lisää

$15 CAD 0 päivässä
(29 Arvostelua)
4.9

19 freelanceria on tarjonnut keskimäärin %project_bid_stats_avg_sub_26% %project_currencyDetails_sign_sub_27% tähän työhön

WebXcellance

Hello there, As per my understanding you need to revise existing CSS for responsive columns of a section of a web page. add containers for the text so that it stacks and wraps exactly as shown in the mockup images, c Lisää

$100 CAD 1 päivässä
(143 arvostelua)
6.8
$40 CAD 1 päivässä
(87 arvostelua)
6.3
Dckumawat

Hello, I have read your description. I can do this as per your requirement details. Rework CSS for responsive columns I have 8 years of experience in CSS, CSS3, HTML, HTML5, Website Design Please drop a Lisää

$25 CAD 1 päivässä
(66 arvostelua)
5.5
rezasardarzadeh

Having 10 years of exprience in web developement and 5 stars rating on all previous projects(100% completion ratio) i am here to give you the best quality job and also best support and on time project.

$30 CAD 1 päivässä
(6 arvostelua)
4.4
shaheen23

Hiii..... I am shaheen and I have great experience in design , photoshop ,Illustrator , Infographics and so on.. Greetings of project you want a Rework CSS for responsive columns Kindly talk to us so that w Lisää

$10 CAD 1 päivässä
(22 arvostelua)
4.6
hiteshdvlpr8847

Greetings!!! I can start immediately I'm a professional Web/graphic designer with more than 5 Years experience in Web/Graphics Designing, Web2.0 website designing, HTML/CSS as per W3C standards under my belt Lisää

$16 CAD 1 päivässä
(28 arvostelua)
4.4
markninja

Hello, I am an expert CSS developer who can rewrite the css to make your web page responsive. Some of the responsive works from my portfolio: [login to view URL] [login to view URL] http Lisää

$35 CAD 1 päivässä
(17 arvostelua)
4.4
pransore

Hello, I have checked your job description and I am okay to get this done for you.I have 5 year of experience in web designing and development. I've sound knowledge of WordPress/HTML/Bootstrap/CSS/php/SQL and have de Lisää

$35 CAD 1 päivässä
(14 arvostelua)
3.8
merakinfowayltd

Hello There, At First, Accept Greetings From Merak infoway ! Thanks for providing us the opportunity to bid on your project, I have been through your Job description completely and I would like to share my unde Lisää

$25 CAD 1 päivässä
(14 arvostelua)
4.1
shafayat1812

Hi there, Consider it as done. I have read your full requirement and pictures. Able to fix all css issues. Ready to start right now. Waiting for your reply. Thanks, Shafayat

$20 CAD 1 päivässä
(6 arvostelua)
3.3
$25 CAD 1 päivässä
(22 arvostelua)
3.9
Jasmeen2017

Hello, We are team of Certified Photoshop CS6 Expert, Illustrator and After Effects "A Picture is worth a thousand words" In the today's visual world, arresting imagery is required to grab attention. Consumer Lisää

$25 CAD 1 päivässä
(4 arvostelua)
3.2
$25 CAD 1 päivässä
(6 arvostelua)
3.3
$10 CAD 1 päivässä
(6 arvostelua)
2.8
alex042988

hello I read your job posting and very interested. as a senior front end developer, I am very confident about responsive design. Thanks

$25 CAD 1 päivässä
(7 arvostelua)
2.9
Firnazali

i have experience in the responsive plateform so its easy for me to design the responsive website .l

$25 CAD 1 päivässä
(1 arvostelu)
2.0
samsmithworks

I have read about your (Rework CSS for responsive columns) project details and interested to work on it. I will provide you Quick draft after awarding. I am here for long-term work relationship and will give 101% best Lisää

$25 CAD 1 päivässä
(2 arvostelua)
1.9
technojob

we are a software developer . last 7 years we are ready many software for my customers . we are ready for your work . kindly open my project link ---[login to view URL],[login to view URL], Lisää

$25 CAD 1 päivässä
(1 arvostelu)
0.0