Having issues with Responsive Web View and Javascript hover property
Hello, Please I'm having issues with the responsive web view of my portfolio. It seems as if the view screens are better with margins and paddings than with putting a width on the elements. This problem is occurring in the projects section(I used percentages for the width). I also don't know why my Javascript is not working on the hover property in the project section. Live site : https://kenes-portfolio.vercel.app/ (edited)
2 Replies
Hi Alexis, I'm glad you are building your portfolio. I quickly viewed your code and I can say you didn't go best about it. Margins are rarely used for moving bigger elements (usually they are used to push object top or bottom), paddings are better option because paddings are included in the box-sizing calculation (which you didn't declare), but margins and borders are not calculated. See more about that here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Since you included bootstrap grid, I don't see the reason why are you using different elements for columns in the project section since you could use a row and a col-lg-3 just fine and you would setup your section faster and cleaner. Check BS documentation for more details.
Also I see the grid gap causes a overflow-x which gives a scroll bar.
There are more things also to be said, but I'm sure when you apply better technique in html structure and css, you will have far more less problems.
As for the JS, based on the structure, it seems like the dark hover elements are children of each ".-card" element. In your original JavaScript code, you are trying to directly access the .dark-hover element globally, which might be causing issues when there are multiple instances of it.
In your event listeners, you can use event.currentTarget to refer to the element to which the event handler is attached. This way, you can find the .dark-hover element relative to the current card being hovered.
Hope this helps.
MDN Web Docs
box-sizing - CSS: Cascading Style Sheets | MDN
The box-sizing CSS property sets how the total width and height of an element is calculated.
Ok thank you very much for the feedback, I appreciate it. I’ll implement the changes