I have been attempting to make some SVG data charts responsive but seem to be unable to do so with the current CSS 'position:fixed' applied to the elements.
I'm looking for, if possible, a solution that doesn't rely on media queries as I have multiple elements that I would need to apply this to. If this isn't possible, then any suggestions on what to do in order to keep all the data matched up with the SVG as the browser is resized, would be great!
Ideally I would like the SVG to scale up and down in size, whilst remaining central, no matter what size the browser is.
This is one of the SVGs that i'm looking to make responsive (right hand side)
http://datahealthcheck.databarracks.com/2016/#backup-section-3
I've created a codepen and added just one percentage on the SVG as an example of the problem http://codepen.io/anon/pen/YGvXkq
<div id="Backup-3"></div>
<p id="percentage" class="backup3-percentage">3%</p>
#Backup-3 {
position: fixed;
width: 550px;
margin-left: 73px;
margin-top: 31px;
}
.backup3-percentage {
position: fixed;
color: #000;
margin-left: 478px;
margin-top: 96px;
font-size: 1em;
transform: rotate(6deg);
}
I'd go with viewport units
.responsive-div {
position: fixed;
width: 70vw; // vw being viewport-width, so 70% of the width of the viewport
height: 50vh; // vh being viewport-height, so 50% of the height of the viewport
}
This article is going more in-depth about it
body{ margin:0; padding:0;
}
.mydiv {
max-width:1800px;
width:100%;
position:fixed; background:red; height:100px; border:5px solid green; box-sizing: border-box;}
<div class="mydiv">
</div>
I think media queries would be the best approach for make the div responsive.
If not you can use with:100% and max-width to your position fixed div
max-width dont work with position: fixed. This my alternative:
`.nav{
width: 1280px;
position: fixed;
}
#media all and (max-width: 1280px) {
.nav{
width: 100%;
}
}`
if you used width without #media 100% your block
Related
I would just like to know how to resize an image width to fit the browser width, The image is basically my header image that i want to fit the screen width.
I would thereafter need to place a div on the image. I have the following at the moment but nothing seems to work.
#container {
position: relative;
}
#divWithin {
position: relative;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
#imgWithin{
width: 100vw;
height: 100vh;
left: 0;
}
<div id="container">
<img id="imgWithin" src="~/images/image(2).png" style="height:325px; margin-top: 75px;" />
<div id="divWithin">Testing</div>
</div>
Any help or ideas would be gladly appreciated
What I am trying to achieve is displayed in an image below:
With 1 being : The image that I want displayed across the screen width (fit screen width)
and with 2 being : The div that I would want to place upon the image
To make a image responsive You need to use a class like this:
.responsive {
width: 100%;
height: auto;
}
If you need more details about responsive images this link should help https://www.w3schools.com/howto/howto_css_image_responsive.asp
Try changing your css to this:
html, body {
width: 100%;
}
#container {
width: 100%;
position: relative;
}
#imgWithin {
width: 100%;
}
#divWithin {
position: absolute;
top: 20%;
left: 20%;
padding: 5px;
background-color: white;
}
This will make the image the full width of the browser window with the text overlaid on top.
You are going to warp the image with a fixed height in your html though. If you provide a link to an image mocking up what you are trying to achieve I might be able to help you further
Why don't you use background: url()?
so new html now is:
<div id="container">
<div id="divWithin">Testing</div>
</div>
and css:
#container {
background: url("Your image url") no-repeat center center;
background-size: cover;
}
learn more about background and background-size
what ever media query you use put every where
CSS:-
.container{
padding: unset;
width:auto;
}
i am expecting inside container id is your image this works perfectly fine in every screen if you face any problem ping me
The styles in the following code are working fine on large devices (Desktops and tablets). But on mobile devices most of the divs are overlapping because of the margin-top values.
I know this is not a propery way of designing website responsively.
Could you please give me a solution?
#welcome {
background: yellow;
background-size: 100% 100%;
width: 100%;
height: 600px;
}
#inquiry {
margin-top: 600px;
width: 100%;
height: 500px;
background: red);
}
#products {
margin-top: 1100px; /*(margin-top of inquiry + height of inquiry) */
width: 100%;
height: 500px;
background: green;
}
#footer {
margin-top: 1600px; /* (margin-top of products + height of products) */
width: 100%;
height: 500px;
background: blue;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="welcome">
Welcome Message
</div>
<div id="Inquiry">
Inquiry Form
</div>
<div id="products">
Products
</div>
<div id="footer">
footer
</div>
Although it is better to use Mediaqueries, You can also use:
margin-top: 10vh;
height: 20vh;
this will place the div 10% of the screen height down, and will give it a height that is 20% of the screen size. The problem is that it is CSS3 so old browsers won't support it. (I think everything below android 4.0 won't support it. you have to test this though) The amount of people using outdated browser is getting less and less.
You can use margin-top: % instead of pixels.
Or just use #media queries to control your margin on different screens.
For example: #media (max-width: 991px) { #products{ margin-top: 100px; } }
Try with:
position: absolute;
margin-top: 150px;
margin-left: 100px;
//inside of a box you can use padding-top......
You can either use percentages for width and height properties (a width of 80% will allways be 80% of the current size of the browser window, and thus your element will scale responsively when the window is resized).
However, I'd strongly recomend you learn to use media queries instead.
Lets say you have a left navigation menu of class left-nav, that you'd like to occupy 20% of the page width, but to be hidden at page widths of 800px and less.
.left-nav{width:20%}
#media screen and (max-width 800;){
.left-nav{display:none}
}
It should hopefully be really easy for you to figure out how media queries work from this example - you specify a maximum and/or minimum page width or height at which to apply given rules. Should be fairly straight forward to make your page layout behave properly using these.
Based on your comments, normal static/relative div elements are by default as wide as the screen and will stack themselves vertically after each other.
By setting position: relative on them, you can move them from that normal flow and if you set position: absolute you take them out from that normal flow and place them on an exact position/size using left, top, width and height properties.
Here is a sample showing that:
#welcome {
background: yellow;
height: 600px;
position: relative;
left: 50px;
}
#inquiry {
height: 500px;
background: #f99;
}
#products {
height: 500px;
background: #9f9;
}
#footer {
height: 500px;
background: #99f;
}
#extra {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background: #f9f;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="welcome">
Welcome Message, positioned relative, moved out of flow 50px to the left
</div>
<div id="inquiry">
Inquiry Form
</div>
<div id="products">
Products
</div>
<div id="footer">
footer
</div>
<div id="extra">
extra, positioned absolute
</div>
Does anyone know how to make a DIV behave in such a way that it will always try to consume it's maximum space (Regardless of content)?
For example, if I have a DIV with a max-height of 600px and a min-height of 200px, how can I make it so that:
If the window height is greater than 600px enough it will occupy 600px
If the window height is between 600px and 200px it will occupy all available height
If the window is 200px or less it will always occupy 200px?
An alternative to the above that I could live with would be to ignore the minimum height and just let it scale all the way down.
Eventually, I would like to vertically align it within the window but first things first.
I'd prefer to use pure CSS for this if possible. If it comes to it, I won't have too much trouble writing a script to achieve it.
Any suggestions welcome.
Cheers.
Using only the height property you may obtain this behaviour using a set of mediaqueries
div {
height: 200px;
}
/* needed to stretch the height of div */
#media all and (min-height: 201px) and (max-height: 600px) {
html, body {
height: 100%;
}
}
#media all and (min-height: 201px) {
div {
height: 100%;
}
}
#media all and (min-height: 601px) {
div {
height: 600px;
/* if you need to vertical-align the div, use following rules */
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
}
Live Example (basic): http://codepen.io/anon/pen/NPGbNq
Live Example (with vertical alignment > 600px) http://codepen.io/anon/pen/yyYVag
You can do this in a very simple way without media queries by combining height, max-height and min-height. The browser mediates between them.
div {
height: 100%;
max-height: 600px;
min-height: 200px;
}
See example.
EDIT - VERTICAL CENTRING
To include vertical centring, there's also a smart way without media queries or CSS transforms. This solution should therefore work in IE8.
div {
height: 100%;
max-height: 600px;
min-height: 200px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
See example.
Vertical alignment using this smart technique.
see this .it will take 100% width and 100% height at any width and height of windows.
div{
display: block;
background: red;
height: 100%;
width: 100%;
position: fixed;
}
click here
Working with a shopify template where body has a max-width of 1200 pixels.
I need one div to have a full screen width. As you can understand, I can't remove that max width, since it's going to mess up entire template. Is there any way around it except fixed pixel width?
Thanks!
edit:
Not adding html since it's just one div.
#media only screen and (min-width: 1280px)
body {
max-width: 1200px;
margin: 0 auto;
}
#topcontainer {
width:100%;
right:0;
left:0;
height:50px;
background-color:#D8D8D8 !important;
border-bottom: 2px solid #BCBCBD;
z-index:22;
}
You can use a div with position: absolute; top:0; left: 0; width: 100%; height: 100% or else you can apply your CSS to <html>
Would position: absolute; right: 0; left: 0; on the element you want to stretch do the trick? It is hard to tell without seeing the markup and corresponding styles. Maybe put together a quick jsfiddle.
Add following class to div
.fullScreen { width:100%; margin:auto; }
I have found this vertical centring method which seems pretty common..
#container {
width: 960px;
height: 740px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -480px;
margin-top: -370px;
}
What I'm trying to center here is the entire site, and this code goes perfectly as expected when the screen preview is larger than the div height (larger than 740px). However, Once the browser window is minimized less than div's vertical size (740px) parts of the header disappear above the top of the page.
I can sort of understand why this is happening seeing that 50% becomes less than half the div's size which will be equalized with margin-top.
What I'm looking for is a fix for this issue? Or even a completely different method, I just need to center the site both vertically and horizontally.
try this:
#container {
height: 740px;
width: 960px;
position: absolute;
margin: auto;
top: 0; right: 0; bottom: 0; left: 0;
}
By the way, Smashing Magazine recently published a nice article about this.
You need to add a media query:
#media screen and (min-height:740px) {
#container {
top:0;
margin-top:0;
}
}
This will only apply the formatting where the screen is at least 740px tall. If you want to learn more about media queries, check http://www.w3.org/TR/css3-mediaqueries/
Absolute Centering like Lino Rosa mentioned is the best approach here for easy horizontal and vertical centering while allowing you to add some responsive touches, like fixing your height issue.
Ideally, you should be using percentages for the width and height declarations so that your content will vary with the viewport. Of course, sometimes you just need pixels :-)
Here's what I've done:
.Absolute-Center {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
}
#container {
width: 960px;
max-width: 90%;
height: 740px;
max-height: 90%;
overflow: auto;
}
By setting a max-height and max-width, the box will never be more than 90% of the container (in this case, the browser viewport) even if it's less than 960px wide or 740px tall, so even small screens see a nice centered box. overflow: auto ensures that if the content is longer than the box, the user can scroll in the box to see the rest.
View the demo
If you must have the box exactly 960px by 740px no matter the screen size (forcing the user to scroll around to see all of the content on a small window), then only apply the Absolute Centering styles to #container using a media query, like so:
#container {
width: 960px;
height: 740px;
overflow: auto;
margin: auto;
}
#media screen and (min-height:740px) and (min-width: 960px) {
#container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
}
View the demo
I encountered the same issue. As the height of my element is dynamically changed, I can't give it a fixed height.
Here is a demo below, hope it helps.
.wrapper {
display: table;
height: 100vh;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
background-color: lightblue;
}
.content {
width: 30%;
height: 30%;
background-color: red;
}
<html>
</html>
<body>
<div class="wrapper">
<div id="container">
<div class="content">
</div>
</div>
</div>
</body>