Currently when I zoom out, all the content goes to the left or right side. But I want to keep the content centered like this page for example. Here is the website which I want to keep the content centered when I zoom out.
Here is the body and wrapper CSS:
body {
background: #0a0a0a none repeat scroll 0 0;
font: 14px/20px "Conv_Gotham-Medium",Arial,Helvetica,sans-serif;
height: 100%;
margin: 0;
min-width: 320px;
overflow-y: scroll;
}
#wrapper{
position: relative;
overflow: hidden;
}
The easiest way to keep something centered is to set margin: 0 auto and a specific width (or a max-width to keep it more dynamic). margin: 0 auto causes the horizontal margin to equally fill the remaining space while the vertical margin stays 0.
e.g. if your window width is 1280px and your #wrapper has a width of 1000px, both margin-left and margin-right will have 140px which leads to a centered wrapper
Live Example: http://codepen.io/anon/pen/QydNYo?editors=110
You seem to use the bootstrap framework.
Did you consider adding an additional class to your col-md-12, most conveniently trough jQuery with css-selectors or just plain CSS?
In your case like:
$(".webdesign-holder .col-md-12").css("max-width", value);
$(".webdesign-holder .col-md-12").css("margin", "0 auto");
OR
.webdesign-holder .col-md-12 {max-width:value;margin:0 auto}
Related
When a design is fluid (there is no fixed width), how can wrapper div using margin:0 auto; be centered?
#wrapper {
max-width: 1000px;
min-width: 767px;
margin: 0 auto;
}
The max-width:1000px; means: make a container that has a maximum with of 1000px. If the page is larger (as an users uses a wider window) it'll fill the other part with white space.
The min-width:767px will then set the minimum. So if the users has a smaller window then 1000px then the container doesn't fit. So it'll decrease it's size automatically to a minimum of (in this case) 767px. If the users still has a smaller window, then a scrollbar will appear. The container will be set to 767px.
If an user is loading the page in between the max-width and min-width, then it'll take the maximum width available. Please see the "To be more precise an example per case" section below for more information about this topic.
As you're using margin:0 auto; on this #wrapper. The #wrapper will be centered with no margin on top of bottom. So instead of the whitespace on the right side which will be set on default, now the white space will be shared on both: left and right side of the container.
I made an example with a lower width then your question in the example below to show that it'll become centered. This is all because of the combination of: max-width which is smaller then the window-size of the user (box below) and the margin: 0 auto; which will try to center the div when possible.
#wrapper {
max-width: 200px;
min-width: 100px;
margin: 0 auto;
height:50px; /* added this as example */
background:red; /* add this as example */
}
<div id="wrapper"></div>
To be more precise an example per case:
Note (pre-condition): The cases below are when the div is as main-element in the page. So no other elements that have effect on the #wrapper-element. Just like the code examples in this post.
User has a browser that has a size of 1100px width: The #wrapper will have a width of 1000px and there will be 50px of whitepace left and 50px of whitespace right. (see the above code example).
User uses a browser that has a size of: 920px width: The #wrapper will have width of 920px; and there will be no whitespace on the left and right side.
User uses a browser that has a size of: 600px width: The #wrapper will have width of 767px; and there will be no whitespace on the left and right side. Beside that the user will have a scrollbar on the bottom of it's page to be able to see the complete #wrapper. See the code example below for the scrollbar:
#wrapper {
max-width: 5000px;
min-width: 1000px;
margin: 0 auto;
height:50px; /* added this as example */
background:red; /* add this as example */
}
<div id="wrapper"></div>
You can try this:-
#wrapper {
display: block;
max-width: 1000px;
min-width: 767px;
margin: 0 auto;
}
You can use Flexbox.
Set the following properties on the parent element of the element you want to center
display: flex;
justify-content: center; // for horizontally center
align-items: center; // for vertically center
I want a simple page where i have a main section and a left sidebar with two sections. I dont know the height of the top section, and I want to bottom section to fill out the rest of the screen. As you can see on the fiddle below (try to resize the window if you cant see the sidebar), height 100% sets the hight of the bar plus the it own height and I want it to only fill out the rest of the space. I found other questions in here where people propose to use vh minus top bar, but I dont know the hight of the top bar. Is there other options?
Notice the bottom section must support scrolling if content exeeds the screen height.
https://jsfiddle.net/segato/agprcbg0/2/
html,
body,
.wrapper,
.wrapper-inner,
.sidebar,
.main {
height: 100%;
}
You can do it with the Flexbox. The whole point is to make the #bottom div flexible so that it can take up all the remaining vertical space.
Updated Fiddle
Simply remove the defined height attributes. So:
#bot {
background-color: red;
margin: 0px !important;
padding: 0px !important;
overflow-y: hidden !important;
overflow-x: hidden;
}
html, body, .wrapper, .wrapper-inner, .sidebar {
height: 100%;
}
Updated: https://jsfiddle.net/0da8b9oj/1/
I'm trying to create a mobile version of my site, but any element with width: 100% and padding keeps spilling over my container section. I understand this is because child element is getting wider than the container of a padding value, but how can I keep them full width but with keeping some padding on the left within the child element (so the text doesn't stick to the browser's window)?
Simple code:
section#main {
padding: 100px 0 0 !important;
width: 100%;
}
input, textarea {
width: 100%;
padding-left: 20px;
margin: 0;
}
Results in:
http://tinypic.com/r/2ytxjk9/5
As is you are basically saying, 100% wide but add 100px padding. The easiest fix is to alter the box-sizing: border-box CSS3 Property. This will make it 100% wide including 100px padding.
I have a fixed footer of 970px width, but when I resize my browser smaller the whole footer keeps going off screen with the center of the footer in the middle. I want my footer to stop going off screen when resizing the browser smaller than 970px width.
CSS
footer{
z-index: 1;
position: fixed;
width: 940px;
line-height: 30px;
background: linear-gradient(#232323, #1f1f1f);
margin: 0 auto 0 -485px;
padding: 0 30px;
bottom: 0;
left: 50%;
text-align: center;
}
HTML
<footer>Footer Text</footer>
Anybody know how I could achieve that?
You have a negative left margin of -485px and a left position of 50%. I would just use
footer {
margin: 0 auto;
}
and remove the left position altogether.
Its hard to say without any HTML, but from what I can guess you have two options:
You want to stop the footer being bigger than the browser if the browser is < 940px, if that is so why not set it to have width:100% and max-width:940px;. You may also want overflow:hidden;,
Your footer isnt centering properly, in that case wrap it within a div with width:100% (or calculated to be as wide as your page) with text-align:center; and give the footer (placed within the div) margin:0 auto;
Something like this fiddle
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html