I have a website at http://www.vjpp.nl and want to remove the padding on both sides of the header, content and footer.
In the header I found this:
.fusion-header {
padding-left: 30px;
padding-right: 30px;
When I set both to 0px it doesn't change anything. Basically what I need is that the button and logo are aligned with the menu bar without any padding. Same goes for the content and footer (social media logos). I can't find a solution, does anyone know?
Also change
.fusion-header-wrapper .fusion-row {
padding-left: 0px;
padding-right: 0px;
/* max-width: 1000px; */
}
You have a max-width of the element .fusion-header-wrapper .fusion-row inside the header, which is centered and thus has a gap to the header. Remove this max-width and it will work.
Related
I'm having trouble with this page:
http://dynamic-storage.co.uk/index2.php
On the right hand side, I can't get the area to expand with the content. I've just put a twitter feed in there and I get a scroll bar.
Can anyone help please?
Many thanks,
Andy
it has a height given to it in css...
#panelwrap {
float: right;
margin-top: 5px;
margin-right: 10px;
width: 200px;
height: 595px; /* remove this or set as auto */
margin-bottom: 5px;
}
...remove that and the content will expand.
On #panelwrap you are explicitly setting a height. Remove that or set it to auto (which is the default value of height).
I want to implement a "center frame" like a narrow and tall page in the center of my webpage.
And I want to make sure it has 200 pixels of space both in left and right. The following css rule works for left, but right is nearly on the right of body.
div#centerframe
{
background:rgba(255, 255, 255, 0.85);
box-shadow:0em 0.5em 2em 0.3em;
margin-left: 200px;
margin-top: 200px; /* top works too */
margin-right: 200px;
float:left; /* because I want it to expand with its content */
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
}
I made a fiddle to show you the bad behaviour, but it behaves as I want in this fiddle :
http://jsfiddle.net/UMscz/
however, with the same dom, it doesn't work on my site.
the body rule is like this :
body
{
position:relative;
width:100%;
height:100%;
padding:0;
margin:0;
overflow:auto;
}
and my dom is like
<body>
<div id='centerframe'>
<div id='article_wrapper'>
</div>
</div>
</body>
So how can I make sure that '#centerframe' has a certain pixels of space in right and left ?
The reason I'm trying to do is I want to show fixed size ads on the page.
Thanks !
Edit :
And I'm sure that nothing in the content "pushes" it to stretch. I don't set any width rules in the content so that it resizes according to centerframe and its padding.
Edit 2:
I spotted the problem. But it is still strange. I had some elements that pushes its width, in index.php (inline style). But when I click to a link, and go to show_article.php, the width of the centerframe remains as in the index.php.
So when I removed the width rule in index.php, it also fixed the width in show_article.php, even though the width rule was only in index.php.
So, does the css rule remain when going to another page? It shouldn't, right ?
this will work :
div#centerframe
{
background:rgba(255, 255, 255, 0.85);
box-shadow:0em 0.5em 2em 0.3em;
margin-left: 200px;
margin-top: 200px; /* top works too */
margin-right: 200px;
padding-top: 90px;
padding-bottom: 90px;
padding-left: 90px;
padding-right: 90px;
max-width:100%;
}
(remove float left and add max-width)
you can also wrap your center div with 2 fixed size div.
I guess you're using a Framework like drupal or Joomla.
View source of show_article.php from your browser (ctrl+u), that must contain index.php header with your css rules
Id like to know why my inner wrap of the desktop css for this site is not working.
Basically if set innerwrap to margin:0 auto; and width: auto; there is no problem, but it's not centered on the footer or main div
When I have innerwrap as it's currently set margin:0 auto; and width:960px; you'll notice that the page presents a horizontal scroll bar after resizing the window a bit, and all the content is squished to the left with a white background starting to become visible.
Is there anyway to have it transition fluidly to the next tablet size layout without have a scroll bar appearing and content getting squished?
It shows Scrollbar because of the padding you apply in .innerwrap
Read this article about the Box Model
Use of padding on the sides of certain elements when applying 100% width to parent element its not recommendable because it adds width to the whole group, and since you,re using the browsers width it shows the scrollber to see the extra space you added.
My humble advice is that if you want a block element to appear centered apply an margin:auto style rule whenever is possible, the same also has to be displayed as a block element with no float.
Remove this:
.innerwrap {
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
Keep This
.innerwrap {
margin: auto;
width: 960px;
}
Since you are applying fixed margins for you social icons they will show misplaced, so don't use fixed margins for centering them, use percentage width instead.
you may want use a common class for aligning them
.social {
background-position: center center;
background-repeat: no-repeat;
display: block !important;
float: none;
height: 150px;
margin: auto;
padding-top: 50px;
width: 30% !important;
}
For a.twittersocial and a.twittersocial:hover and the rest of the social links just keep the background properties.
Create a determined class if you need to apply common style rules to several elements (if there are many of them) and avoid usage of ID selectors whenever is possible, use classes instead (.daclass).
Use a web inspector like Firebug to track down styling errors.
Good luck Developer!
Why is this the default padding for twitter bootstrap on the body?
body {
padding-top: 60px;
padding-left: 20px;
}
I was under the impression that "reset" css-ish files usually removed all padding/margins.
The padding on the body overrides the the .css files.
As odupont mentioned, "It's useful when you have a navbar navbar-fixed-top at the top of your page"
The padding will set a 20px vertical clearance between the top-fixed positioned nav bar and your document's body. As show in the above code, padding-top: 60px;
40px vertical padding, to clear out the height of the top-fixed nav-bar, that has a 40px height. And then, 20px vertical clearance between the nav-bar and body. So, 60px for the padding-top was declared.
That css thing was inserted in the body for specificity purpose, it overrides whatever padding styling you have in the .css file.
Try to comment the above code, and see the result.
It's useful when you have a navbar navbar-fixed-top at the top of your page, like the example on Bootstrap Doc.
If you have a div and wanted to have the background of the div stretch across the page, consider using negative margins equivalent to the padding on the body, and then adding the padding to the div:
margin-left: -20px;
padding-left: 20px;
margin-right: -20px;
padding-right: 20px;
I have padding to the right of my archives and search page and I believe it has to do with my body element, however I'm not quite sure what is different on these pages are from the other pages on the site of which are all fine for style wise as they all use the same format. It's a wordpress website. As I said, it's only happening to this page and the search page and all others are fine, so I'm confused as to what it's doing.
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }
body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
aside { width: 260px; height: auto; float: left; position: relative;}
#main { width: 650px; height: auto; float: right; position: relative;}
#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }
If you decrease the size of your window you'll notice that a scroll bar on the bottom of the page shows up and then the padding on the right starts to take shape. If you make your window larger that padding space is then gone and the scroll bar on the bottom disappears. Have I restricted my body tag in any way to have this happen?
I've looked through this one but I already have a min-width defined.
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
In your style.css file at Line 108, remove the width attribute from the header tag to fix your horizontal scrollbar issue.
Fixed CSS:
header { height: auto; margin: 0 auto; display: block;}
For review, 3D View in Firefox browser shows the header as the gray bar with is the root of your problem. The other styles that create the text are not affected.
Tip: Right mouse-click the above image and view in new tab to see in original size.
Ah, if I'm understanding your problem correctly, it appears that the tag header, specifically its style width: 960px, is what is causing this peculiar occurrence. The containing div around the header, #main, only has width: 650px. As a result, the excess width of the header causes it to extend beyond the edge of the div.
The reason why it seems to be appearing as padding only at smaller screen widths is because the containing div around all that, #container, is centered by its margins - so the effects of the over-wide header won't become apparent until the browser is thin enough such that its right edge begins to overlap the right side of the header.
Rather than fixing this by just dropping the width: 960px from the styles of the header (which may mess up the site where this width for header tags is actually needed), I would suggest adding an overriding class to all offending tags, perhaps on the lines of .archive-header { width: auto; }. But I guess the solution is up to you, since you probably know the site better than I do.
I hope this helps! (I really do, otherwise you'd have read all this for nothing! Sorry if you did...) For the future, try downloading Firebug for Mozilla Firefox, which has a handy element inspector which will let you play around with the styles of elements to see what works. It should help you spot these kinds of issues on your own, so you can fix them quicker.