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
Related
I have a little question for all of you !
I will try to apply mobile stylesheet only if the user is on a mobile.
If the user is on desktop only the desktop's stylesheet will be apply even after resizing the window.
Here is the result I'm looking :
• enter link description here
When you resize your windows the mobile's stylesheet is not apply because you are on a desktop version
easy or not ? Help me please
Thank's a lot
you are gonna need some javascript to detect the browser, even then it's still a difficult task to accomplish 100% of the time since there's always new browsers out there, one of the most up to date librearies is bowser. https://github.com/ded/bowser
You ca use css media queries
For example
#media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
For example the above style will be applied only when the max-width is less than or equal to 500
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
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.
I want to make some of the fonts on my website larger, if a visitor is using a small screen. Ideally without jquery, as I want to do this early on in the page load, and I don't want to load jquery until later, for faster loading.
The best I have come up with, is to check for screen size. But this is far from perfect. An iphone4 has relatively large size, but small screen, while some old netbook might have a smaller resolution but a larger screen. I guess what I really want is some variant of screen "DPI".
If there is some css way of saying "on a small screen do this, else on a large screen do that" that would work too.
In CSS2 there's a media property and in CSS3 this can be used to do media queries. It's not supported on all browsers, but it may be okay to use since your small devices like iPhone etc do support it.
#media screen and (min-width: 781px) and (max-width: 840px) {
body {
font-size: 13px;
}
}
This site doesn't care about IE, try it in FF or Safari, change the browser width and notice how the width changes using this property.
Media Queries are the key and are a lot of fun to use.
See http://jsfiddle.net/neebz/kn7y3/ and change the width/height of the 'Result' panel to see it working.
Example taken from : http://www.maxdesign.com.au/articles/css3-media-queries/media-sample/