I want to get rid of all padding around the main page elemnts on the front page of my FRC team's website www.powerhawks.org because I am re-writing the page. I have a separate page where I am developing the new content that page is here. If I remove all padding from the page element that includes the top menu so I have used inspect element to find that this code affects the element I want to remove padding for.
/* base : layout
/* ------------------------------------ */
#wrapper { min-width: 1024px; height: 100%; }
.container { padding: 0 20px; }
.container-inner { max-width: 1380px; min-width: 1380px; width: 100%; margin: 0 auto; }
.main { background-color: #fff!important; position: relative; }
.main-inner { position: relative; min-height: 600px; /* instead of sticky footer */ }
.content { width: 100%; position: relative; }
.pad { padding: 0px 30px 20px; }
This is for the entire website though. The only way I know how to make this affect the front page is if I were to edit the div but I need access to the full HTML file for that which I do not know how to find.
Your body has unique classes for each page. For example, using page-id-442 for sponsorship.
Trying putting .page-id-442 in front of your CSS selector:
.page-id-442 .container { padding: 0 20px; }
Related
I am having real difficulties centering and aligning a theme in Wordpress called "Amadeus". The website is heidikaloustian.com. I want the width of .content-area which is 740px and center it, the menu should be left aligned and the menu right aligned within it according to the mockup. Help, what am I missing?
Mockup of centered design;
Here's a start for you:
/* Line 1117 in style.css */
.site-header {
text-align: left;
background-color: #fff;
width: 740px;
margin: auto;
}
/* Line 1199 in style.css */
.site-content {
text-align: center;
margin-top: 0px;
width: 740px;
}
Since your content is limited to 740px I set the entire page content and header to that width and it gives the look you show in your mock-up.
What you could do is the following:
#page {
width: 740px;
margin: 0 auto;
}
.site-header {
display: flex;
}
.main-navigation {
align-self: flex-end;
}
.main-navigation li {
padding: 14px;
}
You will need to remove the container class from the site header and from the main-navigation.
Also remember to add the flexbox prefixes, in case you're going to support other browsers.
I am trying to make a responsive blog. Here is my code for my two halves:
.masthead {
background-color: $hot-orange;
float:left;
position: fixed;
height: 100%;
width: 32%;
#include mobile {
text-align: center;
}
}
.main-body {
float: right;
width: 68%
}
Here is the container that is wrapping both:
.container {
margin: 0 auto;
max-width: 1250px;
width: 100%;
}
Am I doing anything wrong? When I open the inspector and highlight both halves, it looks like the right half (the main-body) overlaps with the left slightly. I can't seem to find the issue.
Here is my repo
My situation:
On my page I have multiple collapsible panels in the right hand column of my main content.
At the moment what happens is when I expand the panel (which contains a large amount of text) it goes off the page.
Therefore meaning that the user can't read it. This due the fact that the height is hard coded.
Now what I want to happen is when the div expands, if it reaches the max height of the page, the page height expands to incorporate all of the text.
Question:
Is there a way to make it possible that the page height expands along with the div?
My CSS:
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
#page {
overflow: hidden;
width: 900px;
padding: 0px 50px 50px 50px;
background-color: #FFFFFF;
}
#content {
float: right;
width: 580px;
}
Thankyou for any suggestions
Instead of using height you could try to set position to "absolute" and 0px top and bot on the .container?
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
top: 0px;
bottom: 0px;
}
You can make .container a clearfix so it will expand to the size of the floated element inside of it. Here's a great article on using clearfix.
.container {
width: 1000px;
margin: 0px auto;
background-color:White;
height: 0px auto;
}
.container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
That code will work for everything outside of IE6&7. If you need tose too just take a look at the article.
Never mind guys, I solved it....It was due to the fact that i was positioning the div with a relative height and width, so i just used margin-top instead.
Thanks to everyone
I have a question. I'm creating a single column website that consists of a header, body and footer. I'm able to get the footer to stick to the bottom of the page during re-size, however my question is this. How do I get the window to "eat" the footer div when re-sizing rather than having it pushed up? A good example would be ign.com
* {
margin: 0;
}
body
{
height: 100%;
background-image: url("..");
}
html
{
height: 100%;
}
.wrapper
{
width: 950px;
min-width: 950px;
min-height: 100%;
height: auto
height: 100%;
margin: 0 auto -4em;
border: 2px solid black;
}
.footer, .push
{
height: 4em;
border: 2px solid black;
}
What you're asking for is the default behavior of block elements.
Example:
HTML:
<header></header>
<div></div>
<footer></footer>
CSS:
header, footer {
height: 5em;
}
div {
height: 100em;
}
Demo
My advice would be to add more content to your page, or set a larger min-height to the wrapper.
Add the following code to the footer and set certain min-height to the html document.
.footer {
margin:1% 0;
}
Live site.
Toward the bottom of the page "Parlour Policies" is floating in the middle of the page, though it should be styled according to this:
.content {
height: 100%;
padding-bottom: 40px;
padding-left: 20px;
width: 600px;
}
Any ideas what's causing the location shift? I didn't see anything in Firebug, and the few validation errors(which I'm working to fix right now) all pertain the WP generated header and don't negatively effect any of the other <div class="content"> on different pages.
Just add overflow: hidden to .content - it will clear your floats
.content {
height: 100%;
padding-bottom: 40px;
padding-left: 20px;
overflow: hidden; /* this */
width: 600px;
}