ayaamr / uicourse Goto Github PK

You need to add padding to the right and left edges of the input field so that the entered text isn't adherent to the box

Why are you using grid__col-1, grid__col-2, grid__col-3, grid__col-4 ? none of them is unique and you aren't using them for styling. A class like col would be enough.

The grid itself has a problem:

.grid div {
    float: left;
    width: 295px;
}

• You are using a fixed value ... better change it to 25%
• You are targeting all the divs inside the .grid. The card has divs inside it so the same style is applied to them as well. The selector must be more specific, something like .grid > div would prevent that problem
• The name is very generic. Better use a modifier so the grid's class be like <div class="grid grid--4-cols"> so that in the future if you have a 2 or 3 columns grid you can easily introduce that :)

The search isn't clickable cause you are setting the width of the link to 0. Don't worry we didn't cover that yet. Keep that issue open till we discuss image replacement techniques

On the highlight section, you are using a button for the check new arrivals. Buttons are supposed to submit forms or triggering actions. This is a link that look like a button nothing more :)

I noticed that on the select elements. You are missing a property of the the vertical position. You are only using right.

The proper declaration should be:

background: #color-if-exist url(..path-to-file) horizontal-position vertical-position repetition;

Example

background: #fff url(../images/image.png) 100% 50% no-repeat;

This way horizontally the image will be on the right(100%) and vertically centered(50%)

One thing also I want you to do is to stop using the keywords and use numerical values instead

We discussed that over the chat :)

Also I see that you are using this : https://github.com/AyaAmr/UICourse/blob/master/Assignments/styles/main.css#L239-L244

Why not:

.col { padding-left: 15px; } 
.col:first-child { padding-left: 0; }

Why are you using container class on every block?

You can simply use a div called .container and wrap everything on the page inside it. Better than wrapping the header and the separator and the main content ... etc

Why using input type="submit" when you can use button ?

This will simply make you able to target it with CSS using button { ... }

I know we didn't discuss it yet. But keep that issue open till we discuss vertical aligning so that you change it later on to use CSS