Centering responsive header - wordpress blog - html

I've tried several methods but can't seem to get each part of this accomplished. I've made a wordpress blog for someone and she was happy with it but recently wanted the header changed. I had it wide and she wanted it boxed/centered. The header contains logo, nav and two images on the left that the client wanted placed there for looks, basically. The blog is responsive and once the screen gets to a certain point, the header matches the container of the rest of the page. But on fullscreen laptop/desktop, it still starts out much wider with just a bit of padding on each side. When I pad it to the right width, then it gets to small when the screen changes. I want it to be the same width of the main slider and container at all times.
The blog is at http://www.allloveblog.com
The CSS I have for the header currently:
.fusion-header{
position:relative;
display:block;
/*width:100%;*/
/*padding-left:162px;
padding-right:160px;*/
padding-top:0px;
padding-bottom:0px;
}
.fusion-header-wrapper{
position:relative;
display:block;
width:100%;
float:center;
}
If you change your browser window you can see where the change takes place and it becomes stick as soon as it's the width of the other containers, I just need it to start at the width of the container.
Any help is much appreciated.

I think all you have to do is this:
.fusion-header-wrapper {
max-width: 1160px;
margin: 0 auto;
}
In case you need to overwrite some CSS rules just add body before the class. This way your rule will be prioritized and you can easily identify your rules. Like this:
body .fusion-header-wrapper {
max-width: 1160px;
margin: 0 auto;
}
EXPLANATION
Basically what you needed to do is set a width limit to the header matching the main's width limit max-width: 1160px; and obviously center the header with margin: 0 auto;
#main has 30px padding left and right.
Inside #main we have .fusion-row with max-width: 1100px;
Inside .fusion-header-wrapper we have .fusion-header with 30px padding left and right.
So if you set max-width: 1100px;you will notice that you need to add 60 more px because of the paddings on other divs.
P.S. Make sure you create a Child Theme for editing the existing WP Theme.

Related

DIV keeps collapsing to following line

I have two divs inside a main container. One is floating left (youtube video), and the other one on the right (soundcloud player).
When I zoom in (110%) the div container on the right collapses underneath, onto the next line.
How can I stop this from happening? Am I missing something in the CSS?
.youtube {
float: left;
width: 640px;
height: 360px;
}
.maincontainer {
position:relative;
margin-top: 1%;
margin-right: auto;
margin-left: auto;
max-width: 1900px;
height: 1000px;
padding-right: 10px;
padding-left: 10px;
}
.soundcloud {
float:right;
height:388px;
width:580px;
padding-right:50px;
}
jsfiddle : http://jsfiddle.net/richirich/nZgw5/1/
Thanks!
EDIT: Figured it out. I was using "max-width" in the .maincontainer div. I changed it and used "width" instead and now the soundcloud player doesn't drop down to the next line anymore. So that's solved.
This leads me to another question though: how am I supposed to know whether to use % or px to define the dimensions of a div? People have given me conflicting answers and it just confuses me...
I personally found that using pixels helps the boxes to stay in place and not drift apart when zooming in or zooming out..
Add a CSS Reset, which involves putting:
* {
margin:0;
padding 0;
}
at the top of your CSS file. This resets all margins and padding.
If that doesn't work try making the div that contains the whole middle section of the site (The youtube video and text and the soundcloud box), I think you've called it main container, a little bigger. Add maybe 10-15 pixels to the width. It could be running out of space.
Hope this helps. Next time try posting a little more info and in particular some code :)

How to center content in a div in responsive skeleton?

There are similar questions to this but none of them are solving this problem.
I have built my site using a skeleton framework (http://www.getskeleton.com). For some reason, when i try to apply padding or any margin greater than 5px to the content in the main div on the site, the text portion jumps below the image. I've tried using their "offset-by" classes but the same thing happens. I've tried using
margin:0 auto; on all divs in that section but to no avail. I've also tried using text-align:center; but that didn't work either (oddly, this only centers the h1 element in that section but nothing else...).
The other issue I'm having is that I want all the backgrounds to expand to fit the width of the browser window and all the content should remain in the center but that doesn't seem to work well with this layout. If I set the container div's width to 100% it does expand but I end up having to set all the column and offset-by classes to 100% as well and then that messes up the navigation, etc. I want to keep my layout how I have it now but I just want the backgrounds to expand (including footer height) and for all content to be centered.
Here is the screenshot of what it looks like in the browser: http://i.imgur.com/K3LAshv.png
Can anyone please take a look at the code and let me know what I should fix here? I've added my code on JSFiddle:http://jsfiddle.net/z9uVK/
Many thanks in advance!!
The skeleton is confusing the hell out of me, there is just so much going on... so I eliminated all CSS and added a few simple rules demonstrating the techniques I would use to code this behavior from scratch
Since you want the background color bands to extend beyond the container, I am setting the container to 100% and placing extra divs around each of header, main and footer. These have width 100% also. The width of #header, #main, footer is set to 960px by default and reduced with a media query. I have also set the columns and the headshot image to use percents instead of pixels. I also removed a couple inline style rules from the HTML because they were breaking this new code.
http://jsfiddle.net/W7wG3/1/
// part of my css:
.container{width:100%;}
#headerBin{
background-color: white;
border-top: 15px solid #4d4d4d;
}
#header, footer, #main{
width: 960px;
margin:auto;
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#header, footer, #main{
width: 768px;
margin:auto;
}
}

How do I get the content (mostly images) to scale or resize with the window size on tumblr?

My blog/website is iamdonle.com
An example of what I want is 13thwitness.com
The images on mine doesn't scale and a scroll bar will appear. On his website the images get smaller with the window. I'm sure it's simple but I'm a noob. Please help!
You images are scaling down, but your logo is not!
Try:
.logo {
max-width: 100%;
}
First, you'll need to make sure your container is able to scale. Right now it has a set width of 1150px, this needs to be either a max-width or percentage based.
First, remove the width declared on #container and add this CSS:
#container {
max-width: 1150px;
padding: 5px 30px 0;
}
Then you'll need to remove the width declared for your header. You can do this by either removing the line completely (line 82 of your CSS file) or by overriding it in your 'Custom CSS' field box in the Customization screen by doing:
#header {
width: 100%;
}
Then, as others have mentioned, you'll need to add a max-width to your logo as well.
#header img {
max-width: 100%;
}
Note: when I viewed the blog you were using the "Quite Big" theme, the code above only applies to that theme.

Fluid layout with margin-bottom and nested div 100% height issues

I'm in the process of transforming an existing fixed layout to be "fluid".
I've got 2 issues:
When #content contains a lot of data, which makes it expand over the viewport I can't find a way to have a margin at the bottom.
The #content seems to "loose" it's height when position:relative; is added, which is necessary to place #content on to of #topgradient. I need #test (blue border) to fill #content and #content needs to fill #contentwrapper.
I've got an existing fixed layout which works great, the issues began after I added/changed height: auto; min-height: 100%; on the divs.
See this sort of messy/prototyping jsfiddle: http://jsfiddle.net/bQeu3/2/ (click in the white area (#content) to change content)
The optimal solution on issue 1 would look like:
The optimal solution on issue 2 would look like:
Hope you can help?
for the first question:
http://jsfiddle.net/bQeu3/7/
remove height:100% from #page
add padding:1px to #page
add margin-bottom:100px to #contentwrapper
to keep the size of #contentwrapper when you clicked something:
#test{
min-height: 300px;
border: 5px solid blue;
margin: 5px;
}
you might need to correct the 300px considering borders and such...

Making my site fluid

I'm trying to create a "fluid" website and have in my css file:
page-wrap{
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
In my template for the page, I have my main body of text set to a width of 80% and centered. My intention is that when I make my browser window smaller, it will remove the white space on the left and right side of the body until there is no space around the body. At that point, a horizontal scroll bar appears. I'm not sure if I explained that clearly, but an example would be like stackoverflow.com, with the whitespace on the left and right side of the body being removed when you make the browser window smaller. Unfortunately, with what I have, the space around my main body stays the same while my main body adjusts to the 80% width. So what do I need to do to correct it and achieve my desired results? Do I need a fixed size for this instead of a percent?
That's fairly simple, all you need to do is have a fixed width on your page wrap div with auto margins.
#page-wrap
{
width:780px;
margin:10px auto;
}
Forget the min/max-width.
It's not clear for me.
If you use, for the width 80% of the available window width, it's normal that the bloc resizes to adapt…
You must have a fixed width for the center part.
I use this :
#centerdiv {
position: absolute;
width:950px;
left: 50%;
margin-left:-475px; }