On my page I don't use any viewport settings.
I'm just using 25% left and right margin for the whole content of the page. The problem is that when I visit it from a mobile device the width matches the width of the phone screen and with 25% margin it becomes very ugly. Just some text in the middle.
What I want to do is, make the page to does not fit the mobile screen. I want to keep it the same size. Like the most of the pages are.
How can I do that?
what mobile device you are trying to archive?
25% left and right margin it is very relative, per sample: 25% margin in a iphone looks one way 25% margin in a tablet looks complete diferent too.
you need use CSS3 Media Queries
try read about
https://www.w3schools.com/css/css3_mediaqueries.asp
you can test in chrome using: Test Responsive and Device-specific Viewports
https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports
I hope this can help you.
Related
This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(22 answers)
Closed 4 months ago.
I am working on 3 HTML5 responsive websites and they all need to be adapted for devices.
I understand so far the media queries for small devices and I have seen good score on that, 320px, 375px, 425px, 480px, 768px, 1024px.
Now the "problem" comes for bigger screen.
I still have few doubts, for example in the office where I am working they have really big screen 2560px but how should i write the right queries for that ?
I have an 11" macbook and my colleagues have also got a bigger one 13" where the homepage is showed in a different way.
Should i also set a max-width 1680px, max-width 1920px and max-width 2560px? I saw on Google that this are the most common big screens and is apparently "working" when I checked back in the office.
The real questions are: How should I work on bigger screen? Which settings should I use to show the same webpages on different big screens?
The answer is that you should have a final width you design for and then eventually center that div in the middle of the page, so that even if the screen gets wider, the only thing that'll get wider is the background surrounding the div. You will need to set width of the div to a fixed width.
Even for larger screens, there gets to be the point where scaling larger fonts, makes the experience to cumbersome to read. If the content were to be scaled to 100% of the browser's width, it would take too long for the reader to read the information desired, hence why centering a fixed div works. It is also conveniently less work for the developer as well.
In terms of smaller screens, you would probably need to scale the div that contains all your information to 100% of the browser's width at a certain breakpoint via media queries.
The end result should look like this:
100% browser width --> fixed centered div with a background
(mobile + tablets) (large screens)
I have a website that I made (without bootstrap or any or that stuff, and I am having an issue trying to scale everything down for people with a smaller screen resolution. basically I'll want it to detect the size, and apply appropriate CSS classes to elements to scale everything down if under a specific width. Right now I am just trying to build the CSS classes, and I am having some difficulties. The closest I've gotten is shrinking all the content down using:
transform: scale(.75);
That works awesome on the actual content for resizing, but I'm left with a large padded field around the content. a bit hard to explain, but what I want is for the content to shrink, but the divs to still be 100% of the browser (so if there is a smaller browser it fits nicely without this stupid large padded area around the content)
Here is how it normally looks:
image!
and here is how it looks with the added CSS transform:image2!
Any ideas for how to overcome this would be greatly appreciated, Also note I really don't care about my solution not working in IE9 or lower!
The basic output that I want is the equivelent of shrinking the browser zoom to 75% if that helps..
Depending on how your CSS is written, something as simple as this could work:
#media only screen and (max-width: 600px) {
body {font-size: 85%;}
}
If you have divs with em widths that will shrink their width, but you could change that via the media query above, perhaps setting their widths to 100% etc.
I do not know how resolutions work. If I set the width of my container elements to 1000px and the user opens the page from a 1300px resolution screen, then the right part of the screen 300px would be left white. I don't want that to happen. One way I know is with CSS Media Query but that way I'd have to write tonnes of lines of code. Also I don't want to do it with jQuery. Can someone explain me how resolutions work and how I can create resolution independent elements on my web page?
Use percentages instead of pixels.
for example
div {
height:60%;
width:40%;
}
Using percentages instead of pixels will make it the right size no matter what screen.
i have an image header for a HTML-mailer with the width of 600px and height of 75px. is there a way to reduce the size of the image when the mail is read on a smart phone? Can i use in line css max-width:600px; width:100%; so that the maximum width stays at 600px and then when viewed on a smart phone with smaller screen size it shrinks to the phone display size? or will it create any problems?
Using absolute pixel values is usually a bad idea. Try creating a "fluid layout" that looks good in almost all sizes.
To change CSS depending on the available display size, try "css media queries".
Your solution (max-width) should work as well, just test and try, it should work.
in my page using jquery mobile I have a div and I would fixed the width without it depends to the devices where it is showed.for example in my iphone the div is showed correctly because the screen is small while in my ipad the div takes all the screen and it is really bad...how can I fixed its position?
<div style='width: 100px'></div>
This is just general but you want to look at CSS 3 media queries to customize your layout specific to a device.