Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I'm new to media queries and I have a question.
I made a Desktop version of the website first and now I decided to make responsive too.
I've read that in this case I shall use max-width but I'm not sure.
Could you tell me if I'm wrong?
max-width in a media query means the following:
All styles applied in that media query will run as long as 'screen' is below the max width, for example, max-width: 1200px, all CSS will be applied under 1200px.
Min-width is the opposite, all CSS wil run as long as 'screen' is above the min-width, for example, min-width: 1200px, all CSS will be applied above 1200px.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a question:
How to make a responsive design that when I resize the window the design not change at all(width, height, positions), only the window cover the design/content.
For example this website: https://www.zap.co.il/
How can I dot it if all elements are viewports and almost every element positioned absolutely to the body tag ?
For the viewports I can use SVG - It solving it, but the position ?
I want everything remain the same, thank for your help
this should make your page basically responsive
then for resizing components at different widths
`<meta charset="utf-8">` html code
#media screen and (min-width:800px){
//css code for screen widths above 800pixels
}
css code
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I'm a little confused regarding which units are the best for responsive websites.
I know the pixel units are static and it's better to work with vh or vw to get better responsive results.
Which one is better to work with a responsive design?
I would use 'rem' everywhere. Additionally set the root font size (on the html) dynamic with javascript or relative to the screen size with vw or vh.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
If I set img {max-width: 100%) to make a default responsive feature to all images in a website. Is it a good practice? Should I do that?
Yes, it is a good practice but only if you implement it properly through inheritance and proper CSS naming to avoid convoluted HTML and CSS.
Having a default max-width:100% for images is a good thing as it set a standard for your website that no images should be larger than the window or the container in which it resides unless specified.
This way, you can give exceptions to specific images that should be allowed a size larger than the window or for different screen sizes using size specific rules.
It is better to make use of width and max-width. If the width of the image exceeds max-width, it will be constrained to the max value.
For example, consider the below CSS
img { width: 100%; max-width: 512px; }
If the width of the image exceeds more than 512px, then the image width is restriacted to 512px.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
With responsive designs, I heard we should use "%" instead of fixed measurements like "px" .
But it doesn't work how it should with margin?
I have a logo and links underneath it.
I added margin-bottom: 2% underneath it and it looks perfect from pc
But the links still overlap kinda in mobile.
What to do?
You have a negative margin on #page-header of -16px which is pulling the links back up...
Float your logo to force margin-bottom to work or use padding-bottom instead.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Is it better for responsive design to set a border-radius in ems rather than px?
Ive read that column and media query widths are better as ems than pixels for a more responsive design, however ive never heard of someone using ems for border radius.
em is always better for responsive design and you can convert it here http://pxtoem.com/
Yeah you can use ems for border radius , is it better for responsive than px ? , eh debatable .. because its not always the case , when your screen is small or relatively large it will look not look so good or aesthetic , but responsive design wise , its better to use ems than px