Hey everyone, this is my first solution and any feedback would be appreciated. if the preview looks weird to you please click preview site and if it still looks that way please let me know, because it's not what I'm seeing in my browser. Thank you.
Hello! Nice work on your first challenge! It looks good.
For the responsive a method used by the majority are media queries, and some say that doing a mobile first approach might be easier when transitioning from mobile design to desktop.
For the background I don't know if the X Y axis has something to do, but for your solution I just removed the background-size: cover in the body, because this property sometimes stretch the image, you could adjust it somehow if you use it with background-position.
Another thing, is that you can see that the info or bottom part collides with the image, I would add in the card class flex-flow: column;, align-items: center and justify-content: space-between. Remove the position absolute on the image, and the top in the info class.
That's my feedback of what I would do, there could be better ways, If you got any questions or something didn't work you can ask me again.
I have only one problem in the js code, I don't know why I have to click twice on the "shorten it" button for the information to appear. PLEASE FEEDBACK!
Hola, como estas!
The problem with that, I think it is because of this: On this part $form.addEventListener when you do
validarForm();
guardarLS();
In validarForm() it might take a little time to fetch the data and push it in 'enlaces' in the guardarEnlace() function, so when guardarLS() fires you see that the first click on "shorten it" in the localStorage 'enlaces' is still empty [] so in mostrarDatos() when it try to get the data it wont get it at first. But after validarForm() finish it will push the link in 'enlaces', so if you click "shorten it" with nothing in the input a second time after the first one, it will load the information.
So what it is really happening, its that every time you click the "shorten it", the information gets delayed.
For solving this problem I would put guardarLS() inside validarForm() or in guardarEnlace() i think.
Why is the background image not showing on live site but on my local site is showing? Any other recommendations on html and css best practices will be highly appreciated.
Hello! For the background image, it cant find the image source. In the background-image: url("../images/pattern-background-mobile.svg"); you forgot a dot(.) in the beginning.
I could use a good example of that background radial for the winner. Thanks
Hello! Nice solution. I just finished this solution recently.
For the radial background on the winner, I used on my solution:
box-shadow: 0 0 0 50px rgba(255,255,255,.05), 0 0 0 90px rgba(255,255,255,.03), 0 0 0 150px rgba(255,255,255, .01);
Where the rgba worked fine, with a white background and the last var(alpha) the opacity.
This was a fun challenge to do.
But I couldn't figure out how to add that "error SVG" while doing the form validation. Can anyone point me in the right direction?
What I did in mine, was adding in the input a:
background: url(../images/icon-error.svg) 95% center no-repeat;
There are probably better ways to do it.
Was going to separate the scss in modules.
Could someone look into my site and tell me if it looks like the design comparison? On my laptop it looks normal even when I compare the different resolutions on the developer tools.
Hi guys!
First of all I'm having a problem centering the main div vertical. I tried "align-items: center" or "justify-content: center" but it does not work. I tried even to put a margin but nothing happens.
Second, I am having scrollbars on my bottom circle. Don't know why and how to solve this.
The Victor's image is not in center. I placed it with "position: absolute" and it's stuck like I can't even give it a width because it's not working.
Please help I want to make it perfect. Thanks!
Hi!, Great work on completing it. For the first question, you tried "align-items: center" or "justify-content: center", but if you open the developer tools you will see that the main class doesn't have the needed height or the space for it, you could add a min-height: 100vh or height for a quick solution. For the second, I had the same problem, for it I added an overflow: hidden in the body.
