I have a div that is 700px high, under that div is a 200px picture. I want to allow scrolling for the first 700px but then no more. So on smaller vertical resolutions users can scroll to see the first 700px but then the rest is "cut off".
On the other hand users on large vertical resolutions will see the 700px div and the picture all with no scrollbar.
How can it be done?
You can use css media queries to use different css on different window size.
#media all and (min-width: 350px) and (min-height: 950px) {
// css for a window size of 250px height and 750px width or higher
}
So you want to do something like this?
.content {
height: 700px;
width: 300px;
}
.main {
height: 700px;
width: 100%;
background-color: red;
}
.pic {
display: none;
height: 200px;
width: 100%;
background-color: blue;
}
#media all and (min-height: 950px) {
.content {
height: 900px;
}
.pic {
display: block;
}
}
Related
I can find multiple half solutions, but I am looking for a complete solution to my issue. I have a div that I would like to be centered in the screen with a fixed aspect ratio, that div should in essence always be completely visible, so that div is always the largest it can be whilst keeping the aspect ratio. regardless of resizing the window vertically and horizontally.
There is a codepen here: https://codepen.io/william-bang/pen/ZjyWRd
That I created, this only solves the issue horizontally but not vertically. I have managed to get it working with and but sizing behaves differently for that. I am looking for a CSS solution, although I am open to a JS solution, if anyone is absolutely sure that no solution exists.
body {
width: 100%;
height: 100%;
}
.wrapper {
width: 40%;
height: 100%;
margin: auto
}
.img {
padding-top: 50%;
width: 100%;
background: #ccc;
text-align: center;
}
<div class="wrapper">
<div class="img">
**IMG HERE**
</div>
</div>
I would be grateful for any suggestions, this has had me stumped for many hours. thanks in advance :)
Update, the div needs to maintain its aspect ratio on a varying page and at all times be its own maximum size.
#Grenther Thanks for your response, I tried modifying the answer you gave to do it purely in CSS and not having to use a CSS preprocessor. That went really well, until I realized that CSS media queries does not support standard CSS variables, otherwise the method you proposed would have been possible without SCSS but perhaps you already knew that.
:root {
--ogW: 1600;
--ogH: 900;
--ratio: calc( var(--ogW) / var(--ogH));
}
body {
width: 100%;
height: 100%;
}
.ratio {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
#media screen and (max-width: 177vh) {
width: 90vw;
height: calc( 90vw / var(--ratio));
}
#media screen and (min-width: 177vh) {
width: calc( 90vh * var(--ratio));
height: 90vh;
}
}
.div {
width: 100%;
height: 100%;
background: red;
text-align: center;
}
<div class="ratio">
<div class="div">
Hello!
</div>
</div>
Final Update:
It turned into a SCSS question, with any input for variable width or height it can be done like this:
http://jsfiddle.net/832v5f0L/41
$div-width : 1600;
$div-height : 900;
$ratio: $div-width / $div-height;
#media screen and (max-width: (100 * $ratio) + vh) {
width: 100vw; // always 100vw to fill
height: (100 / $ratio) + vw; // 100 / ratio
}
#media screen and (min-width: (100 * $ratio) + vh) {
width: (100 * $ratio) + vh; //100 * ratio
height: 100vh; // always 100vh to fill
}
Updated answer:
Media query portrait automatically activates when width is smaller than height. Which makes sure we can use the vh and vw to obtain the maximum possible size without reaching an overflow.
The ratio between the width and height will make sure you can get a fixed aspect ratio.
body {
width: 100%;
height: 100%;
}
.wrapper {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*
100vh * (100 / height)
with hright 50:
100vh * 100 / 50 = 200vh
*/
#media screen and (max-width: 200vh) {
.wrapper {
width: 100vw;
height: 50vw;
}
}
#media screen and (min-width: 200vh) {
.wrapper {
width: 200vh;
height: 100vh;
}
}
.img {
/* padding-top: 50%; */
width: 100%;
height: 100%;
background: #ccc;
text-align: center;
background-img: url()
}
<div class="wrapper">
<div class="img">
**IMG HERE**
</div>
</div>
Update:
min - max width queries
See the below code snippet. As you adjust the wrapper width, the img will scale to fit while maintaining it's aspect ratio
The img will also be vertically centered and horizontally within the .wrapper element
* {
box-sizing:border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
width: 50%;
height: 100%;
margin: auto;
position: relative;
}
.img {
max-width: 100%;
max-height: 100%;
padding:20px 40px;
background:grey;
position: absolute;
top: 50%;
left: 0;
right: 0;
height: fit-content;
width: fit-content;
margin: auto;
transform: translateY(-50%);
}
.img img {
max-width: 100%;
height: auto;
max-height: 100%;
}
<div class="wrapper">
<div class="img">
<img src="https://cdn.pixabay.com/photo/2013/01/29/00/47/search-engine-76519_960_720.png">
</div>
</div>
This is a great question, I've been trying for ages to solve but getting it to resize on a vertical height with out using flex was proving a hard task.
But #Grenther answer seems to actually work without using an image. His 1x2 ratio div stays true when adjusting the window width and height.
I then modified his code so that there is a max-height and max-width on the div. I could only get this to work with his 200px x 400px ratio.
It would be awesome if #Grenther could update my jsfiddle code so what ever div size/ratio variable is set, his clever vh method sizes would adjust using sass math so that any set div size would work. Even I'm struggling to see how his version works. But if the math is in the sass code for each vh dimension, we might be able to understand his wizardry.
#Grenther version here: https://jsfiddle.net/joshmoto/jndmoz6v/
/* div size vars and div ratio3 */
$div-width : 400;
$div-height : 200;
body {
width: 100%;
height: 100%;
}
.ratio {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* set your div max-size here */
max-width: $div-width + px;
max-height: $div-height + px;
#media screen and (max-width: 200vh) {
width: 100vw;
height: 50vw;
}
#media screen and (min-width: 200vh) {
width: 200vh;
height: 100vh;
}
}
.div {
width: 100%;
height: 100%;
background: red;
text-align: center;
}
I know this is not sass question, but i'm just using this so we can see #Grenther's answer logic.
I tried the math myself but when I change the div sizes/ratio it does not work like his version.
See my fail: https://jsfiddle.net/joshmoto/Lkebpyws/
$div-width : 400;
$div-height : 200;
.ratio {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* set your div max-size here */
max-width: $div-width + px;
max-height: $div-height + px;
#media screen and (max-width: $div-height + 'vh') {
width: ($div-width / 4) + vw;
height: ($div-height / 4) + vw;
}
#media screen and (min-width: $div-height + 'vh') {
width: ($div-width / 2) + vh;
height: ($div-height / 2) + vh;
}
}
...
I'm having the same issue as my previous question: div doesn't expand all the way horizontally
All I have in my render() function is
render() {
return (
<div className="container intro-body">
</div>
)
With CSS for intro-body like so (for color)
.intro-body {
height: 582px;
background-color: #3BC5C3;
}
On full screen on a 13 inch Macbook, the left and right sides are white spaces. It seems like there's padding or margin of some sort.
But when I shrink my window to about half the size, it reaches the left and right sides
Can someone explain this strange phenomenon? Is this something in Bootstrap that I'm not aware of? I was told to use container-fluid but 1. I think it's removed in Bootstrap 3 and 2. It didn't work when I tried it.
If you look at the bootstrap source you would see that .container has fixed widths for every media breakpoint except for extra small devices, and .container-fluid has full width for all media breakpoints:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
So if you want to have fullwidth for every media breakpoint, use .container-fluid.
First thing first : you have to put a reset css link (it must be the first one). You can find one here: http://meyerweb.com/eric/tools/css/reset/ then if you want the container to match the total width of a div element it must be a container-fluid
How do I cut off "A Outer" or others such as div/img/some elements as the browser screen goes under "A"?
A pic is better than thousand words, so here's a pic...
A and A outer are the same class. it just A outer is the area that expand by the children.
If, as you said, the width of divs are fixed values, then you can use #media queries for this very easily.
#media (max-width=...px){
}
Andrew not sure if this is what you are trying to accomplish, but take a look at this fiddle - https://jsfiddle.net/moojjoo/ppz8et2r/2/
I made the width to be 300px instead of 100px. Simply resize the Window to see the effects. Your outer columns will be hidden.
HTML
.container {
width: 100%;
}
#left {
width: 33%;
float: left;
}
#middle {
width: 33%;
float: left;
}
#right {
width: 33%;
float: left;
}
#media screen and (max-width: 500px) {
body {
background-color: lightblue;
}
#left {
visibility: hidden;
}
#middle {
width: 100%;
float: left;
}
#right {
visibility: hidden
}
}
<div class="container">
<div id="left">This is my left outer div</div>
<div id="middle">This is my middle div</div>
<div id="right">This is my right outer div</div>
</div>
I am wondering if there is way, to mark a MAX and a MIN value depending on the max Width of the browser window and min Width of the browser window, and have it dynamically change that MAX and MIN value between that set range?
Example:
I have a button "button" outside a div "divA" (it is part of another div "divB", that lies outside the div being discussed), and I want this button "button" to lie at the bottom right corner of this initial div "divA".
Now, I can get the button to lie at the bottom right corner when the browser window is at is absolute minimum, and at the absolute maximum, but the in between is a bit sporadic since I'm positioning the button absolutely, and then changing the bottom percentage on the two media widths.
Is there a a known javascript or jquery that would allow me to do this?
example CSS:
#divA{
width: 100%;
height:auto;
}
#divB{
width: 100%;
height: auto;
}
#button{
position: relative;
}
#media screen and (min-width: 768px){
#button{
position: absolute;
bottom: 100%;
}
}
#media screen and (min-width: 400px){
#button{
position: absolute;
bottom: 250%;
}
}
example HTML:
<div id="divA"></div>
<div id="divB"><button>CLICK ME</button></div>
demo -http://jsfiddle.net/ogjhef7c/1/
you are setting bottom to by 250% 100% try changing the value, #media works find try resizing theattached fiddleheight`
#media screen and (max-height: 300px) {
#button {
bottom: 0px;
background: red;
}
}
#media screen and (max-height: 100px) {
#button {
bottom: 0px;
background: green;
}
}
I'm not sure if this is possible, but I'm just wondering if there's a more sophisticated way of achieving the following media queries: jsFiddle: http://jsfiddle.net/neal_fletcher/XMmyA/
CSS:
.block {
position: relative;
width: 1000px;
height: 100px;
background: red;
margin: 0 auto;
}
#media only screen and (max-width: 1000px) {
.block {
width: 750px;
}
}
#media only screen and (max-width: 750px) {
.block {
width: 500px;
}
}
#media only screen and (max-width: 500px) {
.block {
width: 250px;
}
}
Thus instead of declaring a different media query every 250px, is there a better way to achieve this with css or jquery? So every 250px, the .block width is reduced by 250px. Any suggestions would be greatly appreciated!
You can use the css preprocessor sass for this, along with a for loop.
#for $i in 1 through 3 {
#media only screen and (max-width: (5-$i) * 250px) {
.block {
width: (4-$i) * 250px;
}
}
}
If you want to skip using media queries, why not just set the width of your block using a percentage (demo):
.block {
width: 75%;
min-width: 250px;
height: 100px;
background: red;
margin: 0 auto;
}
<script>
$(function() {
var windowsize = parseInt($(window).width());
var block = parseInt($(".block").outerWidth(true));
if(windowsize <= block && windowsize%250==0) {
$(block).css('width',windowsize-250+"px");
}
});
</script>