failing to make portfolio responsive - html

Question

i coded my portfoliowebsite myself and my code probably is a mess because i don't have that much experience with code.
The problem i'm having is to make the website responsive so it's also looking good on the phone.
I think the problem is that i used px instead of %, but i tried various stuff and it doesn't look like i want. The website is https://www.jessewensing.com
I'll post a part of the code.
.content {
width: calc(100vw - 30%);
position: relative;
left: 30%;
margin-top: -6%;
}
.menu-header {
font-family: 'Akkurat';
text-align: left;
}
.project-nav {
margin-top: 20px;
font-family: 'Akkurat';
}
img {
cursor:s-resize;
-webkit-filter: drop-shadow(5px 5px 5px #A9A9A9);
filter: drop-shadow(5px 5px 5px #A9A9A9);
top:-2%;
margin-top: 10%;
width:50%;
}
ul {
list-style-type: none;
text-align: left;
left:3%;
margin-left: 0;
padding: 0;
position: fixed;
}
a {
text-decoration: none;
color: black;
color:red;
}
p {
top: 10px;
right:3%;
font-family: 'Akkurat';
position: fixed;
z-index: 2;
}
p.naam {
top:10px;
left:3%;
font-family: 'Akkurat';
position: fixed;
}
p.contact {
top:76%;
left:3%;
font-family: 'Akkurat';
position: fixed;
}
p.cv {
top:80%;
left:3%;
font-family: 'Akkurat';
position: fixed;
}
p.text {
margin-top: 106px;
right:3%;
font-family: 'Akkurat';
color:red;
}
</style>
This is how i want it to look when using the phone
https://jsfiddle.net/f51xjnzu/

Answer 1

Making the website responsive occurs mainly in the stylesheet (css), using % will help instead of px or em, wrap your elements in div containers to help keep elements align when accessed from a smaller device/screen.
You will have to resize certain elements or even hide them at specific screen sizes using similar code to below:
#media
only screen
and (min-width : 1024px) {}
Check this website for more details:
https://seesparkbox.com/foundry/structuring_a_responsive_stylesheet
Hope this helps, good luck!