center site content on all devices - css

This is the site I am referring to: http://heattreatforum.flyten.net/
It was built as a child-site to the twenty-twelve theme.
I can't seem to get the content to center on every screen, and I am seeing a strange wide margin on the right that I just can't seem to locate in my css.
Any help would be much appreciated - thanks for looking!

The problem is that your div having id my-name has min-width: 1510px;. Delete it and all your problems will disappear.

Related

Image covering Form in Mobile Site

I have a responsive site that has an image next to a form. My problem is that when the screen shrinks the image covers the form. I would like it so that the form covers the image. I have tried changing the Z-Index but it doesn't seem to work. You can see examples of my problem here: http://inventivewebdesign.com/uctest/?page_id=45
Thanks in advance for your help!
I looked at it and just used CSS to make the specific div for this specific page to change the width when the screen shrinks, works fine now. Thanks for your ideas.

Issue with Div inside a div and page going to bottom

I have gone thru the site and searched for the last two hours and am trying to get a wordpress site to work correctly. Everything is working except the white box that holds the content will not go to the bottom no matter what I try. I have tried all the options here but I think it may be that I do not understand enough about css or the divs are all messed up from the template. Can someone please help out with what I have crossed. My page is located at http://craftedimages.com/AA/aae-events/ and you will see the white box on the right that does not extend down. I got this template and have been modifying it of which there were already lots of problems. Thanks for your time ahead of time.
Try adding
#page{
height:1035px;
}
..to the css - the sidebar is this height and although it is auto that is the given height
Hope this helps
Using chrome inspect element. I can see that your <div id="wrapper"></div> has the style
height:auto;
set it to
height:100%;
That should fix it. Only do that for this page. The other pages are set to auto because it forms to their content. This page doesn't have enough content to reach the bottom like the rest of the pages.

Why does one column seem to load first in Wordpress?

I have a Wordpress site that is doing something very bizarre. If you go to:
http://digitaldemo.net/joy/krippen-a-b-c/
When it loads, the main content div loads on the right hand side of the page
and then once the sidebar loads, THEN it gets pushed over to where it ought
to be.
It's only really noticable in Firefox, but I'd like to find out what is causing
it and fix the issue.
Any ideas?
I solved the issue! I added position:relative to the #content div and then added position:absolute and left:30px to the #content-left div. Voila!
Thanks for everyone who tried to help me!

Two divs not displaying equally in IE/Chrome, only in Firefox

The website: http://epic.lexcorp.ca/capabilities
If you open it in Firefox and then in Internet Explorer/Chrome you should see what I mean, and this is in regards to the two areas below the content (View Our Projects and News)
I've been trying to figure this out for about 40 minutes now and I'm at a loss. Help is greatly appreciated.
It's only a CSS problem.
Add this to your CSS file:
.bottomBox .region {
overflow:hidden;
}
With help from BumbleB2na I noticed there was a at the front of one of the tags.
That helped, but didn't fix it completely. I then noticed that there was margin-top areas that were pushing down the boxes entirely, so I adjusted the values to the div wrapping container and changed them to padding.
Seems to be seamless in all 3 browsers now.

How to get rid of blank space under SimpleViewer Gallery?

I am working on a website and have embedded a Simpleviewer gallery into one of my pages. There is a blank white area under the gallery that I can't make go away. My ultimate goal is to have no need to scroll vertically on the page.
Here is a link to the page: http://www.tuckermatthewsphoto.com/a...tomotive1.html
Any help is greatly appreciated. This is driving me absolutely nuts.
Thanks
Well, I figured it out for myself.
Since I knew that there was nothing on the bottom of the page that I needed, I decided on trying to hide the scrollbar, so I added into the css file:
body { overflow:hidden; }
No more scrolling! This seems like it would be a pretty useful trick, so far it works in Safari and Firefox.

Resources