dealing with screen resolution

Hello friends I am working on some project, and I was going forward with coding the front-end until I found out that my application is aweful on old monitors with low screen resolution, the fonts the divs gets so bigger and things start to break. Horizontal slides, and many more new problems appeared. I didn't thought of this thing when I first started working on CSS.

Is there any helpful tip that I can apply revisiting my CSS?

elhananOP•2/11/24, 3:41 PM

The difference looks like this:
This above is from my laptop, and the following is when I set the scale of my display to 150% which is similar to some old screen that I have tested out.

elhananOP•2/11/24, 3:42 PM

Josoo•2/11/24, 3:50 PM

you could try vw units and try media queries maybe to force width sizes depending on waht your CSS is

elhananOP•2/11/24, 3:52 PM

is there any other tweak like checking for screen resolution and zoom in zoom out or scaling thing to body?

Jochem•2/11/24, 3:53 PM

That's what media queries are for

Jochem•2/11/24, 3:53 PM

You can check different display sizes using the responsive mode on dev tools

elhananOP•2/11/24, 3:56 PM

media queries are for screen size instead of resolution right?

elhananOP•2/11/24, 3:56 PM

I am having a problem with screen resolution not screen size

Josoo•2/11/24, 3:57 PM

same thing

Josoo•2/11/24, 3:57 PM

if you're dealing with monitors of a certain width like phones or super large screens you can use media queries to tackle those situations

Josoo•2/11/24, 3:58 PM

ex: @media screen and (min-width: 768px) {
/* Apply styles for larger screens */
}

Josoo•2/11/24, 3:58 PM

vw units are another way of making fonts responsive, or using fr units if you're not focused on mobile

Jochem•2/11/24, 3:59 PM

Media queries are for when the layout of your site breaks, that's it

elhananOP•2/11/24, 4:11 PM

I don't think you got me, let say I opened my web application on same screen size 15.4" but different resolution (number of pixels) , in such case I don't deal with screen size since they are equal, but since on of the laptop have dense pixel it shows can show multiple components from the web application, but the other laptop with low resolution only show some part of the web UI.
So is still using media query is a way to go in such situation? I actually am using media query to deal with tab mobile phone and large screen, but that's not causing this issue

Jochem•2/11/24, 4:17 PM

hmm, you can apparently use a media query on the screen resolution in dpi, but I'm not sure what the results would be https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

MDN Web Docs

resolution - CSS: Cascading Style Sheets | MDN

The resolution CSS media feature can be used to test the pixel density of the output device.

Jochem•2/11/24, 4:18 PM

are you seeing this issue with actual clients, or testing for resolutions that actual clients use? Or are you just being extremely thorough in your testing?

elhananOP•2/11/24, 4:27 PM

no i just opened the application on dell monitor and i was frustrated when everything scaled up

elhananOP•2/11/24, 4:28 PM

look at this:

elhananOP•2/11/24, 4:28 PM

and this

elhananOP•2/11/24, 4:29 PM

This is the simplest css applied to it but the difference is huge

Josoo•2/11/24, 4:29 PM

I get what you mean now. Maybe you could try setting fixed dimensions (width and height) for your website elements

.my-container {
width: 1300px; /* Set your desired fixed width /
height: auto; / Allow height to adjust proportionally */
}
OR

Positioning and Scaling:
Set the position property of the <body> and <html> elements to fixed. This sets entire page remains fixed within the viewport.
Adjust the positioning of individual elements using CSS properties like right, left, top, and bottom.

Maybe try messing with JavaScript properties like window.devicePixelRatio.

elhananOP•2/11/24, 4:33 PM

ok I try my best figuring out with suggestion you have gave me, I already suggested a youtube video suggestion for kevin if he can discuss this issue on his tutorial. https://discord.com/channels/436251713830125568/1113603750540623872/1113603750540623872

Josoo•2/11/24, 4:35 PM

yeah your situation is pretty niche since I've never had to deal with old monitor pixel ratios

JJosoo vw units are another way of making fonts responsive, or using fr units if you're...

b1mind•2/11/24, 6:32 PM

noooooo please don't do this xD never use vw/vh for fonts and really avoid them period unless you know what you need (svh/lvh/vmax/vmin) will often be what you will want to use over it too if you really need to. Never for fonts though.

b1mind•2/11/24, 6:33 PM

I would be to question that this design is coded using widths/heights period? Or you just need to like mentiond above shift it in a @media query so things start to stack vs overflow

Eelhanan I don't think you got me, let say I opened my web application on same screen siz...

b1mind•2/11/24, 6:34 PM

CSS pixels != dpi

b1mind•2/11/24, 6:35 PM

You have a monitor that displays things at 1024/800 you will use the same for CSS pixels in a media query. Does not matter the actual size of the monitor could be a 17" or a 21"

b1mind•2/11/24, 6:36 PM

Also it does not matter for CSS if its higher DPI (but for images it will)

b1mind•2/11/24, 6:37 PM

Also if you are using fixed/absolute positioning that would probably lead to things getting wonky, hard to say without code.

b1mind•2/11/24, 6:38 PM

#learnGrid

Bb1mind noooooo please don't do this xD never use vw/vh for fonts and really avoid them ...

Josoo•2/11/24, 6:48 PM

whats wrong with using them? I havent personally used them in a web app but I have used them in email development. It was an okay solution but I am curious why you think its a bad idea

b1mind•2/11/24, 6:49 PM

Using them for font-size creates an accessibility issue for users that set font-size.

b1mind•2/11/24, 6:49 PM

the other issues come from the bad spec really.. Here Kevin made me a video just so I could share

b1mind•2/11/24, 6:50 PM

https://youtu.be/veEqYQlfNx8?si=dX2MmudcSFW-Ucnx

YouTubeKevin Powell

The problems with viewport units

Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts

Join the Discord: https://kevinpowell.co/discord

Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...

b1mind•2/11/24, 6:51 PM

I don't like he used them for the fallback either.. You can use the 100% from html down for height* or use in a media query depending what you need. Then use the newer units to override if they do support them.

b1mind•2/11/24, 6:52 PM

Also people think of them wrong I find lots of times they think they are a responsive unit when they are very much a fixed unit

b1mind•2/11/24, 6:53 PM

Best width and height unit ? Is to not set them period and let your content be free. (intrinsic containers ig?)

Bb1mind Also people think of them wrong I find lots of times they think they are a respo...

Josoo•2/11/24, 6:58 PM

oh okay, how is it fixed? Wouldnt it calculate based on the current dimensions of the browser?

JJosoo oh okay, how is it fixed? Wouldnt it calculate based on the current dimensions o...

b1mind•2/11/24, 6:59 PM

Its only based on the view so its not looking at any of its siblings or parents

b1mind•2/11/24, 6:59 PM

its a fixed value based on viewport

b1mind•2/11/24, 7:00 PM

That is why lots of people will use it to "overflow" a parent.

elhananOP•2/16/24, 11:24 AM

@b1mind @Josoo This is what I have applied to the login page that I have shared the screenshot with you guys.

elhananOP•2/16/24, 11:45 AM

I am just trying to remove some global.css and util.css imported styles I have applied there is a huge difference between this and the screenshot I have shared before, commenting out those made huge difference, take a look:

elhananOP•2/16/24, 12:01 PM

and I have applied

font-size

font-size

to the body inside which I imported on every application component. Removing that makes things much cleaner and no scrolls take a look:

Bb1mind Using them for font-size creates an accessibility issue for users that set font-...

elhananOP•2/16/24, 12:36 PM

Font size is the thing that messing the UI, I didn't think it had such an impact on the UI and broke things. I started using

rem

rem

units after I watched the REM/EM Kevins tutorial, but in my case, I applied the default font size on the body and again applied the same font size to elements, that is what made a problem.

elhananOP•2/16/24, 12:37 PM

How can I make font-size a responsive since I am testing on different resolution it could so important for me to understand that

Josoo•2/16/24, 3:05 PM

I wonder of when zooming in, the total screensize changes and the content reacts as it shrinks. Do you have a codepen or live example?

elhananOP•2/16/24, 8:24 PM

It's really not very good looking I have tried that

elhananOP•2/16/24, 8:25 PM

i am working on real project and shared from that and since it's sveltekit application I need to share you the whole source code to reproduce it

elhananOP•2/17/24, 7:17 AM

@Josoo Now after I removed the font-size from the body as I said before, the font of the application on high resolution looks different and smaller