On http://www.rosstheexplorer.com/picture-test/ I have two images side by side. The two images have different height to width ratios. I wanted both images to have the same height so gave the images different widths. I used the padding bottom hack to get the images height and width to always stay proportional.
To do this I added the following to the CSS file
.wrapper-133percent-grampians {
width: 33.9%;
float: left;}
.wrapper-75percent-grampians {
width: 60.1%;
float: left;
}
.wrapper-133percent-grampians .inner {
position: relative;
padding-bottom: 133%;
height: 0;
}
.wrapper-75percent-grampians .inner {
position: relative;
padding-bottom: 75%;
height: 0;
}
.element-to-stretch-grampians {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The HTML code is as follows
<div class="wrapper-133percent-grampians" style="min-width: 172px;">
<div class="inner"><img class="element-to-stretch-grampians alignleft" src="http://www.rosstheexplorer.com/wp-content/uploads/2016/05/venus-baths-test2-225x300.jpg" alt="venus baths test2" /></div>
</div>
<div class="wrapper-75percent-grampians" style="min-width:172px;" >
<div class="inner"><img class="element-to-stretch-grampians alignnone" src="http://www.rosstheexplorer.com/wp-content/uploads/2016/05/IMGP0038-300x225.jpg" alt="IMGP0038" /></div>
</div>
I have the 'min:width:172px' statement because I wanted the two images to appear on top of each other when being displayed on mobile devices. When the images were being displayed side by side on mobile devices the images were too small.
When the images appear on top of each other they are 172px wide, yet the width of the mobile browser could be larger than 172px. I do not want to have white space on the mobile browser. How can I instruct the images to occupy the full width of the device WHEN the two images move onto separate lines.
Thank You
This is because you have defined the width as 33% here
.wrapper-133percent-grampians {
width: 33.9%;
float: left;
}
Now I understand that you want the width to be 33% for desktop PC. But the same is being applied to mobile as well. You can separate both by defining different sized for different screen sizes
//for desktop applications
#media screen and (max-width: 499px) {
.wrapper-133percent-grampians {
width: 80%;
float: left;
}
}
//for mobile devices
#media screen and (min-width: 500px) {
.wrapper-133percent-grampians {
width: 33.9%;
float: left;
}
}
Related
I have a problem with width and height of images on the smartphone. I use this code. But I don't know why on the smartphone it also uses the same height of 13em like on desktop screen. All other amartphone definitions work fine.
#media only screen and (max-device-width: 60em) {
/* STYLES HERE for DEVICES with physical max-screen width of 60em */
article img {
float: left;
margin-right: 0.2em;
width: 100%;
height: auto;
}
}
article img {
float: left;
margin-right: 0.2em;
height: 13em;
}
Try putting the media query under the article img.
Not related but you don't need to repeat float and margin-right since you're not overriding them.
I wanna make a image responsive but only till to an specific width of the screen. Say if the user starts from 300px width to enlarge the screen the image should be responsive and should grow with the screen width. Once a width of 1440 px is achieved the image should stop with adapting the scale. Imagine a image in the following code
<style>
.left-main {
flex: 30%;
background-color: #ffffff;
}
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
}
</style>
<div class = "left-main">
<img src="images/Developer_Icon.svg" class="icon-position" width="178" height="180">
</div>
At an specific display width the image should stop to be "responsive" and should hold the last size which the image had. How can I do that?
You can use max-width css property. Documentation
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
max-width: 1400px; // anyvalue here
}
.image-position{
max-width: Enter width of your choice here;
}
Max width in css is used to define the maximum width an element can have. The element will stop becoming wider after the max-width is achieved.
Thanks😊
You can use two ways. First, check what is width of image in specific window width and then use this:
#media screen and (min-width: 1440px) {
.image {
width: 600px; //define image width
//here set all other parameters, fixed position etc.
}
}
Second way is to use JavaScript. When window is in needed width then get image's width and write it into style. If you need, I can add JS code for this.
<style>
.left-main {
flex: 30%;
background-color: #ffffff;
}
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
}
#media screen and (min-width: 1440px) {
.icon-position {
width: 700px; /*Instead of width: 700px, you can define you own desired width of the image, after 1440px screen size.*/
}
</style>
<div class="left-main">
<img src="images/Developer_Icon.svg" class="icon-position" width="178" height="180">
</div>
I have two divs. One is 15%, and the other is 76%. I want to hide the 16% div on mobile phones. That is being achieved using this.
class="navbar hidden-xs"
And the code is as follows
#right {
top: -1px;
position: fixed;
background: blue;
width: 15%;
}
However, when I change the screen size, the box is getting hidden but the space remains there. I want to make the width of the content to 100% in mobile-only. How can I achieve this? My code for the content is as follows:
#content {
float: right;
width: 76%;
}
#media (max-width: 767px) {
#right {
display: none;
}
#content {
width: 100%;
float: none
}
}
I have some images on my webpage. I originally put their sizes in pixels, e.g.:
<IMG src="image.png" width=700px height=100px>
When I used different machines with different screen resolutions, sometimes the page didn't look like I wanted it to.
I then switched to set the dimensions using percentages rather than pixels, e.g.:
<div class="logo_container">
<IMG src="image.png">
</div>
and
.logo_container img {
padding: 15px;
width: 37%;
position: relative;
}
The page now looks how I want it, but if I start to resize my browser window, the images shrink (whilst maintaining aspect ratio). I don't want this to happen.
I want the web page to look correct when the browser is full screen, but then I don't want images to shrink.
Thank you.
You should change the css based on the screen width:
<div class="logo_container">
<IMG src="image.png">
</div>
<style>
#media screen and (max-width: 540px) {
.logo_container img {
padding: 15px;
width: 100%;
position: relative;
}
}
#media screen and (min-width: 540px) and (max-width: 780px) {
.logo_container img {
padding: 15px;
width: 50%;
position: relative;
}
}
#media screen and (min-width: 780px) {
.logo_container img {
padding: 15px;
width: 30%;
position: relative;
}
}
</style>
Use em.
<img src="" alt="">
CSS:
.logo_container img {
width: 1em;
}
em is constant between all devices - it is always the same size in real life: see https://www.w3schools.com/cssref/css_units.asp for more info.
Just set the width of the image to a fixed amount of pixels:
.logo_container img {
width: 200px;
}
I'm fairly new to responsive web design, so don't beat me up too badly.
I have a currently fixed-width gallery page that is 1000px wide. The 1000px outer div has 30px padding and 30px between each pair of images. So I've got 910px of space available for each pair. The page might look like this:
(30px spacing)(500px img)(30px spacing)(410px image)(30px spacing)
(30px spacing)(480px img)(30px spacing)(430px image)(30px spacing)
(30px spacing)(450px img)(30px spacing)(440px image)(30px spacing)
...etc.
I'd like to convert it to a responsive page so that the images scale down as the browser window shrinks and ultimately stack on top of each other once the browser window drops below 640px.
The only way I know to make this 640px change is inside a stylesheet. Is this the only way I can do this? Am I going to have to define styles within the stylesheet for every image?
For example, for a 480px wide image:
img.img480 {
width: 48%;
float: left;
}
#media screen and (max-width: 640px) {
img.img480 {
width: 100%;
max-width: 480px;
float: none;
}
}
Here is an example of the effect you're asking for with responsive design.
A couple things to note:
margins are bad, use padding and wrappers instead
floats are bad, use inline-block instead
(Demo)
html, body {
margin: 0;
}
.wrapper {
padding: 0 15px;
font-size: 0;
}
.img-wrp {
width: 50%;
padding: 0 15px;
display: inline-block;
box-sizing: border-box;
}
.img-wrp img {
width: 100%;
}
#media screen and (max-width: 640px) {
.img-wrp {
width: 100%;
}
}
<div class="wrapper">
<i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
<i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
</div>