Dibril Nzangmene• 70
@G87git
Submitted
1.The difficulty is faced when at a level where the qr-code-image wasn't loading in the live site...Damn
2.I am really sure if the qr-code-image will load! Don't know why
3.Nope! Thanks ✌️
chucksterv
@chucksterv
All comments
- chucksterv• 180
@chucksterv
Posted
Hey mate change your image src from
src="/qr-code-component-main/images/image-qr-code.png"to
src="./images/image-qr-code.png"Your src points to the root of your file structure. While it works on your machine, netlify probably isn't considering that to be the root of your build. That's just a guess though, you'd be better off doing your own research about the reasoning.
In general it's always a better practice to point to things relative to the current file in most cases. You can read more about file paths here https://www.w3schools.com/html/html_filepaths.asp
0 - Esteban Salazar• 30
@IExFire
Submitted
Unfortunately I was not able to position the item next to "Add to cart" (in button part) I tried with position: absolute but once I change screen size... everything smashes xD
chucksterv• 180@chucksterv
Posted
Hey mate, good job on completing the challenge. Have a look at CSS pseudo elements. ::before and ::after specifically. This lets you add content before or after a specified element which is really handy for a problem like this. In my case, I added this using a ::before element on the button I believe.
Happy coding!
Marked as helpful
0 - Faith• 420
@fnwork
Submitted
I'm open to any suggestion :)
chucksterv• 180@chucksterv
Posted
Hey mate, your code looks good. Congratulations on completing the challenge.
A couple of things I would do differently.
-
As far as I know, floats are mostly not in use unless absolutely necessary. I did a quick search and it seems the only use case for it is when you need text to wrap around something which isn't a requirement here. For the image I would give it a
margin-left: autoto align it to the right. -
I would consider using a grid instead of flex for positioning. While there is absolutely nothing wrong with using flex for this use case, I feel Grid would be a better way to approach it specially when it comes to responsive design.
Hope that helps! Happy Coding!
0 -
@OpenWorldProjectOWP
Submitted
I found that the hardest part of this challenge was deciding what the most efficient way to write my code was. This is the first "challenge" I've done and that made it intimidating and I found myself stressing over making sure my code could be understood (which is a good thing). I have a lot of uncertainties with my code i.e. what is the better way of formatting my CSS? I used flex to do the formatting, but did that maybe make my code messy? What about my HTML? Is nesting that many divs even necessary for what I was trying to accomplish? I'm self-taught so finer details of coding are lost in the teachings and I'd appreciate any and all feedback anyone takes the time to give me about this first try. Please go over the README.md in the repo for more info on my process.
chucksterv• 180@chucksterv
Posted
Hey mate! your solution looks good and congrats on completing it. Building on @abdullah43577's response. Semantic elements are the better practice when writing HTML over divs. It makes the code easier to read and it provides context to browsers and search engines. Here are some resources that might help.
https://developer.mozilla.org/en-US/docs/Glossary/Semantics# https://www.w3schools.com/html/html5_semantic_elements.asp
Happy Coding!
Marked as helpful
2- Hafsat Nasidi• 60
@hafsatun2020
Submitted
I can make the view (eye icon) active state small. tried my best but to no avail.
chucksterv• 180@chucksterv
Posted
Hey mate. Good job on completing the challenge. I just finished it today myself. My approach was a little different.
- Instead of trying to manipulate the image, I created a section to contain the eye image.
- I styled that according to the specifications, used a position absolute on there and a position relative on the parent element.
- Then it was just manipulating the opacity on a hover.
Hopefully that helps! There might be a solution to get it working with the changing the image content itself like you've tried but this might be a good alternate solution if not.
Happy Coding!
1
