Unable to align to images on a static front page

  • wujibifan

    #7465

    Hi,

    Thank you very much for the theme.

    I inherited this project and I’ve been struggling for days now trying to align the 2 images at the bottom of this page:

    Home

    I first inserted images on the bottom of the page using the default WP function, but could not get the images to align horizontally or vertically. I tried every combination of alignment – left, center, right – for each image without any luck.

    Then I created a new div with a unique ID and inserted the images into it and was unable to align the images again. Then I created 2 spans inside the new div and tried again to no avail. I deleted the spans.

    To help align the images I inserted an image into the main content that shows the images aligned where I want them – in other words, it’s just a guide. Although I intended to replace the image in container (one without my sample images) I realized just using the background image might be a solution; however, when I delete the images I am struggling to align, the main content container shrinks so that images on the background main content container aren’t visible.

    I have tried inserting new css rules into the css editor and into the custom css in the graphene options menu to no avail. I also tried using inline styles in the div I created at the bottom of the page with no luck.

    I can get 1 or the other image where I want it positioned, but when I try to adjust the second image’s position it moves both of them.

    I suspect there is a global css rule I can’t see using Firebug; rather, I don’t realize I’m seeing it.

    I’ve tried margins (+/-) and padding (+/-). I thought I had solved it with a negative margin, but the negative margin (margin-top: -300) would not increase beyond -300px, which was 25px too short.

    Any tips will be greatly appreciated. I’d prefer to have the individual images aligned so they could be changed easily, but locking the size of the main content container so the entire background image is visible works too.

    Thanks again.

    Brian

    wujibifan

    #38302

    I’ve done some more investigating on this issue and pinned down the problem, but I don’t know how to fix it.

    I deleted the images I uploaded using WordPress and am now attempting to display the full background image in the main content container.

    Using Firebug, if I increase the font size to 28 for the .body selector the container expands enough so the entire background image shows; however, the text looks horrible.

    Any tips on how I can force the container for the content to be fixed size so the entire background image won’t get cropped other than increasing the font size?

    Thanks.

    wujibifan

    #38303

    I figured this out.

    Mod

    Kenneth John Odle

    #38306

    While your site looks great on a large monitor, it really is wider than the monitors most people have. 1400px introduces the need for a horizontal scroll, and is not an incentive to stick around. I really would make it no wider than 1200px.

    As for your first post, it is difficult to give advice because you have not indicated what you are trying to align those images to.

    Quote:
    Any tips on how I can force the container for the content to be fixed size so the entire background image won’t get cropped other than increasing the font size?

    Try this:

    background-size: 100% 100%, auto;
    -o-background-size: 100% 100%, auto;
    -moz-background-size: 100% 100%, auto;
    -webkit-background-size: 100% 100%, auto;

    Probably won’t work in IE, however.

    wujibifan

    #38307

    Thanks for the input.

    Yes the size is an issue I noticed immediately. Problem is, the site’s owner, who doesn’t know enough to make the site, knows enough to specify that dimension. sigh…

    Thanks again.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.