Product Landing Page V3.0 - Jewellery Page

Code Feedback
44

Oh I see. Thanks a lot!

45

Hey I tried the codepen where you told me it works on my phone and the problems you showed me are still here for some reason can you tell me if it does it on your phone? I donā€™t get itā€¦ lol

46

I think it is because of chrome.

47

looks good on my phone

1 Like
48

Ok Iā€™m confused I tried again and it is messed on my phone (chrome), on chrome (PC) and firefox (PC)ā€¦

49

I am testing this page


getting the space again

1 Like
50

Alright Iā€™ll make another codepen and replace the link again weā€™ll see I think I made a mistake on VS Code and fā€™ed it up.

51

Ok so, here is an image Chrome (left) on PC vs Firefox (right) on PC:

chromefirefox
chromefirefox1886Ɨ940 449 KB

I found what was wrecking me up. I just had to add right: 0; on #nav-ul for chrome for some reasonā€¦

Do you know why?

Btw, I used this codePen: https://codepen.io/Tech_CA_Bro/pen/JxYOxN

-Tech
Thanks again for all the help! <3

1 Like
52

no problem man
Its a great community to be part of

1 Like
53

I agree very much man:)

54

So the reason the right: 0 had to be a thing on your #nav-ul was because of the fact that itā€™s absolutely positioned. By the MDN:

  • An absolutely positioned element is an element whose computed position value is absolute or fixed . The top , right , bottom , and left properties specify offsets from the edges of the elementā€™s containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset.

The key bit there is ā€œā€¦specify offsets from the edges of the elementā€™s containing block.ā€ So, because the #nav-bar is right-aligned and 25% width, then that is the containing block for this one. Without specifying a right value, it was assuming a left:0 within that #nav-bar element.

1 Like
55

Ohhhhh thanks a lot. Everything is clear but one thing, why did it need the line for chrome and firefox didnā€™t need it. I guess the default for firefox isnā€™t left: 0; but right: 0; ?

-Tech.

56

I suspect itā€™s a matter of what the different browsers default to when no top/left are specified for absolutely positioned elements.

It seems this has been the subject of discussion, I googled differences between chrome and firefox rendering absolutely positioned elements, and there were a LOT of hits. Notably this one from MDN.

Edit: In rereading that one, while it talks about the stacking order, it doesnā€™t really go into the differences per se. But, based on many many conversations over the years, when no positioning values (left/top/right/bottom) are provided, they seem to handle it differently.

57

Sweet. Shouldā€™ve of thought of googling this. Didnā€™t think that would pay off XD! Thanks so much!

58

Hey Tech, nice work! This is so much better :stuck_out_tongue:

However, the item product-* seems off a little bit. Maybe you should find a way to make the image and texts of them aligned by each other somehow. I mean they should appear in the same horizontal positions.

1 Like
59

Hey @tkhquang. Thanks a lot for everything you did for me! :slight_smile: And yes you are right it is off a little so Iā€™ll think of fixing it :). Iā€™ve been focusing on web design for a week now and school also I lost a bit my motivation but I still have my CSS to pratice a lot :).

1 Like