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
Related
I'm building an E-Resume. My problem is: at #media screen and (max-width: 734px) {}, I want the resume to fill the whole screen's width while maintaining the aspect ratio. That means the height, including the contents, will auto size correspondingly. Below is my code for the height and width of the resume, leaving the problem to the contents of the resume:
#media screen and (max-width: 734px) {
.resume__container {
width: 100vw;
height: calc(100vw * var(--ratio));
}
}
So here is a sample view at that media query, as you can see, the size of the resume has already been set the way I wanted. It's just the contents I wanted to solve but lack the knowledge to do so.
enter image description here
My inspiration for this is the Word where on mobile view, the document covers the width of the device.
Easiest way to implement aspect ratio is to use padding on the parent container and position the child absolute in it.
.parent {
position: relative;
width: 100%;
padding-bottom: 56.25%; //16:9
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="parent">
<div class="child"></div>
</div>
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;
}
}
New to media queries. But I think I've missed the boat somewhere.
Suppose I have a topBar like the one in the snippit below, made up of a topBar container, fixed width, and a list, and the entire unit is floated to the right. I would like it so as long as the screen is resized until, let's say 1000px, for the topBar to shrink along with the screen as it is resized. When it hits 1000px something else will happen, but we can worry about that later.
For this to work, do I need to set queries for both the topBar container and topBar fixed width, or just the container? Also, is it a Max width or a min width that I should be targeting for the overall screen?
#top-menu
{
width: 100%;
background-color: white;
height: 40px;
color: #00a5b5
}
#topMenu-fixedWidth
{
height: 80px;
width: 1156px;
color: #00a5b5;
margin: 0 auto;
}
#topMenu-fixedWidth ul
{
list-style: none;
float: right;
margin-right: 5px;
}
#topMenu-fixedWidth ul:nth-child(4)
{
margin-right: 0;
}
#topMenu-fixedWidth ul li
{
float: left;
margin: 10px;
<div id="top-menu">
<div id="topMenu-fixedWidth">
<ul>
<li class="topMenuText">Partners</li>
<li class="topMenuText">Careers</li>
<li class="topMenuText">Language</li>
<li class="topMenuText">Login</li>
</ul>
</div>
</div>
Since you want content to re-size along with a re-sizing screen, you should use viewport percentage lengths, such as vh and vw. Elements will be sized relative to the viewport.
Also, is it a Max width or a min width that I should be targeting for the overall screen?
Either. Doesn't really matter, unless you have a specific need.
#media ( min-width: 1000px ) {
/* executes code here when the screen is 1000px or more */
}
#media ( max-width: 1000px ) {
/* executes code here when the screen is 1000px or less */
}
More information:
Max-Width vs. Min-Width
Common breakpoints for media queries on a responsive site
You have your base css which applies to all screen sizes. Then beyond that, you just set whatever css classes you want to change when the screen size changes. For example if you want remove the float below 1000px, you would do the following:
#topbar {float: right;}
#media screen and (max-width: 1000px) {
#topbar {float: none;}
}
Your #top-menu already has a width of 100% so that will resize no matter what. Your #topMenu-fixedWidth will need to be inside of a media query like so:
#media screen and (min-width 1000px){
#topMenu-fixedWidth
{
height: 80px;
width: 1156px;
}
}
*note: You only need to include the styles you want to change within the media query.
I have two boxes, each with width: 50%;, placed next to each other with float. One has a white background, the other a grey background.
As the page width shrinks the boxes stay beside each other. At some minimum size I don't want the boxes to get any smaller. Here they should jump down under each other.
They do this fine. But the white and grey boxes keep their 50% width - at this point they should rather fill the whole width 100%.
The issue is seen here just below the video.
(The min-width does not do any difference here at the moment, and is just set to some arbitrary value (100px) on the page.)
What is the proper way for this responsive effect, so the products are full-sized on small screen but can stand beside each other on large screens?
I find it easier to approach this from a mobile-first setup. Set the boxes to 100% width until the breakpoint where you want them to start forming columns. For example,if you wanted them to start forming columns at 600px device-width and greater:
.column_selector {
box-sizing: border-box;
width: 100%;
}
#media all and (min-device-width: 600px) {
.column_selector {
width: 50%;
}
}
Also, if you're going to use percentages for widths, I'd recommend using box-sizing: border-box to account for the padding in your width calculations.
Use #media to set some special rules for different window dimensions. Something like:
.div1 {
float: left;
width: 50%;
}
.div2 {
float: left;
width: 50%;
}
#media (max-width: 600px) {
.div1 {
width: 100%;
}
.div2 {
width: 100%;
}
}
Here's a fiddle.
I need the following:
emtpy div with no content
background image set to the div the
background image to be fluid/responsive on re-size I cannot set fixed
dimensions on the div
Everything I try fails to force the div open to support the size of the background image. Any help is greatly appreciated...
http://www.everymountain.us/
<header id="header">
<div class="wrapper">
<div class="inner">
<div class="top_banner"></div>
</div>
<div class="clear"></div>
</div>
</header>
.front #header .top_banner { background: url('images/bg_front.jpg') no-repeat; background-size: cover; }
The way to lock a height's aspect ratio to it's fluid width is to use padding-top or padding-bottom percentage. This is because all padding percentages are of the the element container's width. Your background image is 960 x 520, so the height is 54.166666666667%.
html
<div class="top_banner"></div>
css
.top_banner {
background-image: url('images/bg_front.jpg');
background-size: 100%;
width: 100%;
padding-top: 54.166666666667%;
height: 0;
}
Example: http://jsfiddle.net/SsTZe/156/
Essentially the same question: CSS fluid image replacement?
You can handle it after applying CSS
#DivName{
background-size: auto auto;
}
here first auto is for width and second is for height
Since this is a top google result for creating fluid-height divs in general (not just empty ones like the question specifies), I wanted to leave a CSS Calc solution that lets you put content into the div (the padding trick forces it to be empty):
.my-div {
background: #ccc url(https://link-to-image/img.jpg) no-repeat 50% 0;
background-size: 100% auto;
width: calc(100vw - 350px);
height: calc((100vw - 350px) * 0.468795); /* replace the decimal with your height / width aspect ratio */
}
Try to use medie queries in your CSS for different screen sizes to handle different fixed heights.
For example:
#media (min-width: 1200px) {
div { height: 3em; }
}
#media (min-width: 768px) and (max-width: 979px) {
div { height: 2em; }
}
#media (max-width: 767px) {
div { height: 1.2em; }
}
#media (max-width: 480px) {
div { height: 1em; }
}
etc. what you need to customize. You can leave the div width 100% to fit for all screen and the background-size:cover. You can also make different size backgrounds (diff. files) for each screen sizes to give less size to your website for mobile or tablet devices.