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
Related
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>
My #media only screen and (max-width:860px;){ doesn't work on the browsers when I put the html-code inspector on mobile.
its mostly explained on this image.
It does work on my other #media codes for example:
#media only screen and (max-width: 1000px) {
.extramargin {
margin-left: 0;
}
#click {
margin-left: 40px;
width: 90%;
}
}
If more code is needed I can send more code. I don't know what part of my code cause I have 1200 lines of code and have to search a time before I will find everything to make a code snippet. But if its needed I can do that.
You have to tell the browser that you want the width of device to be the ACTUAL width of the device. So, you have to set the viewport.
Just include this in the <head> section
<meta name="viewport" content="width=device-width, initial-scale=1" />
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
I am using the meta viewport to make Web pages adapt to mobile devices with the usual tags like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
However many of my site users have large screens. The used viewport width is 1025px, so with larger screens, say width larger than 1920px, the users would prefer to make better use of the left and right space outside the main contain that is always empty.
Is there way to make the zoom scale of the page adapt to the viewport width when it is higher than 1025px?
I suspect that some combination of meta viewport tag attributes and some media queries it may be possible but I could not find anything to make it responsive to large screens, only to smaller screens.
You just need to add another media-query to handle high resolutions
Demo for >1280px
#media only screen and (min-width : 1280px) {
#Container {
width: 95%;
}
#PageContent {
margin: 0px auto;
max-width: 100%
}
#PageInfo {
max-width: 100%;
}
.InfoContent{
max-width: 100%;
}
.c640{
width:20%;
}
.c640 .box{
width:100%;
}
#navigation{
width:auto;
}
.box{
float:none;
}
}
It's not perfect but you can use this break-point add add more style and fix whatever doesn't look good on higher resolutions.
Hello guys i have made a website by the help of Dreamweaver in HTML, CSS and JavaScript now my screen is 15.4 inch whenever i m opening in small screens so it give me an scroll bar to see whole of my website in the width form.
i have used PX with divs that i created my whole website instead of percentage but i don't know why i m facing this problem.
.wrapper
{
width:1320px;
height:760px;
border:solid 1px #000;
margin:0 auto;
background:url(images/Background_Image.jpg) no-repeat;
}
.wrapper .logo
{
background:url(images/logo.png) no-repeat;
width:395px;
height:180px;
margin-left:323px;
margin-top:10px;
float:left;
// same method for other divs
}
Add this meta tag to your head
viewport - most important and most useful of all the meta tags. width controls the width of viewport of device, initial-scale loads the initial zoom level when page loads
<meta name="viewport" content="width=device-width, initial-scale=1">
Check Mozilla Docs - Viewport
make use of media queries
#media screen and (min-width: 700px) and (orientation: landscape) { ... }
Mozilla Docs - Media queries
Percentage/em is good if you want your site to be responsive