Personal Portfolio Webpage -Need Feedback

Let me know what you think and what you’d change! If anyone can tell me why there is a scroll bar horizontally at the bottom of the page and how to get rid of it that would be amazing!

CodePen: https://codepen.io/troy_b16/pen/gOXRxRO

Hi! You can add overflow-x (x means horizontall bar) property in CSS styling body tag and give it hidden value, like that [overflow-x: hidden;]

But that way you can only hide the problem, I looked at your code now, just change max-witdh: 100 vw; instead of min-witdh:100vw; in styling body tag, it will be solved))

and delete position property xD Excuse me, I’m also a beginner.

1 Like

Hey thank you @arcismd! That worked! I appreciate the help! The only issue I notice is when resizing under 320px from my browser instead of codepen is that there is a white space to the right but I’ve spent too much time on this project as it is, I’ll learn for next time! Thank you for your help!

1 Like

You can give relative value for the position property.

body {
    font-family: 'Fredericka the Great', Tahoma;
    margin: 0 auto;
    position: relative;
    max-width: 100vw;
}

Or leave the absolute value and set min-width: 100%.

body {
    font-family: 'Fredericka the Great', Tahoma;
    margin: 0;
    position: absolute;
    min-width: 100%;
    max-width: 100vw;
}

Or generally delete it completely, I don’t really understand which elements are assigned this position, you can set it directly to the element you need.

body {
    font-family: 'Fredericka the Great', Tahoma;
    margin: 0 auto;
    max-width: 100vw;
}

Any option will work.

1 Like

Oh perfect thank you! That seems to work for me!

1 Like