I have created a website and there is an image (640x640px) but on mobile you have to side scroll in order to see the full picture. Does anyone know how I could change the size on mobile but make it stay the same on desktop?
this is what i have so far
<pre>
<div>
<img style="object-fit: scale-down;" src="gifs/preview.gif">
</div>
You want to use:
img {
max-width: 100%;
}
so what you can do fir this is to give the image a classname and then use that classname within a #media query
#media only screen and (max-width: 600px) {
.classname {
width: 200px;
height: 200px;
background-size: 100% 100%;
}
}
and then give it whatever size you feel works best for that size you want to achieve
try incorporating #media queries into you css file. It will look as follows:
#media only screen and (max-width: 600px) {
img {
width: 50%;
}
}
So in the above code we are creating an at media query which will trigger when the screen is less than or equal to 600px, then the following will happen, which in this case, is it will take only 50% of the parent div.
Here is a resource if you still do not understand: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hope this makes sense :D
Related
I have a web project, how do I make the images on my website responsive in any display? Will this is my code is produce an error?
html code
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code
#media screen and (max-width: 750px) {
.img-load {
width: 100%;
height: auto;
}
}
You have a few options when it comes to making your image responsive.
With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.
Your image is not longer responsive if you start using px as a unit of measure for your height and width.
You do haven't need to #media, if you want image width to cover the entire page width, in any device. only:
HTML:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS:
.img-load{
width:100%;
}
You must use #media, only when you want your image to have different widths in any device.
For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:
CSS:
.img-load{
height: auto;
}
#media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
#media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
I have an example of a website for this question (because I can't figure a way to ask it..)
https://livedemo00.template-help.com/opencart_62166/
As you can see, if you resize the browser width, only the margins resizes, and not the divs inside it.
Is there a way to acheive the result in CSS? Do I have to use Javasciprt to achieve that? Thank you.
In that example the developers are using media breakpoints. These apply different styles to elements depending on the browser window size. A tutorial is here
Basically your CSS looks something like this:
#media screen and (min-width: 500px) {
body {
width: 800px;
}
}
#media screen and (max-width: 500px) {
body {
width: 300px;
}
}
So, i'm a beginner html/css coder and trying to make a simple site.
Now I have a neat background that behaves perfectly.
But when adding a logo at the top center it looks perfect on the current window size. But when I resize the window, half of the logo is cut off.
My CSS style:
.header-logo {
background: url(images/header-logo.png);
position: relative;
height: 200px;
margin-left:auto;
margin-right:auto;
background-size:cover;
width: 971px;
z-index: 2;
}
I suppose there is an auto scale css/js setting for that but i'm not lucky enough to find it.
All help is appreciated!
Louis
The issue is these two lines of code:
height: 200px;
width:971px;
When you use "px" it's a fixed amount of pixels which means it doesn't change based on screen size. If you use "em" instead then the image will change based on the screen size of the visitor.
Here are two quick references that I hope may be helpful.
http://www.w3schools.com/cssref/css_units.asp
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
To fix it you might do something like this:
height: 100em;
width:486em;
(Don't use my exact values of course.)
EDIT:
Alternatively it may be good to use a percentage like this:
width: 971px;
max-width:100%
EDIT 2:
It was pointed out to me that you'd probably want to include this line as well:
height:auto;
It happens because your width is setted to be fixed on 971px, you should use width: 100% and set max-width or at least use #media to set your logo width.
using #media:
#media screen and (min-width: 480px) {
.header-logo{
width: 250px;
background-position: center;
}
}
It seems like you want a 971px wide logo and you have an issue when the screen size is less than that because the logo gets cut off.
What you need is a media query like this one and place it at the end of you css
#media (max-width: 971px) {
.header-logo {
width: 100%;
}
}
That way any screen size under 971px will change the width property to 100% of screen size.
You don't need to redeclare all the properties of the class in the media query, it will just change the ones that have to adapt to the new screen size.
Read more on media queries here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I'm trying to develop a responsive webpage. I'm supposed to show two different images in the desktop view and the mobile view. I tried to change the image using the #media property of CSS, like this.
#login-top-shadow{
max-width: 100%;
#media only all and (max-width: 700px) {
content:url("img/login_top_shadow_mobile.png");
}
}
The image which is supposed to be shown in the desktop view is given for the src attribute of my image.
While reducing the size of the page, the image does not change. It changes in the CSS properties in the console but not in the html.
Is this the correct approach to place images while placing images in responsive web- design?
Attaching the screen shot of my console.
I suggest you that you create a div and then set it's background-image to something.
https://jsfiddle.net/6hj41pft/
<div></div>
div {
background-image: url('http://images.clipartpanda.com/clipart-sun-decorative_sun_clip_art_23259.jpg');
height: 400px;
width: 400px;
background-size: cover;
}
#media screen and (min-width: 480px) {
div {
background-image: url('https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1');
}
}
I have a div (content area) with an image background, now if the div height extends to more than 600px I would like to display a different background image. Is that possible with just CSS?
here is an example i am giving, try changing the height of the result window to see the change:
.facet_sidebar{
background: url('http://www.hexaware.com/brandresourcecenter/images/images_compass.png');
height: 100px;
width: 100px;
}
#media (max-height: 600px) {
.facet_sidebar {
background: url('http://www.hexaware.com/brandresourcecenter/images/images_gears.png');
width: 100px;
}
}
jsfiddle demo
Media queries can be used to change anything.
Hope it helps
Simple answer: No.
More complex answer: It depends. For example you could set the height of the div-container relative to the height of the viewport and resize that. At some point the div will grow to a height > 600px. You could then watch out for the height of the viewport and base a media-query on the value.
#media (min-height: viewport-height when div is 601px high)
your styles {}
}
If that solution is not what you are looking for, then you have the option of looking for the height of the div with JavaScript and thereby swap the background image.
yes it is possible through the media inquiry
#media screen and (max-device-width: 768px) {
.div {
width: 960px;
background: url(...);
}
}