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:
skills icons are missing, and since I’m new, I cannot upload for the quote section here.
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.
Note: That rule is found in two files:
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
Anyway, It doesn’t hurt to set both to auto or remove one of them.
Read more about CSS and Specifity at Mozilla Dev:
It would have worked if you used the code I gave you
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.
Oops, sorry about that. Thanks for all the help!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.