site looks horrible on mobile
really speaks for itself. site looks like garbage on mobile, no idea how i can fix it honestly.
249 Replies
also the black/greyish text turns white when you hover over it (on desktop).
would like to know if there's any way to make it so in mobile it's just plain white text
responsiveness is hardโฆ you could either recode your css to use grid and try to apply the RAM technique or hardcode your mobile layout with media queries
avoid setting height and width too, let the browser handle it
if u need to set a height, use min-height instead
Macro you really should read #how-to-ask-good-questions . No one here has a crystal ball and there is nothing you have given us to help you.
Mobile issues are not just a "do this" we have to see code, minimal example of the issue, etc.
i really have no idea what's causing it honestly
reason why i havent provided any code
Ok but you understand just showing us a screen shot is not going to give anyone any idea either?
not sure what else i could provide apart from a screenshot of what it looks like in pc
@vinicius!
look at that
@Macro please review #how-to-ask-good-questions
post your code in a platform like codepen
mb
one sec
not sure how i can do that
i have a ton of css scripts
and images
in the site
should i just post the grid and send it
Macro are you developing this website? or just something you got as a template?
template i've edited a lot
i've changed the index.html part a ton, css and js is the same
then deploy your code to github and send it here, maybe i can have a look
i've got it in github already. reason why i havent shared it for now is for privacy since
i'll trust you though
repo is private, can you send me your username so i can invite you to it
I'm out gl ๐
๐
it's impossible to help you without seeing the code running by ourselves
there isnt a magic tool that you click a button and it magically makes everything fart rainbows and be responsive
:Ethereal_pepemiddlefinger:
you can put just the stuff that's ok to share publicly
good point
if you cant share anything, then this is the end of the road and nobody can help you
and no, nobody wants to steal your code
we really cant help you without seeing wtf it is doing
if i ask you why my car has a whobble on the left front wheel and i take a photo of the car parked, from the right, is it going to help you in any way?
no! you can admire the car, but that's it
dont care about that, reason why i wasnt sharing was because it's a personal site with really personal info
remove the personal info
thats why lorem ipsum exists
it's literally nonsense filler text
much rather just send the private full repository to someone
before sharing it here
lol
you're unlikely to get help in DMs, and very likely to get help from sharing anonymized code in open chat. Help in DMs is a much bigger commitment and most people don't make that commitment without knowing you first.
no need for dms, just need someone to share their github username on here so i can invite them to the repo
One thing I can suggest is to look in dev tools (F12) and play around with the styling and see what's what
It's unlikely anyone will want to clone your repository and help you on this unless you can make it public. Once you made it public, people will just open up dev tools and see what's going on. So if you want to cut out the middle man, you can look in dev tools yourself and see if there's something specific you can find that will help us help you
the problems are on mobile, is there some way i could look at dev tools in mobile?
Yep! There's a way to view the page as a mobile device in dev tools
i have private messages disabled exactly to prevent that
how cann i do that
What browser are you on?
on mobile i use google
Go on your computer and press F12, and then you can resize it to go into the mobile view
ohhh i see what you mean
alright
From there you'll see the DOM:
And in the that little window you'll see the styling and you can play around with it and see what's what if that makes sense
If it doesn't, good time to learn. That's what we'll all do if you make it public anyway - it's really useful to learn how to debug like this
alright one sec
i'll make the repository public
Okay I'll try to take a look during my lunch break
But it's most likely because you removed / messed with classes and the structure if you're working on a template
Are you doing this to get experience to eventually become a web dev or just doing this to get a website up and running?
GitHub
GitHub - Dalvelac/Portfolio
Contribute to Dalvelac/Portfolio development by creating an account on GitHub.
honestly to make a decent portfolio for myself. i know other langs but barely ever touched html/css
Portfolio for web dev jobs?
Asking because it'll change how I'll help you
nope, i'm not a web dev at all actually
i do c, c# c++, python and learning java
i would like to learn web devving though
Got it. I can try to fork it and run it locally, but honestly you'll need to host it anyway and Netlify is free + really easy to setup, so I recommend in the next hour before I can look at it to just throw it up on Netlify. That way it'll be easier for me (and others) to debug without me having to fork it
i already have it up and running
on git pages
Oh, just send that then
save the link ๐
i'll delete it once you have it, dont really like my face being public hahah
I get that but you'll be hosting it anyway; whether you give it out publically or not it'll be publically accessible
yeah i know that
i dont want anyone accessing that though
mostly people that find it from my linkedin or somewhere else
not discord haha
i hope you understand
Yep no worries
deleted the link for now. do you have it saved somewhere?
Yea I've got it opened in another tab!
thanks for the help man, i was about to give up :cry_about_it_c:
For starters, I've removed all the
height declarations on your .intro--banner class and removed position: relative and that made that responsive
If you untick the styles in the dev tools you'll see what I mean
i bet that that button has a fixed width
odd though, the image is missing as well from the website
The blue part does, yea. Just a span inside the button for hover transition though so shouldn't be a big deal
Actually no it doesn't myb
well, the width doesnt do anything there, so, off with it
i'm going to note anything you find down
one sec
I can help out a bit but don't have time to do a full audit unfortunately. I don't know what should be there / shouldn't be there yknow ๐
That's why I'm trying to show you what I'm doing so you can help yourself too
oh yeah fair
a quick rule of thumb: if you need to set a width or height, stop and think if you really need it
should i take that out
This is a really good opportunity to learn a bit more about web dev. If nothing else, you can go 'ah I hate this ๐ฉ' and decide to not touch it again if you can help it haha
spoiler alert: you almost never need it
I don't think the button has a fixed width, I think I was mistaken on that
maybe it is a flex?
it's overflowing unnaturally
Ah crap I just closed the tab by accident
should i start by taking out the height declarations
thx
Yea
Like epic said a lot of times you can think 'Do I really need to use fixed widths / heights for this' and 99% of the time it's a no
It's one of those things you shouldn't be doing unless you know what you're doing type of thing
one sec
let me see if i can find them
You can use the dev tools for that too
yeah thing is im trying to find what code its in
On the right, you can see what file it's in (main.css, probably compiled though depending on the template) and what class you used:
intro--banner
Are you using VSCode?yes
If you're on windows, you can do
ctrl+shift+f I think it is. That'll do a project-wide search for a term, and then you can type in intro--banner. You can also limit it by file type, so I'd do .css
That'll give you all instances of the intro--banner class in your codealright one second ill do that
oh my god
i just found a main.css code that hurts just to see
Can you send the repo over again please?
GitHub
GitHub - Dalvelac/Portfolio
Contribute to Dalvelac/Portfolio development by creating an account on GitHub.
Ah okay, you're using sass. So the template is compiling your sass files down to css
So limit the search by
.sass file typesso intro-banner.sass?
Yea that might be it
Oh I see what you're saying, click that arrow on the left of the search bar
oh i see
And then click the 3 dots
I think that's it, don't have vscode open right now
this?
i tried .sass
Yep! Exactly that. Then type in
.sass or *.sassnothing worked
No results?
Okay, it might be how they nested it then
try typing in
banneryep no results
i know it is sass
100%
It's probably in the
_intro sass file
Probably nested under something like
If I had to guessoh you might be right
i think so
by the way, another way to access files is by clicking on the bar at the top and typing the name
oh will try that too
one sec
Yep or
ctrl+p too!if you typed
intro there, it would show the fileok they are height declarations
will note this
dont use that, it's the shortcut to print in many programs
Comment those out instead of removing them for now because it might mess with the scroll functionality
Take it up with VSCode not me ๐ that's their default shortcut
give me a second, ill tell copilot to do that :joepray:
i know, im just saying it is a bad shortcut
by the way
Copilot to comment out code? ๐
are comments in css made like in c++
as in
// hello
for example
You can select the lines and press
ctrl+/ and it'll comment it out based on language typedamn
shortcut gods
its all commented
should i commit
lol learn a thing or two when working in it
Nah, test if the scroll functionality still works on desktop
aight one sec
๐คข 2 space indent...
2 space indent rocks
i wish i could record
rn
at least its indented...
I only use 4 when working with php
i use tabs
the only correct choice
ok scrolling still works after i took it out
Okay you're probably good to delete the height declarations then if it looks good on mobile, tablet, and desktop and scroll functionality still works correctly on all screen sizes
no, in css it's
/* */. in sass, you have loud comments (/* */) and silent comments (//)alright
deleted it
it still looks crappy on mobile though
I didn't even know they had a name I just use /* */ for multi line lol
by the way, loud comments are part of the output css
this is a process
Does the intro section look better though? At least as far as the height declarations are concerned
looks great on tablet
on phone its giving issues
Yep and you'll be able to follow this process for the rest of your site. Teach a man to fish haha
What's it look like on phone?
nope, on phone it looks the same
Ah, remove the
position: relative declaration too
If you didn'tlet me look for it
one sec
Still issues, but if you remove height and position: relative it'll look like this
the position: relative code is in a lot of different places
for your menu, at the top, i would try
position: sticky; top: 0
in the search bar?
or do i replace position: relative for what you sent
It's on the
intro--banner class still, so should still be in the same file
on the part that has the logo and hamburger menu
the hamburger menu ๐ญ
(yes thats the name of the icon with 3 lines - and there are many types)
i see it tbh
alright
now to find what part has the logo and the hamburger
probably <header>
oh, and set a background to it
same as the page
in index.html?
in css
in h2
there's a svg
would that be it
i think so, right
Dammit I closed the tab again lol can you send over the link please
Portfolio de Daniel Alves
Daniel Alves - Analista de Ciberseguridad y Desarrollador Web
Thank you
ill just keep it here for now
Good! Nothing wrong with your face you look very professional lol
๐ญ
thanks lmao
i hate not having beard though
It'll come with time you look pretty young (early 20s?)
if i had my beard i would display this everywhere (no chance)
i do have a beard
still growing
Ohh very nice
i just had shaved for that picture
either way
do i change
this to what
@แผฯฯฯ said?
there's an svg under this header
What @แผฯฯฯ said might not apply in this case since you have special scrolling
He has it so that when you scroll down it'll scroll a full page, so sticky scrolling probably won't do anything here. Was a good shout though
I think in spirit of what Epic wants is to add some margin-top to your heading
To give it some spacing between the navigation bar and your heading
So you can do this with devtools too!
If you right click -> inspect element on the heading, you'll be able to select that element
it might work, but i cant test it for another hour or more
alright one sec
it is also a super easy way to make the header follow
this here?
Yes!
there is a margin
oh, margin top you meant
Yea I noticed that too, you can keep the margin there just increase the top margin
you need to reduce the text: its overflowing
you suggest i moved the text into another section
?
also, insert a few <wbr>
no
just reduce the size
So you see it's
margin: 0.67em 0 you can try something like margin: 1.25em 0. Always a good idea to keep your units in steps of eighths as a rule of thumb, so 0.125, 0.25, 0.5, etc... but that's a nitpicky thing. And like epic said, reduce the font-size of the h1alright wait
i'll try all these
in index.html?
yes, inside the h1
alright this is gonna take me a minute
one sec
the <wbr> will break the text where you set it, if it doesnt have space for it
and this gives you control on how it looks like
alright
one sec
I didn't know that, nice!
alright
i added the wbr
lets test it out
im getting errors
fuckkkk
fix them
That's a .css file it looks like?
they are easy to fix
yes,
but what i found interesting
were the warnings
something to do with compatibility?
it's because of
-webkit-appearence
all browsers are required to support that, for now, but that won't be the case foreverso
do i need to touch that
or just leave it as is
You're adding
<wbr /> element (html element) to a .css fileim on index.html rn
yeah, line 61 to 64 are wrong
also, if you notice, i said "in the h1"
that's in
<style>i couldnt find the h1
oh
one sec
it's in the text of the title, so you can define better where it breaks
alright one sec
ill fix the wbr stuff up
brb
alr fixedx
now
does it break better now?
testing that right now
I think the biggest issue right now is that you have the font-size is
px unit (never do this, bad for accessibility). Set it in rem unit for now, and use the clamp() function.
Something like clamp(1.75rem, 1.75rem + 2vw, 2.5rem) might work
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
You might have to set the font-sizes manually (with media queries) depending on how you want it to look though. Just tested it with clamp and doesn't look greatwhat did i have to do in h1 again?
alright
wait
thing is where would i actually edit this
index.html? or some css file
Your .sass file
Not sure where it is, I'd look in the intro file again and see if it's there
alright
give me a minute
i hate how its so easy and complex at the same time
i've literally lost intro
what
You can pin files in VSCode
nono i've literally lost it somehow
i have no idea what ive done
Lol good thing you have it on git you can always restore if you need to
let me check in the trash can
I'll be back in a bit
i must have misplaced it
and put it in the recycle bin
remember how we deleted the intro file
so we changed some stuff before deleting it
what did we change?
alright
made the changes into clamp size
Oh I didn't mean the whole file, sorry, just the height and position declarations in that file
restored it
it's alright
i added the changes you suggested just now
Does it look better?
it looks exactly the same
i genuinly have no idea why
we tried so many things
๐ญ
It shouldn't, it fixed it for me but give me a bit and I can look again
I'd try to go through the dev tools though like I showed you and troubleshoot from there
It's going to be a long process
hmmmm
its fixed for you?
can you send me the code you have
ill try it
I didn't change code I just unticked styling in the devtools
hmm
and i applied that into my code
so
i think
i applied that in my code
just to be sure
its this that basically fixed the entire issue
for you
correvct
Did you compile it? I don't know your specific compile steps but you'll have to compile your sass files to css
No I was just talking about the text overflow there
what does unticking styles
actually do
i didnt compile it into css, no
Just removes the styling for them on that page, in the browser. When you reload the page, the styling will be there like normal again unless you tick them again
It's just a way to debug stuff
๐ค
You can also add styles there too
genuine question:
have you considered starting over?
I was thinking about suggesting that but the scroll and hamburger animation / functionality would be complex for them to recreate
it's fine, the elements can be hidden until they are needed
so, style the website, then style the menu
i havent, yet
i'll just have to hope an employer doesnt randomly decide to check my portfolio on their phone
at this point, im seeing that there's too much to fix
๐ญ
so, start over with a mobile-first approach
alright wait
im not giving up just yet
That will be the first thing they check ๐
At least if you're looking into web dev stuff
Also more than half of all internet traffic is on a phone
im nowhere near to being a web dev yet haha
sometimes, starting over is the best way to make progress
dude
i wish css could be ported to
c++
or python
or something
๐ญ
i'll see if chatgpt has any suggestions
on what i can do
start over
seriously, it's not that hard
and this time, use a proper reset
Let me know if you have some questions I'll try to help later
Use a maintenance mode page while youโre making changes
Dude.. css is way easier than c++.. and has nothing to do with it. But seriously.. if you just want a decent portfolio page without having to learn much, just use Astro with a nice template and call it a day.
Or learn the very basics of using some layout techniques like flexbox, grid and make something simple first. You can always make something fancier and more complex later when you learn new stuff
manaed to fix it
i dont know how
or what i did
but the problematic text just doesnt appear on mobile anymore
if it works dont touch it!
that works
can't make it work well? hide it
๐คฃ
Great!
