My website http://asebratenpark.no got a Home-page (main index-file) with fullscreen photos. I really like how it look on desktops. But really dislike how it looks on smartphones.
I am thinking of using queries to remove the fullscreen rules from firing on smartphones.
Is that an idea? If it is, I am a bit uncertain of how I should proceed.
Some possible solutions:
1) Use Media Queries in CSS to load a smaller image (you should be doing this anyway) so that something like:
#media only screen
and (max-width: 640px)
{
.background {
background-image:url('ultrasmall.jpg');
}
}
#media only screen
and (min-width : 641px) and (max-width: 800px)
{
.background {
background-image:url('smaller.jpg');
}
}
etc. for other screen / window sizes .
2)
You can also use CSS3 image sizing rules to set the image to fit the size of the screen so using background-size: cover; or background-size: contain; to best suit your needs.
See http://www.w3schools.com/cssref/css3_pr_background-size.asp
#media only screen
and (max-width: 640px)
{
.background {
background-image:url('ultrasmall.jpg');
background-size:cover;
}
}
Related
I have a website that I developed, but I just got a screenshot from someone who was looking at it on a 2560 x 1600 monitor and it looks kind of ridiculous. What is a reasonable upper limit for screen resolutions to support? I'm concerned about negatively impacting load time by adding a huge image. How can I deal with this properly?
Solution 1: Maximum width
Use a container div with the following CSS:
#innerbody {
width: 100%;
max-width: 2000px;
margin: 0 auto;
}
Put all HTML in this container (wrap the container around all HTML), like this:
<body>
<div id="innerbody">
... your page ...
</div>
</body>
I would also add a nice subtle background color to the body, to mark where the 'page' ends, like this:
body {background: #eee;}
#innerbody {background: #fff;}
Solution 2: Mask the quality
If you are only worried about the (poor) image quality, you can add the container div (from solution 1) and use this CSS to overlay a hatch (diagonal lines). This is trick is often used for low quality full-screen video, but also works for background images.
#innerbody {
width: 100%;
background: url(/hatch.png);
}
Solution 3: Media queries
Got a big screen? Thou shall get a big image. Got a small screen? Thou shall get a small image. Sounds logical, right? You can achieve this by using media queries. This works like this:
#media screen and (max-width: 500px) {
body {
background: url(small_image.jpg);
}
}
#media screen and (max-width: 1000px) and (min-width: 501px) {
body {
background: url(medium_image.jpg);
}
}
#media screen and (max-width: 2000px) and (min-width: 1001px) {
body {
background: url(big_image.jpg);
}
}
#media screen and (min-width: 2001px) {
body {
background: url(really_big_image.jpg);
}
}
For each screen size ONE of these media queries will be true. That image wil be served.
To address your load time concern, one option is to use media queries so you can control the background image based on visitor viewport size. e.g.
#media (max-width: 800px) {
.div-with-background{
background-image: url("background-sm.jpg");
}
}
#media (max-width: 1200px) {
.div-with-background{
background-image: url("background-md.jpg");
}
}
#media (min-width: 1201px){
.div-with-background{
background-image: url("background-lg.jpg");
}
}
What is a reasonable upper limit for screen resolutions to support?
It depends on your visitors. If you use Google Analytics, you can get details on this by going to Users > Technology > Browser & OS and under 'Secondary Dimension' search for 'Screen Resolution'
Hope this helps!
ISSUE SUMMARY:
Hi,
I just purchased Jomsocial + Template Socialize. I use RSForm for my landing page.
I have an image on left and the form on the right side on desktop view.
When I reduce browser to simulate Responsive view, the text come under image but has a width of 50%. This is the width necessary for destopview.
So I add some lines in /templates/socialize/css/template.css
#media (max-width: 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
BUT it doesn't work. width stay 50% instead of 100%. I tried with Chrome & Firefox.
Please see screenshot for better understanding.
Someone has an idea how to fix that?
Try this
#media only screen and (max-width : 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
I think the underlying issue is using max-device-width vs plain old max-width. Using the "device" keyword targets physical dimension of the screen, not the width of the browser window.
For example:
#media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
Versus
#media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. This will work on desktops when the window is narrowed. */
}
How do you add a retina background if you want the background to fit the full area of the element, if the element has an arbitrary width, depending on the users screen size.
#home_data_communication {background:url(../images/home/data-com-bg.jpg) no-repeat; background-size:cover; border-bottom:1px solid #cccccc;}
I can do this
#media
(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#home_data_communication {background-image:url../images/home/data-com-bg#2x.jpg);}
But I dont know what the background size will be. Is there some CSS trick here? How do I have full size backgrounds with retina quality background images?
You seem to already be using background-size: cover; and media queries so I am not quite sure where the issue is. background-size: cover; uses some css magic to alter the size of the image so that it always fits the screen regardless of how large the screen gets. This can cause the image to get blown out of proportion as the screen gets bigger or cause the image to get too tiny on small screens. You may consider using css breakpoints where you will switch to a different version of the image that may fit better as certain sizes.
body {
background-size: cover;
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
body {
background-image: url("/img/image-xs.png");
}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
body {
background-image: url("/img/image-sm.png");
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
body {
background-image: url("/img/image-md.png");
}
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
body {
background-image: url("/img/image-lg.png");
}
}
That snippet uses bootstraps standard breakpoints as well as a custom image for each potential size. You may not be using bootstrap, but it is shown as a proof of concept. The snippet was taken in part from https://scotch.io/quick-tips/default-sizes-for-twitter-bootstraps-media-queries
I'm building a basic web App using PhoneGap for a local company. I have created two images for the header/banner at the top of the App. One is optimised for portrait orientation and one is optimised for landscape.
I want to be able to show either one depending which way the device is held. I have been reading about media queries and frankly its a little bit over complicated for my needs, as JQuery mobile will take care of rest of the functionality for me, and I'm only using one CSS for the whole App.
Does anyone have a few simple lines of code I can add to help solve this issue?
You can use CSS media queries for portrait and landscape orientations, it is not complicated at all:
#media screen and (orientation: portrait) { ... }
#media screen and (orientation: landscape) { ... }
Using these media queries you can override background-image for any orientation.
Official documentation: http://www.w3.org/TR/css3-mediaqueries/#orientation
There are two ways of using it:
Presume you have <div> with class header:
#media screen and (orientation: portrait)
{
div.header { background-image:url(image1.jpg); }
}
#media screen and (orientation: landscape)
{
div.header { background-image:url(image2.jpg); }
}
Alternatively, you may wish to use <img> tags. In this case you will need two of them, and hide/show only one with CSS rules. Let's say, <img> tags have classes header-land and header-portrait respectively:
#media screen and (orientation: portrait)
{
.header-land { display:none; }
.header-portrait { display:inline-block; }
}
#media screen and (orientation: landscape)
{
.header-land { display:inline-block; }
.header-portrait { display:none; }
}
This is an answer about how to use media query, it's a quite easy way to solve the issue. But one prerequisite is that it's ok to show the images as css backgrounds, and not as <img ... />
Pseudo code
.my-banner {
...declarations like:
background-position:
border:
margin:
padding:
}
#media all and (max-width: 320px) {
.my-banner {
background-image: url(portrait.png);
}
#media all and (min-width: 321px) {
.my-banner {
background-image: url(landscape.png);
}
Im creating a mobile adapted Wordpress website. Im using media queries to link to a mobile css file if viewed on a mobile device. When Im posting posts in my blog the images will obviously be to large for the mobile screen. How should I solve it?
You can scale your images by using below css.
img{
max-width:100%;
}
If you have not used viewport in you head tag then use this one:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" />
The above code will scale the site in device viewport, If you want to stop zoom set user-scalable=No
A good solution is to create 'buckets' for different screen sizes and use different background images based on media queries.
For example, you could create 4 buckets with image widths:
400px for 300-500px
800px for 500-800px
1200px for 800-1200px
1400px for 1200px+
In CSS, you could create media queries like so:
#elem {
max-width: 100%;
}
#media all and (min-width: 300px) and (max-width: 500px) {
#elem {
background: url(../images/logo-400.jpg) left center no-repeat;
}
}
#media all and (min-width: 500px) and (max-width: 800px) {
#elem {
background: url(../images/logo-800.jpg) left center no-repeat;
}
}
#media all and (min-width: 800px) and (max-width: 1200px) {
#elem {
background: url(../images/logo-1200.jpg) left center no-repeat;
}
}
#media all and (min-width: 1200px) {
#elem {
background: url(../images/logo-1400.jpg) left center no-repeat;
}
}
Using both 'min-width' and 'max-width' ensures that your device downloads only the images which fit the particular 'bucket'.