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'.
Related
Look at this page
There are 3 images on the right. When I look at my site with a mobile device, those 3 images stay there instead of centering in the middle, and so they make the page overflow/have a left-right scroll.
Any ideas on how I can fix it so that the images get centered when the page is viewed on mobile?
Thank you
Use a CSS media Query
The code used in the example you gave is
#media (max-width: 600px)
.about-us-images {
width: 100% !important;
}
The #media (max-width: 600px) part is telling the page to only apply those styles when a page width is 600px or less.
Adjust it to Your Preferences
You can adjust that to any size you wish or use the reverse to style any page that is 600px or wider using: #media (min-width: 600px).
Try this—
#media (max-width:600px) {
.about-us-text,
.about-us-images { width:100% }
}
Just add a class to the images div, and change the breakpoint as you wish. Looks like this now—
Here is what I had to do.
#media (max-width:600px) {
.about-us-text {
float: none !important;
width:100% !important;
}
}
#media (max-width:600px) {
.about-us-images {
width: 100% !important;
}
}
That did it.
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!
I have a bunch of media queries that load a different background image depending on the width of the screen. For some reason my One plus 2, with a screen width of 1080 in portrait is triggering the (max-width: 400px) clause. Why?
I suspect it is something to do with pixel density. If this is the case, is there a list somewhere of the most common screen sizes when taking pixel density into account?
#media screen and (max-width: 1080px) {
.mainImage {
background-image: url('shop-home-vertical-1080.jpg');
}
}
#media screen and (max-width: 800px) {
.mainImage {
background-image: url('shop-home-vertical-800.jpg');
}
}
#media screen and (max-width: 600px) {
.mainImage {
background-image: url('shop-home-vertical-600.jpg');
}
}
#media screen and (max-width: 400px) {
.mainImage {
background-image: url('shop-home-vertical-400.jpg');
}
}
Edit:
The viewport I have is:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Using devtools to inspect the full width of elements on the screen. The screen width seems to be 360px. Exactly 1080 / 3.
It looks like it could be a problem forgetting to set a viewport. Try including this into your head <head> <meta name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
This is caused by the device pixel ratio, which down scales the actual device ratio.
Here is a list of phones and the actual display resolution used by media queries. It doesn't include the One plus two (which has a ratio of 1:3)
The following allows me to target the one plus two accurately.
#media screen and (max-width: 360px) and (orientation: portrait) and (min-resolution: 3dppx) {
.mainImage {
background-image: url('shop-home-vertical-1080.jpg');
}
}
As I understand it. In most circumstance I shouldn't do this. But in this case it allows me to download a higher resolution image for screens that can take advantage of it.
Just discovered that dppx is not well supported yet. This won't work on safari.
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;
}
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a background image on my desktop site. However, because of the size it makes the mobile site slow and out of proportion. Is it possible to remove the background image for the mobile site or at least make it responsive?
Actually to hide background image here is the simple css:
background-image: none;
Here is the solution for mobile, i used media queries
HTML
<div class="bgimg" >
</div>
External CSS
/* Show in Large desktops and laptops */
#media (min-width: 1200px) {
.bgimg {
background-image: url('../img/your-eternity.jpg');
background-repeat: no-repeat;
height: 800px;
width: 1000px;
background-size:100% auto;
}
}
/*Hide in Other Small Devices */
/* Landscape tablets and medium desktops */
#media (min-width: 992px) and (max-width: 1199px) {
.bgimg {
background-image: none;
}
}
/* Portrait tablets and small desktops */
#media (min-width: 768px) and (max-width: 991px) {
.bgimg {
background-image: none;
}
}
/* Landscape phones and portrait tablets */
#media (max-width: 767px) {
.bgimg {
background-image: none;
}
}
/* Portrait phones and smaller */
#media (max-width: 480px) {
.bgimg {
background-image: none;
}
}
Hope helps someone.
The code below is adapted from a great blog post by Tim Kadlec that walks through the various scenarios for conditionally displaying a background image.
For your scenario, the mobile version is set to match the width of its parent element. Depending on your layout, you may need to set/restrict the size of the element that #container is in.
If you elect to hide the background image on mobile, then the first style block would go inside the first media query and the second one could be eliminated. As popnoodles mentioned, posting some code would make it easier to provide a more specific solution.
<div id="container"></div>
#container {
background-image: url('images/bg.png');
}
#media all and (min-width: 601px) {
#container {
width:200px;
height:75px;
}
}
#media all and (max-width: 600px) {
#container {
max-width: 100%;
background-size: 100%;
}
}
You can use media query to specify different css rules for desktop version of site and mobile site .
Refere How to use CSS media query to scale background-image to viewing window
Using media queries depends on resolution of the screen we can set the styling .
Refere https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries for more information about media query .
You can also refer
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ for creating mobile version of your website .