Need help to keep my images scaled consistantly

  • Unknown's avatar
    expresshomefundinglatino · Member ·

    I’m happy with the overall appearance of my sight, but the problem I’m having is my images keep getting cut off.

    My site is Express-espanol.com

    You can see the image on the homepage is being cropped off at the bottom. The little boy’s elbows aren’t showing.

    The comprador page has an image of a couple inside an empty house. Usually it’s at the top of the image that gets cropped off. You can see the salesman hair get a cut.

    The biggest problem page for me is the nuestra proceso de compra page image. A good chunk is cropped off of the top of the image

    What I’m trying to do is clean up those crops so that the images are nice and complete, resulting in the site looking the same across different browsers. Please help :)

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

  • Unknown's avatar
    hallluke · Member ·

    The Shoreditch theme page gives the following specification:

    Featured Images for posts and pages are 2000 wide by 1500 high.

    But it also centres the image and sizes it to cover the screen, this means that when the section is very wide it will crop the top and bottom of the picture. You can set the position of the image with CSS to stop it chopping heads off with this code, it will just move all the cropping to the bottom though (which might make the home page look worse):

    .page-template-panel-page .hentry.has-post-thumbnail {
	background-position: top center;
}

    You can set a positioning preference on a page by page basis though. Here’s two examples for your home and Comprador pages:

    .home.page-template-panel-page .hentry.has-post-thumbnail {
	background-position: bottom center;
}
.page-id-48.page-template-panel-page .hentry.has-post-thumbnail {
	background-position: bottom center;
}

    To find the specific page ID number, view the HTML source and looking at the classes assigned to the body tag. You can’t really do much more than that as your site can be viewed on so many different screen sizes it’s impossible to adjust for them all.

    Perhaps try including an image that is much wider than it is tall so that the theme shows all the main content (at least vertically) on wider screens and instead crops from the sides on narrower devices? It really depends on the image and which part of it you don’t want to be cropped.

  • The topic ‘Need help to keep my images scaled consistantly’ is closed to new replies.