Untitled Theme: Centering Picture on Front Page

  • Unknown's avatar
    digifiend · Member ·

    I’m tinkering again with the front page, and I am interested in changing the default picture on featured posts that has 100% width to a centered, fixed width picture. So far, I have made the following change to at least get the picture to the desired width:

    .flexslider .slides img {
	margin: 20px 0 0 0;
	width: 1024px;
	height: auto;
}

    I can’t for the life of me figure out how to get the photo to center instead of being right or left justified.

    Any suggestions?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, change the margin declaration in the CSS you have above to the following which sets the left and right margins of the image to “auto” so it will always stay centered in the browser window up until the browser window becomes narrower than the image itself at which time it will start to crop on the right side.

    .flexslider .slides img {
    height: auto;
    margin: 20px auto 0;
    width: 1024px;
}

    An alternative though would be to change the “width” in the above to “max-width” so that when the browser window or device screen is narrower than the image, the image will resize.

    .flexslider .slides img {
    height: auto;
    margin: 20px auto 0;
    max-width: 1024px;
}
  • Unknown's avatar
    digifiend · Member ·

    That first edit did the trick, and I was able to adjust the text of the feature image afterwards to a pleasing placement. Now I have run into another problem after adding a 2nd post so the slider is functional. The post selectors fall outside the picture in the featured post, and in fact the entire area on both sides of the picture is linked.

    I obviously don’t have a handle on where that adjustment needs to be made (to have the post selectors and clickable range within the picture only), I’m wondering how complicated that adjustment would be to make.

    BTW, thanks for the help on the centering, I sincerely appreciate it.

  • Unknown's avatar
    digifiend · Member ·

    Adjustment made, only thing I have to now figure out is why an image that I have loaded in at 1000×560 is being auto-cropped to 1000×400. If I crop pics going in at 1000×400, then then they are sized wrong when not a featured post. If I size them at the smaller size, then they are sized wrong as a featured post.

    In a perfect world, I would be able to size all the pics at 1000×560, have them display properly as a featured post, then have them thumbnail at the same ratio to 300×168.

  • Unknown's avatar
    digifiend · Member ·

    Im going to open a new thread since my issues now have nothing to do with the centering of the picture. Thanks for your help thesacredpath :)

  • The topic ‘Untitled Theme: Centering Picture on Front Page’ is closed to new replies.