I have an image that is a link also at the top of my website, like a banner, and when I go on my mobile to look at it, it stays the same size. How do I make it smaller for mobile devices?
Assuming the rest of your website is responsive you can just add a width of 100% to the image.
So for example, if your image had a class of 'my-img'
.my-img {
width:100%;
max-width:600px;
height:auto;
}
Or if you wanted to do it inline
<img src="" class="my-img" style="width:100%;max-width:600px;height:auto" />
probably it allready is responsive, even if you didn´t notice. you must have something like this in your code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Add media queries on your code like:
#media screen and (max-width: 600px) {
#logo{
width: 100%;
height: auto;
//in case you want a max-width-> max-width: 200px;
}
}
1. Use Bootstrap js and Bootstrap CSS in that use media queries according to
screen
2. width do the coding or use class xs sm md lg.
# Mobile
only screen and (min-width: 480px)
# Tablet
only screen and (min-width: 768px)
# Desktop
only screen and (min-width: 992px)
# Huge
only screen and (min-width: 1280px)
Please make sure that you have the following tag in your web-page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and then add image like following
<img src="your image path" alt="" class="heroImage">
<style>
.heroImage{width: 100%;max-width: 100%;}
</style>
Related
I try to load my resizes images using HTML srcset and sizes, but the browser still loading only the larger image.
My HTML looks like that:
<img
srcset="/logo-146x30.jpg 146w, /logo-122x25.jpg 122w, /logo-97x20.jpg 97w"
sizes="(min-width: 651px) 146px, (min-width: 361px) 121px, 97px"
src="/logo-146x30.jpg"
alt="alt text"
/>
I have also try to opposite media queries like:
<img
srcset="/logo-146x30.jpg 146w, /logo-122x25.jpg 122w, /logo-97x20.jpg 97w"
sizes="(max-width: 360px) 97px, (max-width: 650px) 121px, 146px"
src="/logo-146x30.jpg"
alt="alt text"
/>
In both cases, I always get the image /logo-146x30.jpg.
I have tried re-load the browser in scaled downsize, but either way, the only loaded image is the /logo-146x30.jpg.
Also the viewport meta is like that:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"
>
Do you see anything wrong with what I have done so far?
Instead using srcset and sizes, use CSS media queries. This is from the top of my mind, but try somenthing like (this is based on your first image):
HTML:
<div class="image" />
CSS:
#media screen and (min-width: 651px) {
.image {
background-image: url(/logo-146x30.jpg);
}
}
#media screen and (min-width: 361px) and (max-width: 650px) {
.image {
background-image: url(/logo-122x25.jpg);
}
}
Remember to use min-width and max-width in #media so it won't be overriden.
Try using min-width and max-width in your solution also.
I have a image random script on folder /1
On my public_html, i have one index.html, only to show the random image script:
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><img src="./1" width="100%" height="100%">
I have to do that, because before, on mobile devices, my images are bigger that the screen.
Now, i have problem solved on mobile devices. The images are 100% scale on screen.
But on desktop, the images are way too big.
Anyone know how to solve?
Use #media in CSS as per your screen size:-
img{
width:50%;
}
#media only screen and (max-width: 600px) {
img {
width:100%;
}
}
No you have to use CSS for any kind of style and it also contains of 3 type. Use as per need
img{
width:50%;
}
#media only screen and (max-width: 600px) {
img {
width:100%;
}
}
As per need this is perfect answer
I want to hide a div on all devices with a screen resolution that is less than 1024. This is the div that adds the space after 3 images:
<div class="page-banners clearer"> </div>
And this is the page:
http://m.theseolounge.co.uk/
and this is the code I am using:
#media only screen and (max-device-width :1024px)
{
.page-banners
{
display: none !important;
}
}
What am I doing wrong?
Make sure you have a <meta> viewport tag in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Don't use !important for the style, and use max-width instead of max-device-width, like this:
#media only screen and (max-width:1024px){
.page-banners {
display: none;
}
}
I have a website which must be responsive for mobile phones. I've created it using my desktop.
When I adjust browser windows it's working perfectly but when I check it on my mobile phone(Microsoft-640), it seems not responsive to the mobile view.
PLease you can add meta tag viewport for responsive as under:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will be helpful to make your website as mobile view by your own.
The Media Queries in CSS3 take this idea and extend it. Rather than looking for a type of device they look at the capability of the device, and you can use them to check for all kinds of things.
For example:
Width and height (of the browser window)
device width and height
orientation – for example is a phone in landscape or portrait mode?
resolution
Linking a separate stylesheet using media queries
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
The first way to use media queries is to have the alternate section of CSS right inside your single stylesheet. So to target small devices
we can use the following syntax:
#media only screen and (max-device-width: 480px) {
}
Example code:
#media only screen and (max-device-width: 480px) {
div#wrapper {
width: 400px;
}
div#header {
background-image: url(media-queries-phone.jpg);
height: 93px;
position: relative;
}
div#header h1 {
font-size: 140%;
}
#content {
float: none;
width: 100%;
}
#navigation {
float:none;
width: auto;
}
}
For some more reference: 1 click me please, 2 click me too
On my website I have the following meta tag :
<meta name="viewport" content="width=device-width, initial-scale=1">
The following HTML :
<body>
<div class="content">
<div class="inner clearfix">
</div>
</div>
</body>
And the following css :
.inner{width:1060px;}
#media screen and (max-width:640px){
.inner{width:100%;}
}
My problem : on Ipad, the width of the page is blocked at 768px while my site is 1060px wide. I would like the website to fit the width of the iPad, but I need to keep a 100% width on iPhone.
Can you help me please?
Thank you in advance!
This will cover both portrait and landscape.
#media screen and (min-width: 768px) and (max-width: 1024px) {
.inner { width: auto; }
}