@azhar1038
Posted
Hi Elaine, When I tried your solution in mobile view, at first it looked okay but then contents got pushed to left side then got centered and then again back to left. I believe this is because of those fixed size pseudo elements.
Also, instead of using pseudo elements, shouldn't it be better to use background-image on body?
Marked as helpful
@elaineleung
Posted
@azhar1038 Hi Md, thanks for checking out my work! I did this project a while ago and back then had a different approach to how I worked on these challenges; I'd only focused on just the two 375px and 1440px views in the challenge and not really care about everything else in between, which is why I've been going back to my old solutions and updating them. Also my CSS skills then were really not as good.
About the pseudo-elements, I can't say I remember what my reasoning back then was 😅 but it might be because there are two images that need to be positioned, not just one. I think the issue is more with how I had positioned them more than using them because I used them in another project and they didn't shift.
Anyway, this is one challenge that I've been meaning to get around to updating, so thanks for alerting me!
@elaineleung
Posted
@azhar1038 I just updated my solution; would appreciate it if you could take a look and see whether the issue you mentioned is still there. Thanks again!
@azhar1038
Posted
@elaineleung Awesome! Working perfectly, especially the changes on Media queries.
But I still don't understand the benefit of using pseudo element over background image:
background-position: top left, bottom right;
background-image: url(images/bg-pattern-top-desktop.svg),
url(images/bg-pattern-bottom-desktop.svg);
background-repeat: no-repeat;
Sorry for being so picky 😅 Since I am just starting with frontend, want to know the correct way of doing things by checking how others are doing it.
@elaineleung
Posted
@azhar1038 No worries, this is a really good question! 🙂 Honestly there's no difference in this case because the position: relative parent for both cases is body selector and also I changed the fixed points to the same ones you have, so now I'm just taking the corners like you.
I tried to remember my rationale for my choices, and I think that when I did this challenge, it was right after another challenge that also involved more precise positioning of the background elements where I used pseudo elements, so I just did the same thing because I wanted the top SVG in a very exact position.
Anyway I kept the pseudo elements at first since that's what I had in my solution and I was more focused on fixing the other parts, but I ended up taking your code since the less code the better, so thank you!
