hi im new here in creating a website. I really cant figure out it how can I make an auto adjustment of my website were it could fit on different screen resolution and also when the window is resized to much smaller without overlaps of the content of the website?
right now my screen resolution is 1680 x 1050, where I actually creating the website .
hope you can help me. thanks!
You most likely need to use what are called media queries:
#media screen and (max-width: 975px){
body{...}
div{...}
}
Read up on them at MDN
Related
Hi Community please i have problem about responsiveness it's really challenging for me and i have searched all around the web with no result , problem is how to make an element not responsive to all different screen sizes, example i have image and i want it to be not responsive i have try width and height with cm or mm but it's not solving the problem when i implement this image on TV it's going bigger so i want is to be the seem 1cm as i mesure it with the role and the TV , there is any guide to solve this ! i hope that i'm not wasting your time 🙂
I think there is no way of doing this. The only possible soloution would be to scale everything based on the screen size.
I have created my website with html, css and javascript and designed it for iPhone X to start off. My website is going to target on Instagram so my main targets are all types of mobile devices. I'm using media queries in css and I want to check for screen height. I'm not sure but it sounds like a good approach for me because for example iPhones don't differ that much in screen width as they do in screen height.
This is my way of approach in css:
#media only screen and (min-height: 481px) and (max-height:666px){*css*}
This should be a query for iPhone 5, but I got really confused by points vs pixels so I was hoping some of you can help me out.
Google chrome shows me the screen size of iPhone 5 as 320 x 568. I was guessing these are supposed to be points but it works just fine with my media query entered in pixels while screen size of iPhone 5 in pixels should be 640 x 1136 pixels.
My media query for iPhone 5 works just fine in Google Chrome iPhone 5 "setup" but I also have a test iPhone 5 at home where responsivity seems not working at all.
So before continuing my responsive design I wanted to have this clear.. Why is this? Is Google Chrome showing points or pixels? Should I use points or pixels in my media queries? Why does it work with pixels in css when they are completely different when I google screen sizes?
I would still consider myself as a beginner so I would really appreciate not too complicated answers.
Thank you!
I have made a terrible error. I have built an entire website without making it responsive. Is there any quick easy way to make the whole site responsive so when in landscape mode it all looks exactly like my website on a desktop computer? I am a designer for print but not great with websites as you can see but I really do not want to start the whole site again.
Maybe a media query to with ratios? so the whole site looks the same just smaller and fits on the screen?
Thanks in advance
Try using CSS #media Rule, and specify your styles accordingly.
You can look at plugins that help you do it. RestiveJS is an example.
http://restivejs.com
For the future: the easiest way to implement the #media rules is the usage of em instead of pixel.
http://www.w3schools.com/cssref/css_units.asp
em Relative to the font-size of the element (2em means 2 times the
size of the current font)
if you then want your website to adjust to your screensize, simply use
#media all and (max-width: 768px) { // ipad width in portrait
body {font-size: 0.7em}
}
everything is 30% smaller on devices with a screen width smaller than 769px then if you used em instead of px
I use large images in most of my (Wordpress) posts. I'd like to optimize these for mobile users. I'm not sure what optimize means but I'm guessing CSS, jquery or JS switches out the larger image for a smaller one?
Are there any examples of how this should be done?
Jquery Bires will do exactly what you want.
https://github.com/ahoward/jquery.bires
I would use CSS Media Queries to serve different CSS based on screen size
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
For example
#media (max-width: 700px) { ... }
Would serve specific CSS to any device with screen below 700px
I have a page built using HTML/CSS that is meant to be used for the sole purpose of being displayed on a TV. I've developed the page to fit perfectly within a 1920x1080 ratio, but I would like a way to have the page scale up or down with the exact same aspect ratio of the original design. Is there any Javascript script I could use to help maintain the constant ratio?
Edit: This will eventually be turned into a RoR application that will constantly update content such as news/events/etc.
a simple listen on window resize would solve the problem:
$(window).on('resize',funciton(){
var self=$('#ur_id');
self.height( self.width() * (1080/1920))
})
You can use CSS #media queries for this
#media screen and (min-width: 1920px) {
/*Styles goes here*/
}
Or you can use media = projection
The design for a device supporting 1920x1080 resolution mostly is not applicable to a mobile device for example. Maybe you need to hide some elements (generally sidebar) or decrease the font-size, load a different logo... So the best solution is a responsive web design using #media queries as #Mr. Alien suggest.
Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
You can check some Guidelines and Tutorials at SmashingMagazine.