Need help in optimizing my portfolio website for mobile use

Hello people, I recently created a portfolio website for myself using Materialize (it was a mistake, I know.), and I wanted to optimize it for mobile use. It works fine in large screen sizes but when I switch to mobile, the section with the quote and skills section get overflowed. Can someone please guide me here, please? Link to the portfolio

Hi FST, welcome to the forums.

The link show some files but that doesn’t give us a picture of your problem.

ok, this is the link to website which is using these files. its mentioned on the right-upper screen on repl.it as well. There is a button to open in a new tab.

Can you describe exactly what the problem is.

I can’t see the overlapping?

Did you open it on mobile, or changed your browser screen width?

Not on mobile but in browser responsive mode and some device screen sizes.

No offence, buth have you read the Forum Posting Basics?

No worries, I’m new here so I don’t take it as an offense, this will just help me improve my future posts. Anyways, here are two images of the problem:
2
skills icons are missing, and since I’m new, I cannot upload for the quote section here.

1 Like

Hi,

You have set a fixed height for your parallax containers which means that when the content wraps it’s too tall to fit. (It’s never good to have a fixed height for text content in responsive design).

I suggest you use a min-height instead.

e.g.

.parallax-container{
height:auto;
min-height:400px;
}
1 Like

Note: That rule is found in two files:
style.css and materialize.min.css

1 Like

I set min-height, but it didn’t work.

Do I need to set that in materialize.min.css as well?

Depends, if you follow what @PaulOB suggested, setting height to auto in the style.css it will override the rule in the materialize.min.css as the style.css is loaded later in the page’s html and so overrides the earlier in code materialize.min.css

Anyway, It doesn’t hurt to set both to auto or remove one of them. :slight_smile:

Read more about CSS and Specifity at Mozilla Dev:

https://developer.mozilla.org/en-US/docs/Web/CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

2 Likes

It would have worked if you used the code I gave you :slight_smile:

Min-height on its own is no good because you have a height defined (twice as Erik pointed out). You need to over-ride the height which is why I added height:auto but you omitted it from my code. :wink:

2 Likes

Oops, sorry about that. Thanks for all the help!

2 Likes