HTML and CSS Portfolio Padding Issues

Question

Hey community
I'm wrapping up my webpage portfolio and would like to ask for help to get it checked. https://codepen.io/JulyNight/pen/oExPbv
1. As you noticed on the right side there's a white space padding issue. Please help me to get rid of this with a worm advice or addition to my code.
2. I'd like to make my icons more interactive and user friendly with the hover and fontawesome attributes. Such as when somebody puts a cursor on the icon it starts hovering an fa icon over it with some opacity effects I'd think.
3. If there're any suggestions of how to make it better please let me know.
Thx a lot in advance!

Answer 1

1. set .firstLine and .lastLine width to 100% rather than setting fixed (too much wide) width...
2. I don't understand what you want to achieve
3. correct typo mistake, such as 'Contacts' instead of 'Contacs' title, use relative units rather than absolute: %, vw, vh, vmin, vmax... or even em/rem with base value defined in relative units, to handle minimal responsivness (right now, on my tablet -- wich have good definition -- display is correct in landscape but totally broken in portrait orientation...

Answer 2

https://code.sololearn.com/W6GfE2uw3W4M/#html

Answer 3

Appreciate it thank u
Nice suggestions. In terms of the second question I want to have a png icon and set up the hover icon on top of it. So every time a user puts his cursor on it the icon will appear on top of the png.
Any ideas?

Answer 4

Yes, but need to sleep now ^^

Answer 5

(little edit to explain how to obtain equivalent of mouse over an element in touch devices context)

Answer 6

(also fixed css rules -- in web browsers context it seems to not require explicit default value for opacity, but it seems to be mandatory in app' context)

Answer 7

Alright though
For me the day is only beginning 7am lol
Hope to find out a solution from u tonight

Answer 8

Almost the same, but I'm awake from about 24+ hours :P

Answer 9

you are a beautiful man. cant help, cant view it properly on my old small notebook. the site you are using isnt responsive/the "iframe" is giving bad results. you could try experimenting with the margin, property size, display type: block, inline, etc.