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; }
Related
i have 2 divs and a dl:
<div id="wrap">
<div id="header">
<dl id="site_nav_global_primary">
and this is my style:
#wrap {
margin:0 auto;
width:100%;
min-width:760px;
max-width:1003px;
overflow:hidden;
}
#header {
width:100%;
position:relative;
float:left;
padding-top:18px;
margin-bottom:29px;
}
#site_nav_global_primary {
float:right;
margin-right:18px;
margin-bottom:11px;
margin-left:18px;
}
Now i want to change site_nav_global_primary to have a full screen width without
changing the wrap and the header. but when i try:
#site_nav_global_primary {
position: absolute;
width:100%;
top:0px;
left:0px;
}
The navigation gets the 100% of the wrapper which is max 1003px width. i want it to
stretch to the maximum without changing the wrap and header divs.
Is this possible?
You could set both left and right property to 0. This will make the div stretch to the document width, but requires that no parent element is positioned (which is not the case, seeing as #header is position: relative;)
#site_nav_global_primary {
position: absolute;
top: 0;
left: 0;
right: 0;
}
Demo at: http://jsfiddle.net/xWnq2/, where I removed position:relative; from #header
You need to add position:relative to #wrap element.
When you add this, all child elements will be positioned in this element, not browser window.
I have similar situation. In my case, it doesn't have a parent with position:relative. Just paste my solution here for those that might need.
position: fixed;
left: 0;
right: 0;
Adding the following CSS to parent div worked for me
position: relative;
max-width: 100%
Make #site_nav_global_primary positioned as fixed and set width to 100 % and desired height.
This one also works. With this method, there is no need to interfere with positioning of parent divs. I have checked
#site_nav_global_primary {
position: absolute;
width: 100vw;
}
I don't know if this what you want but try to remove overflow: hidden from #wrap
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
I'm busy on this new website thing, and I run into a problem. Normally, when making the menu, I would just use the entire space, like 100% width and maybe 100px height but now, I need just a portion of that, so there is a whitespace next to the menu on both sides.
I tried to get the square, that carries the menu, to the absolute top of the page, most obvious solution:
position:absolute;
top:0;
But now, the square is also moved to the absolute left of the page, instead I want it centered, but I can't get there. This is a piece of my CSS:
body, html {
background-color: #ecf0f1;
position: absolute;
top: 0;
margin: 0 auto;
}
.navbox {
background-color: #000;
height:100px;
width: 700px;
margin: 0 auto;
}
Is there anyone with the solution?
position:absolute;
top:0;
left:0;
right:0;
Adjust left and right to suit your desired margins.
You would probably want to set your left and right to percentages, using 50% for both will center it:
#menu {
position:absolute;
top:0;
width: 70px;
height:180px;
left: 50%;
right: 50%;
background-color: red;
}
Also, if you are not using absolute positioning you can do the same with this margin-left and margin-right.
jsfiddle
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>
I have a wrapper with some padding, I then have a floating relative div with a percentage width (40%).
Inside the floating relative div I have a fixed div which I would like the same size as its parent. I understand that a fixed div is removed from the flow of the document and as such is ignoring the padding of the wrapper.
HTML
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
CSS
body {
height: 20000px
}
#wrapper {
padding: 10%;
}
#wrap {
float: left;
position: relative;
width: 40%;
background: #ccc;
}
#fixed {
position: fixed;
width: inherit;
padding: 0px;
height: 10px;
background-color: #333;
}
Here is the obligatory fiddle: http://jsfiddle.net/C93mk/489/
Does anyone know of a way to accomplish this?
I have amended the fiddle to show more detail on what I am trying to accomplish, sorry for the confusion:
http://jsfiddle.net/EVYRE/4/
You can use margin for .wrap container instead of padding for .wrapper:
body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{
float: left;
position: relative;
margin: 10%;
width: 40%;
background:#ccc;
}
#fixed{
position:fixed;
width:inherit;
padding:0px;
height:10px;
background-color:#333;
}
jsfiddle
Try adding a transform to the parent (doesn't have to do anything, could be a zero translation) and set the fixed child's width to 100%
body{ height:20000px }
#wrapper {padding:10%;}
#wrap{
float: left;
position: relative;
width: 40%;
background:#ccc;
transform: translate(0, 0);
}
#fixed{
position:fixed;
width:100%;
padding:0px;
height:10px;
background-color:#333;
}
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
How about this?
$( document ).ready(function() {
$('#fixed').width($('#wrap').width());
});
By using jquery you can set any kind of width :)
EDIT: As stated by dream in the comments, using JQuery just for this effect is pointless and even counter productive. I made this example for people who use JQuery for other stuff on their pages and consider using it for this part also. I apologize for any inconvenience my answer caused.
man your container is 40% of the width of the parent element
but when you use position:fixed, the width is based on viewport(document) width...
thinking about, i realized your parent element have 10% padding(left and right), it means your element have 80% of the total page width. so your fixed element must have 40% based on 80% of total width
so you just need to change your #fixed class to
#fixed{
position:fixed;
width: calc(80% * 0.4);
height:10px;
background-color:#333;
}
if you use sass, postcss or another css compiler, you can use variables to avoid breaking the layout when you change the padding value of parent element.
here is the updated fiddle http://jsfiddle.net/C93mk/2343/
i hope it helps, regards
You could use absolute positioning to pin the footer to the base of the parent div. I have also added 10px padding-bottom to the wrap (match the height of the footer). The absolute positioning is relative to the parent div rather than outside of the flow since you have already given it the position relative attribute.
body{ height:20000px }
#wrapper {padding:10%;}
#wrap{
float: left;
padding-bottom: 10px;
position: relative;
width: 40%;
background:#ccc;
}
#fixed{
position:absolute;
width:100%;
left: 0;
bottom: 0;
padding:0px;
height:10px;
background-color:#333;
}
http://jsfiddle.net/C93mk/497/
On top of your lastest jsfiddle, you just missed one thing:
#sidebar_wrap {
width:40%;
height:200px;
background:green;
float:right;
}
#sidebar {
width:inherit;
margin-top:10px;
background-color:limegreen;
position:fixed;
max-width: 240px; /*This is you missed*/
}
But, how this will solve your problem? Simple, lets explain why is bigger than expect first.
Fixed element #sidebar will use window width size as base to get its own size, like every other fixed element, once in this element is defined width:inherit and #sidebar_wrap has 40% as value in width, then will calculate window.width * 40%, then when if your window width is bigger than your .container width, #sidebar will be bigger than #sidebar_wrap.
This is way, you must set a max-width in your #sidebar_wrap, to prevent to be bigger than #sidebar_wrap.
Check this jsfiddle that shows a working code and explain better how this works.
Remove Padding: 10%; or use px instead of percent for .wrap
see the example :
http://jsfiddle.net/C93mk/493/
HTML :
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
CSS:
body{ height:20000px }
#wrapper {padding:10%;}
#wrap{
float: left;
position: relative;
width: 200px;
background:#ccc;
}
#fixed{
position:fixed;
width:inherit;
padding:0px;
height:10px;
background-color:#333;
}