HTML/CSS fixes needed for a mostly-finished web design
- or -
Post a project like this1294
£65(approx. $81)
- Posted:
- Proposals: 21
- Remote
- #3008802
- Awarded
2601377232422549581444956561495511549449934783965463952041926113545564277369982692
Description
Experience Level: Entry
We are developing an ecommerce web site, https://koshercity.co/, and the front-end designer has left the project without finishing it. We need someone to tidy up a few small issues with the HTML/CSS. Although this list is long, I think most of these are very small issues.
I have attached an image with some examples. These will be referenced below.
General
*) At certain browser widths, the nav bar looks poor. See the attached image for an example.
*) When you are on a desktop, and you hover over a category, there is a space above the first section name on the submenu that pops out. This needs removing. See the attached image
*) The categories menu has different icons for desktop and mobile views. The + signs used on the mobile view are much clearer, so please use these on the desktop view as well.
*) If you look at the categories menu on an iPad in landscape view (and probably any other mobile device at similar resolution and orientation), the icons don't line up. See the attached image
Products display
The list of issues here looks like a lot more than it actually is, as most of these issues all really one thing, and can probably be fixed in one go, so please don't be put off by the length of this part.
*) Please take a look at the Fruit page (https://koshercity.co/Shop/Product?section=Fruit), as this will help you understand this issue. Many items can be sold by weight or quantity, eg you might want 1Kg of apples, or you might want 10 apples. These are known as "scale link" products. These have a pair of radio buttons to allow you to choose how you want to order.
The quantity (+/-) buttons don't line up with 'Add to basket' for non-scale link products. They also don't line up for scale link products when "Quantity" is selected. See the first entry on that page "Apples Bramley" and also the attached image. If you choose "Weight" then they do line up (try it and you'll see), so you need to make sure to fix it for Quantity without breaking it for Weight.
*) Our images are not all the same resolution, and the current design doesn't account for this. If you type "pepsi" (without the quotes) in the search box at the top of the page (https://koshercity.co/Shop/Product?currentFilter=pepsi), you can see that the small size of the image for "Pepsi Max" makes the product name special offer line etc too high, and not in line with the other products. On the second line, you see the opposite with "Pepsi 500ml" where the image is too tall. The design needs fixing so that the images are displayed at a fixed size, irrespective of how big the actual image files are.
*) The display doesn't handle long product names well, as they break onto a second line, causing the rest of the product details to be out of line.
*) Similarly, products on special offer have the red offer line, which causes the rest of the product display to be out of line. For example, search for "shwartz" and look at the first line. The name of the first product (Shwartz Grated Cheese 250g) fits on one line, but the other three break onto a second line, pushing the other details down.
*) On small devices the page buttons above and below the products are shown as just the "Next" and "Previous" instead of all the other buttons which you see on a desktop. See the attached image
*) Add a few items to your troley, say 4 or 5. Click the trolley icon at the top right of the window, and in the popup on small devices (eg a phone), when there are more than 2 or 3 items it is unclear that you need to scroll as there is a max-height set to ensure that the total is always shown. On a desktop, a scrollbar is shown, but on a mobile device it isn't, so you don't know to scroll.
*) When you add something to your basket, the "Added to basket" notice should not move the rest of the products display upwards, instead it should appear over the display before fading.
Special offers page (https://koshercity.co/Shop/SpecialOffers)
*) Needs styling to look like the products pages, but accounting for the sections around each special offer. It needs to account for scale items vs non-scale items, long product names, etc as above. You can probably reuse the design for the products page, and just add the sections around the products.
*) Needs to look good on mobile devices as well
Log in (https://koshercity.co/Identity/Account/Login)
*) On mobile devices, the "Lost your password," "Remember me", "Log in" button and "Register" links need arranging. At the moment, they are a bit random. Please can you arrange them so they look better.
I have attached an image with some examples. These will be referenced below.
General
*) At certain browser widths, the nav bar looks poor. See the attached image for an example.
*) When you are on a desktop, and you hover over a category, there is a space above the first section name on the submenu that pops out. This needs removing. See the attached image
*) The categories menu has different icons for desktop and mobile views. The + signs used on the mobile view are much clearer, so please use these on the desktop view as well.
*) If you look at the categories menu on an iPad in landscape view (and probably any other mobile device at similar resolution and orientation), the icons don't line up. See the attached image
Products display
The list of issues here looks like a lot more than it actually is, as most of these issues all really one thing, and can probably be fixed in one go, so please don't be put off by the length of this part.
*) Please take a look at the Fruit page (https://koshercity.co/Shop/Product?section=Fruit), as this will help you understand this issue. Many items can be sold by weight or quantity, eg you might want 1Kg of apples, or you might want 10 apples. These are known as "scale link" products. These have a pair of radio buttons to allow you to choose how you want to order.
The quantity (+/-) buttons don't line up with 'Add to basket' for non-scale link products. They also don't line up for scale link products when "Quantity" is selected. See the first entry on that page "Apples Bramley" and also the attached image. If you choose "Weight" then they do line up (try it and you'll see), so you need to make sure to fix it for Quantity without breaking it for Weight.
*) Our images are not all the same resolution, and the current design doesn't account for this. If you type "pepsi" (without the quotes) in the search box at the top of the page (https://koshercity.co/Shop/Product?currentFilter=pepsi), you can see that the small size of the image for "Pepsi Max" makes the product name special offer line etc too high, and not in line with the other products. On the second line, you see the opposite with "Pepsi 500ml" where the image is too tall. The design needs fixing so that the images are displayed at a fixed size, irrespective of how big the actual image files are.
*) The display doesn't handle long product names well, as they break onto a second line, causing the rest of the product details to be out of line.
*) Similarly, products on special offer have the red offer line, which causes the rest of the product display to be out of line. For example, search for "shwartz" and look at the first line. The name of the first product (Shwartz Grated Cheese 250g) fits on one line, but the other three break onto a second line, pushing the other details down.
*) On small devices the page buttons above and below the products are shown as just the "Next" and "Previous" instead of all the other buttons which you see on a desktop. See the attached image
*) Add a few items to your troley, say 4 or 5. Click the trolley icon at the top right of the window, and in the popup on small devices (eg a phone), when there are more than 2 or 3 items it is unclear that you need to scroll as there is a max-height set to ensure that the total is always shown. On a desktop, a scrollbar is shown, but on a mobile device it isn't, so you don't know to scroll.
*) When you add something to your basket, the "Added to basket" notice should not move the rest of the products display upwards, instead it should appear over the display before fading.
Special offers page (https://koshercity.co/Shop/SpecialOffers)
*) Needs styling to look like the products pages, but accounting for the sections around each special offer. It needs to account for scale items vs non-scale items, long product names, etc as above. You can probably reuse the design for the products page, and just add the sections around the products.
*) Needs to look good on mobile devices as well
Log in (https://koshercity.co/Identity/Account/Login)
*) On mobile devices, the "Lost your password," "Remember me", "Log in" button and "Register" links need arranging. At the moment, they are a bit random. Please can you arrange them so they look better.
Yossu B.
0% (0)Projects Completed
-
Freelancers worked with
-
Projects awarded
100%
Last project
9 May 2024
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