I'm a newbie to web development. I'm using react to create a responsive split screen signup page, but when I adjust the height of the screen size, the form can not be shown entirely. Does anyone know which part of my css is wrong or missing?
Image: https://i.stack.imgur.com/WCv6I.png
The code is on the sandbox. https://codesandbox.io/s/immutable-bash-19wgq?file=/src/components/SignUp.js
2 important things to notice:
100vh as a height will give the element the height of the browser's window
overflow: when an element is higher than it's parent element, if the overflow is set to hidden, part of the content may not be visible.
I added a rule at the bottom regarding the screen height as such(here just for demo):
#media screen and (max-height: 500px) {
.split-screen {
flex-direction: row;
height: 100%;
}
.sign-up-container .right {
display: flex;
width: 50%;
height: 100%;
overflow: visible;
}
.sign-up-container .left {
min-height: 500px;
}
}
I have 100% height and width container, then means if the resolution of the any screen is 100%, then the elements inside of the container is compressing if the resolution is not compatible in my position design, I want to have a responsive container with responsive elements inside of it but the elements will not compress. (Example try to resize the stackoverflow website, the elements is still the same.)
Here's my example code:
.container {
height: 100%;
width: 100%;
background-color: gray;
}
h1 {
text-align: center;
}
<div class="container">
<h1>Responsive Container</h1>
</div>
I am not sure about what is actually needed, if you want to restrict the elements from not being responsive above or below a particular value, you need to fix the container element to a fixed pixel width when the width is less/greater than particular screen value using media queries.
Refer CSS Media Queries
CSS:
.container {
height: 100%;
width: 100%;
background-color: gray;
}
h1 {
text-align: center;
}
#media only screen and (max-width: 500px) {
.container {
width: 500px;
}
}
In the below JSFiddle you can see that the elements is set to fixed width (500px) when the screen width is less than 500px.
JSFiddle Demo
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(...);
}
}
img {
max-width: 100% !important; /* Set a maxium relative to the parent */
width: auto\9 !important; /* IE7-8 need help adjusting responsive images */
height: auto; /* Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
display: block;
-ms-interpolation-mode: bicubic;
}
The above CSS is taken from Twitter Bootstrap which allows for responsive images. The only problem is this has no effect in Firefox and IE.
In the following case:
<div class="row-fluid">
<div id="logo" class="span4">
<img src="<?= get_template_directory_uri() ?>/assets/images/logo.png" />
</div>
</div>
http://dev.netcoding.net/lowsglass/about-us/ - Here is a page showing the problem.
In Firefox or IE, shrink the page to below 432px and you will see that the images do not follow max-width anymore (while above 764px they do).
How can I fix this – without using image containers – to make responsive images work in Firefox and IE?
I've struggled a lot with Firefox / IE and max-width, specifically when on elements of display: inline-block. I use the CSS only solution below to add my fixes.
// Styles for Firefox
#-moz-document url-prefix() {
#logo img {
width: 100%;
}
}
// Styles for IE10
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#logo img {
width: 100%;
}
}
Firefox fails to scale images with max-width/height if width/height is not defined. So there are two ways.
1. Set width and max-width:
width: 100%;
max-width: 100%;
2. Use max-width and max-height in vw and vh:
max-width: 90vw;
What means the image will have max 90% of visible width. Have fun!
Instead of width:auto, try width:100%.
Best,
Cynthia
Actually, the problem isn't the img tag being affected, but the span* containers. When Bootstrap Responsive gets to a certain point, it turns off floating, and sets width to 100%. When that container pops back to 100%, the child within (your img tag) does exactly what you told it to do, which is expand to max-width of 100%.
Look at this from responsive.css... above the declaration in the stylesheet, you'll see this:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: none;
margin-left: 0;
width: 100%;
}
That is what is causing the img to "resize" ... its container no longer shrinks past a certain point, due to the way Bootstrap's responsive styles are set up.
To block this, you could either modify the Bootstrap stylesheet (in which case you will have to redo the change anytime you want to update your Bootstrap files), or you can, in your own stylesheet, do something like the following:
/* Landscape phone to portrait tablet */
#media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: inline-block;
float: left;
}
That will put the floating back, however, you're still left with width as an issue, as the default Bootstrap style at that screen-width is trying to set width to 100%. You could try setting width:auto and then hopefully the widths for each specific span-step (.span1, .span2, etc.) will be allowed to take over, but you'll really have to test it out to see what is going to work best for your situation.
Bumped in similar problem after implementing large amount of site design using Bootstrap framework and only Chrome for debug... Biiig mistake © :) It appeared, that cool fluid Bootstrap styles didn't work for images in IE and Mozilla at all. All images were not resized and had original width, sometimes much wider than I've expected to see...
I had a lot of similar places with two columns of divs - span6 for left column and span6 for right one (those are styles for fluid Bootstrap grid). Sometimes in those columns images were placed between text lines, and as you see, images didn't resize well in IE\Mozilla and all of the cool design became not good at all :(
After googling and trying some advices from github I've decided to use jQuery :) I added class to column container (imageContainer for fluid span12 row), and added classes 50perc for images which I needed to resize properly (size of each image should be 50% of container's size). And here's the code:
$(function(){
var cont = $('.imageContainer');
$('.50perc').each(function(i, el){
$(el).width(cont.width() / 2);
});
p.s. Actually it will be much effective to use this function in window.resize event handler :)
Ran into the same problem and still haven't found a fix or CSS only hack, except for forcing width: 100% at small browser sizes, when the natural width of the image will usually be larger than the width of the page (here I've assumed I don't have any images narrower than 480px):
img
{
width: auto;
max-width: 100%;
height: auto;
}
#media screen and (max-width: 480px), only screen and (max-device-width: 480px) and (orientation: portrait)
{
#-moz-document url-prefix() {
/* Firefox doesn't respect max-width in certain situations */
img
{
width: 100%;
}
}
But that will still force images that have naturally smaller widths to get blown up, which is bad. So at that point, if Javascript is feasible or already in use, I would add this to hit every image:
PSEUDO CODE:
$('img').css('max-width', this.actualFullSizeWidth + 'px');
...which should override the CSS max-width rules, and guarantee the image doesn't get larger than it's actual width.
Responsive images for Firefox, IE, Chrome. Simple solution that works in Firefox
<div class="article"><img></div>
.article {background: transparent 0% 0% / 100% auto;}
.article img {max-width: 100%;}
For my personal site http://stevengeorgeharris.com I have created a single page design with several divs stacked on top of each other. The divs are width: 100% and height: 100% so they scale with the browser, within each div I am using flexslider to create a fullscreen slideshow.
My problem is when the browser gets narrower the images within the flexslider container scale down leaving whitespace below.
This is the CSS for the flexslider image.
.flexslider .slides img {width: 100%; height:auto; display: block;}
Is there anyway to make the images act like this http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php
For this you should use media query. You can read more about media query here : https://developer.mozilla.org/en-US/docs/CSS/Media_queries
I did what you wanted to do; with another picture and you can see the final result here: http://jsbin.com/olakit/2
Here is the code (the original picture is 1024 x 683 px ):
img {
width: 100%;
height : 100%;
}
#media (min-width: 2000px) {
img{
height: auto;
}
}
Notice that the "min-width" should be more than the picture's width.