If I add margin and padding for this class, it starts twitching like on first GIF.
If I remove margin and padding everything is good, but I need them for styling.
What causing this and how can I fix it?
1 GIF
.ant-layout.ant-layout-has-sider {
max-width: 1440px;
margin: 0 auto;
padding: 32px 0 0 0;
}
2 GIF
.ant-layout.ant-layout-has-sider {
max-width: 1440px;
}
In case it will help someone: add hasSider prop for Antd Layout component
Related
If I add margin and padding for this class, it starts twitching like on second GIF.
If I remove margin and padding everything is good, but I need them for styling.
What causing this and how can I fix it?
1 GIF
.ant-layout.ant-layout-has-sider {
max-width: 1440px;
}
2 GIF
.ant-layout.ant-layout-has-sider {
max-width: 1440px;
margin: 0 auto;
padding: 32px 0 0 0;
}
Just needed to add hasSider prop for Antd Layout component
I created a div where I plan to a title for my webpage, I set the width to 100% but there was still white on the sides and top. I got the top to disappear but the sides won't, I assume it's got something to do with the movement of the div, I've checked everywhere, but everyone has different divs for different purposes so I couldn't find the answer. In case you guys wanna show an example of your solution you could do so here
Here is the HTML:
<div id="toptitle">
</div>
For my CSS I tried using margin-left: -8px and the same for the right side but they don't work like that, it's only movement of the div and even when I don't set the left side yet the right still won't move till there's isn't a white gap:
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
margin-top: -15px;
}
Reset your body margin. Also make a research for reset css.
body {
margin: 0;
}
Add margin: 0 to the body :
body{
margin:0;
}
You are missing body margin, please have a look at the below working snippet taken from your codepen. and there is no need to have negative top margin too.
body {
margin: 0
}
#toptitle {
width: 100%;
height: 140px;
background: #42647F;
}
<div id="toptitle">
</div>
The body tag has a default margin of 8px which you have to remove. So just add this to your code:
body{
margin:0;
}
You should also remove margin-top:-15;
Hope this is clear to you!
I have a container with a repeating image that i want to fill 100% of the available height. Some of the inner divs have their :after pseudo elements absolutely positioned so i can get the borders the way i need them. This is causing an issue with the repeating background of the main container.
Please visit this link and scroll to the end of the page -
http://www.mariage-graham-audrey.com/static.html
Can anyone suggest a possible solution for this ?
Just a workaround but try to add larger bottom padding to layout like this:
.layout {
...
padding-bottom: 180px;
}
Just saw your CSS and I think by adding this you would be able to get a full page background :
background: white url("/bootstrap/assets/images/pattern.png") 0 0;
width: 100%;
margin: 0 auto;
padding: 30px 0;
min-height: 100%;
Just edit the " width:100%; " thats all.
Please Replace your style for layout div with this. It will work
.layout{
background: white url("/bootstrap/assets/images/pattern.png") 0 0;
width: 100%; /* add 100% width*/
margin: 0 auto;
padding: 0 0 150px 0; /*change padding with this*/
min-height: 100%;
}
I'm building a website using a grid system as the framework. At first I had no problems with margins and padding, but now I have extra white space on the right side of my website.
Here is my fiddle: http://jsfiddle.net/071ad2hg/1/
I already found the problem and it is from the following code:
.grid_12 { width: 100%; }
When I comment out this line the problem goes away, but I've used it in many places throughout my site and am wondering why this is happening all of a sudden. I would like to keep it as is and just fix it somehow.
Beacuse body has 8px margin you can change that by adding margin 0 to body css tag
demo http://jsfiddle.net/ckqkyaqd/
body {
font-family: 'elegant_luxmager';
color: #444948;
margin:0;
}
Add this to your body in the css.
margin: 0;
and set a pixel width for your grids.
.grid_12 {
width: 1000px;
margin: 0 2% 1% 0;
float: left;
display: block;
}
I would suggest using a .wrapper instead.
.wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
}
<div class="wrapper"></div>
Found your issue:
It's the 25% margin that adds the whitespace, use a wrapper to center that part or use <center>
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}
Use the inspector in Google Chrome developer tools and see the order in which the CSS is being applied. You have this additional margin which is being applied to the div. Try using a wrapper div or better yet use a defined responsive framework like Bootstrap or Foundation.
#images_row_1, #images_row_2, #images_iOS {
margin-left: 25%;
}
I have a main container in CSS that contains all divs for the page. However, there is a white space of 8px pushing the entire container to the left. Any idea how I can get rid of it, and have the container fit the entire window without white space? If I use "margin-left: -8px" it just creates 8 pixels of white space on the right. Heres the code for the container:
#container {
height: 100%;
width: auto;
position: relative;
background-color: #E6E6E6;
min-width: 960px;
}
Just set margin: 0px; on #container, if that does not work you can set
body {
margin: 0px;
padding: 0px;
}
This is because of the default styles being applied by the browser stylesheet.
There are a few ways you can solve you're problem:
Apply this css rule, which effectively get's rid of any default padding or margin applied to elements.
* {
margin: 0;
padding: 0;
}
Or you could use a css reset stylesheet, which I recommend the most because different browsers handle elements somewhat differently and you want to even the field out so you don't run into any problems later. I recommend Eric Mayers css reset stylesheet it can be found here: http://meyerweb.com/eric/tools/css/reset/ and I use it for my own projects.
html, body, #container {margin:0; min-height:100%;}