Josoo
KPCKevin Powell - Community
•Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
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?
56 replies
KPCKevin Powell - Community
•Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
oh okay, how is it fixed? Wouldnt it calculate based on the current dimensions of the browser?
56 replies
KPCKevin Powell - Community
•Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
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
56 replies
KPCKevin Powell - Community
•Created by francis on 2/11/2024 in #front-end
flexbox
justify-content: flex-start aligns only flex items only the main axis of the flex container
justify-content: start aligns other items in the alignment container
2 replies
KPCKevin Powell - Community
•Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
yeah your situation is pretty niche since I've never had to deal with old monitor pixel ratios
56 replies
KPCKevin Powell - Community
•Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
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.
56 replies
KPCKevin Powell - Community
•Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
vw units are another way of making fonts responsive, or using fr units if you're not focused on mobile
56 replies
KPCKevin Powell - Community
•Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
ex: @media screen and (min-width: 768px) {
/* Apply styles for larger screens */
}
56 replies
KPCKevin Powell - Community
•Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
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
56 replies
KPCKevin Powell - Community
•Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
same thing
56 replies
KPCKevin Powell - Community
•Created by elhanan on 2/11/2024 in #front-end
dealing with screen resolution
you could try vw units and try media queries maybe to force width sizes depending on waht your CSS is
56 replies