1

I made my web design in Figma setting it to 1440px x 1024px. (here is the link if that helps to see what I mean https://www.figma.com/file/IlSDcBbvr4nFp83p0jtndR/Bohhi-Portfolio?node-id=2%3A2)

Now that I want to code and style it I'm confused about it. How can I position my objects in relation to the design and screen resolution of my PC and every other user?

Can I make it so that the code fits the design?

Thank you!

bohhi
  • 17
  • 2
  • The [responsive design page at MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) might be a good place to start. The gist-- use a combination of relative units (such as percentages and rems), media queries, and other responsive techniques to guide the browser as to how to alter the layout and the viewport grows/shrinks. Web is not print-- there are myriad different screen and window sizes on which your site may be rendered. Your best bet is not to fight this, but to embrace. – Alexander Nied Sep 16 '21 at 13:36

1 Answers1

2

Try checking out @media query for creating responsive layouts:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Explanation Edit:

@media only screen and (max-width: 768px) {

width: 100%;


}

For example, you can use it to ajust your preferred lyaout on devices with different screen widths (Example: Phone).

When a condition is true (Example: device screen is maximally 768px width) the following css property will be used (Example: width: 100%;). In this way you can create different content layouts and properties for PC users and Phone users.

Dev
  • 200
  • 7
  • Hello! Thanks for the answer. I don't understand it. I cant code it to the initial size of the design and then @media it to the 100% or auto resolution? – bohhi Sep 16 '21 at 13:26
  • @bohhi you can use `max-width` and `min-width`. By using this, you’re looking at the dimensions of the screen a user is viewing your website from. You can use your current design for the dimensions you designed on and something like chrome dev tools to test other screen viewports/resolutions. https://anexia.com/blog/en/chrome-dev-tools-explained/ –  Sep 16 '21 at 13:34
  • @bohhi applied explanation in the edit – Dev Sep 16 '21 at 13:35