Hi FCC! =)
I’ve just finished my Portfolio Page Challenge! , but I’m facing three big problems here:
First, it appears that the design ins’t fully responsive. I’m attaching screenshots from my smartphone (works fine both in Chrome and Firefox) and a friend’s iPhone on Safari (seems like it isn’t responding well):
This is the one from my smartphone (works well in both Chrome and Firefox)
Then, I’m finding some troubles with the .hover function:
On Safari and Chrome browser, I’ve got no problem with the .hover function that colors the icons when you pass the mouse through them, but Mozilla shows them grey always and doesn’t respond to .hover function.
The other problem I’ve got is again with the .hover function:
It doesn’t make any sense to establish a .hover function in smartphones as small devices are touchscreens. Is there a way to establish every icon as .active so as to show them colored full time in smartphones, and maintain the .hover function in large screens?
I would like to point out that I’m 101% new to code and my knowledge in JavaScript is zero, so… Any kind of CSS/HTML formatting? Because I don’t want to Copy&Paste a code that haven’t been written by me: I feel like that’s not really helping to learn…
Thank you very much guys for your help, support and feedback. I’m in love with this community! =)
First for browser issues you can specifically mention the browser in your CSS because browsers act differently for instance if you have an issue with your border just in Mozilla you can write something like this on CSS:
I only took a quick glance at your codepen. CSS vendor prefixes (like -moz-border-radius: 2px) might solve your responsive problems. Definitely read up on them on your own. But for quick results, you can use this great utility: CSS Autoprefixer
Hey there guys @xNavid@belcurv ! I’ve been reading and trying out all the resources you’ve given me.
First of all, I want to thank you guys because this way I’m learning tons! Didn’t know about all these things and tools, such as the Cross Browser Testing, the Prefixer and the Browser rendering or media tags!!
I’ve added some code as regards mobile devices, and now colors are shown in mobile phones whereas icon animations appears in desktop browser! That’s amazing! Thank you very much!
I still have the same problem with Firefox though. I still can’t make it have colors, even with the -moz-feature. I can’t figure out why, because the -moz- feature works well for transforming the “chess-horse” icon both on chrome (-webkit-) and firefox (-moz-)… I don’t quite understand why with the icons it is not =(
Even worse: now that I’ve added the screen formatting to icons, whenever you use mozilla browser on the page, clicking on the icons won’t take you to the linked pages! Nor on desktop neither mobile devices! And I can’t figure out why!
Here’s a link to the page: https://codepen.io/Togeri/full/RKNPvG/ , feel free to have a look both on desktop and mobile if you like you want to, and again thank you very much for your support guys, I’m really a newbie and I appreciate this a lot, to be honest.
First of all great work mate. you made some improvements to your portfolio in short time.
Second, I tried two different approaches for Mozilla, one being selecting you elements more specifically like this:
.btn .linkedin {
…
}
IT DIDNT WORK
Then again I tried to give your link an id like
#linkedin {
…
}
IT DIDNT WORK AGAIN
The only thing that I can suggest now is to try to reach out to a moderator, last time @BenGitter helped me with my quote machine problem. Or post your problem in StackOverflow CSS forum.
Here’s something: FF and Chrome are applying the :hover pseudo class to different elements! I copied your code to a local project to see if there were any hints to be had in dev tools. See screenshot of Chrome (left) and FF (right) dev tools. Notice that Chrome applies the :hover pseudo class to the <a> and <i> elements; FF applies it to the button.btn and <a> elements. Your icons are the <i> elements, so yeah - they never get re-styled because they’re not “aware” of the hover. Very strange!
Wow @xNavid, thank you for your commitment! And for you help and support! I will ask in StackOverflow the question, and I’ll ask @BenGitter too! Thanks for the tips!! Very appreciated!
@belcurv, that is really strange! Hahahaha. Thank you for the feedback and this visual and illustrative help! I will definitely use it on my questions! I really appreciate it!
Thank you guys, I will move on and start learning JavaScript, but as soon as I find the way to solve this problem, I’ll let you know!
PS: Is there any way to show my thanks to you? Like giving you a “+1” kind off in this forum? Hahaha
Haha, your welcome mate, but I would appreciate if you could give me any feedback or critique on my portfolio. If you like Here’s a link to my portfolio!
Wow man! I love it! Really nice, lean, simple and clean! The only thing I would suggest you (but just as a matter of opinion), is that instead of embedding your codepen projects to your website, you should put a minimalist image (maybe with an icon) linked to your codepen projects.
Why I’m saying so?
Because to me (and that’s 100% subjective), the animations on hover and so on look really nice in a micro level. But your whole webpage is designed as minimalist, so this breaks up with the macro visual level of the webpage (I don’t know if I’m explaining myself well enough, hahaha)
To put it short: I find that, by running embedded your codepen projects, you are losing general visual coherence, sort of speak.
But, overall, I loved your design! So smooth and clean! And the gradient background was so cool!
