On a full sized screen, I have three images in a column format that should, all together, take up the entire screen. Right now, my code works, in that the the images take up the width of the screen and on screen less than 600px, the images stack one top of one another. But the issue is that the images are not taking up the entire width. The code is below and I am using a sample pic that is huge, but it still doesn't show the entire height of the image.
EDITED TO TAKE OUT MY ORIGINAL CODE
Okay, per comments, I have changed the code to look: http://jsfiddle.net/zx11x99x/
.wrapper img{
float:left;
width:100%;
}
#media screen and (min-width: 600px) {
.wrapper img{
width:33%;
}
}
<div class="wrapper">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
</div>
The problem is still that the images are not full screen, which I cannot seem to figure out.
In short, I am trying to go for this, but with the columns stacking on mobile
http://jsfiddle.net/9udg7qxg/
example example example example example example example example example http://jsfiddle.net/zx11x99x/
code
Updated:
* { padding: 0; margin: 0; }
#media (max-width:1400px) and (min-width:600px) {
.wrapper > img{
float:left;
max-width:33%;
}
}
#media (max-width:600px) and (min-width:100px) {
.wrapper > img{
width:100%;
display:block;
}
}
JSFIDDLE
Just also make sure you use the correct Meta tag.
Related
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
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%;
}
}
Currently, I'm designing my website and having a bit of trouble with the placement of my components. I currently have two main divs on my homepage, one of which is a fixed sidebar (Info) and the other is for content (Content). I want to make it so that when the window width shrinks, my divs don't get squished together. Ideally the sidebar (Info) moves to the top of the screen and my content (Content) moves beneath it. Attached is an image that describes my current setup as well as what I want to achieve. Any help would be greatly appreciated.
This is the best way that I found to do it,
#info{
position:fixed;
height:100vh;
width:25vw;
}
#content{
margin-left:25vh;
height:100vh;
}
#media (max-width:800px) {
.app #info {
position:relative;
display:block;
height:30%;
}
}
#media (max-width:800px) {
.app #content {
display:block;
margin-left:0px;
width:25vw;
}
}
I added an id to the info and content sections to format them separately and used media queries (#media) to change the way styles of the divs once the screen hit a certain width. I chose max-width:800px arbitrarily, but you can change it to whatever suits your needs best.
The following media queries may be what your need:
#media (orientation: landscape){
...................
}
#media (orientation: portrait){
...................
}
Is there a way to have an image set to a specific size while using a desktop browser, but have it automatically resize to your screen using a mobile device?
I currently just have the image hardcoded to a specific size in HTML.
<img src="URL" alt="Cool Link" style="width:720px;height:100px;border:0;">
I'm open to trying HTML/CSS/JS etc. Thanks!
You sholud add class attribute to img tag and then add below css for image
<img src="link" alt="Cool Link" class="anyofimgclass">
.anyofimgclass{
display: block;
max-width: 100%;
height: auto;
}
As Arti Rana said, you should create a class first.
Then you can use #media attribute, to set style for specific max-width. You can check this out here:
CSS #media Rule
P.S. I recommend you to use containers (div) in order to create classes.
.box {
display:inline-block;
width:100%;
text-align:center;
}
img {
display:inline-block;
width:768px;
margin:0 auto;
}
#media only screen and (max-width: 767px) {
img {
width:100%;
}
}
<div class="box">
<img src="https://www.myhappyenglish.com/x9walos9f/uploads/2013/05/placeholder.png">
</div>
https://jsfiddle.net/Sampath_Madhuranga/6t2snwa3/6/
This works fine..Try this
This is my first question over here, I searched the site but I really couldn't find a decent answer. My problem is pretty specific.
On full resolution my homepage consists of four columns, however, when the window-width gets below 960, it transforms in to two columns, this is the code I used:
The HTML:
<div class="columns">
<div class="begin col14">
<h2>Title</h2>
Content
</div>
<div class="begin col14">
<h2>Title</h2>
Content
</div>
<div class="begin col14">
<h2>Title</h2>
Content
</div>
<div class="begin col14">
<h2>Title</h2>
Content
</div>
</div>
The CSS:
#media all and (max-width: 960px) {
.begin {
width:46%;
margin:0px 2% 2em 2%;
float:left;
}
}
The problem is only showing on a browser-width of around 619px, then the first column on the second row jumps to the next row.
For an example, please check: www.visiamedia.nl
I hope someone can help me out, it really bothers me.
Greetings
That's because your boxes are different heights when resized - and first one is pushing other floats aside. You could potentially fix the issue by setting a media query with a specific height between about 515px to 640px:
#media all and (min-width: 515px) and (max-width: 640px) {
.begin {
height: 190px;
}
}
That's because you have a width of 46%. Change it to 21%
#media all and (max-width: 960px) {
.begin {
width:21%;
margin:0px 2% 2em 2%;
float:left;
}
}