Minimum Pro: Home page image display

[radiantaction]

Hi All,
I just finished a website (http://www.leaddeep.com) that when viewing from on an ipad vertically the home page image gets cut off. It should be an entire picture of the person but it's just her head showing.

Here is a link to a screenshot from ipad > http://www.leaddeep.com/wp-content/uploads/2015/07/IMG_0598.jpg

I'm not sure where to start on fixing this. Can anyone point me in the right direction?

Thank you so much!

Warmly,
Kirsten

http://www.leaddeep.com

[Ginger]

Hi Kirsten,

That is a margin-top entry in your style.css file that controls how much of that image will show. For the desktop it is set to 600px:

.minimum .site-tagline {
    margin-top: 600px;
}

In your media queries (those control styling on mobile devices) at the bottom of your style.css, it has it reduced to 200px for the iPad, portrait width which is 768 px. You can see this entry in this section:

@media only screen and (max-width: 768px){

You can increase that number to show what you would like. I would also check out the other max-width sections for different screen sizes to see if they need adjusting as well. You can experiment with this in your browser and then go make all the changes at one time to your style.css file. To do this use a tool like Inspect Element....this tutorial will help show you what i mean:

https://www.nutsandboltsmedia.com/how-to-customize-your-genesis-child-theme-with-chromes-inspector/

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[radiantaction]

Thank you Ginger! Using your feedback I was able to fix the problem. Thanks!!

Kirsten

[unklee]

Hi, I want to control my background image too.

1. I can't find any information on the optimum size for this image, or the optimum shape (i.e. width = 2 x height, or whatever). I used a 700 x 350 jpg as a trial but it showed only a small part and magnified that greatly, even though the full page width is much bigger than 700.

2. When you say we can reset the margins, can we use that to reduce the height, or show more or less at the top and/or show more or less at the bottom. i.e. does this work in all cases? (I will experiment, but any guidance would help thanks.)

A quick hint would help thanks.

PS Kirsten, the picture and the site look really good!

[Ginger]

Hi there,

You don't want to adjust margins, it's all about the image size and focus. Because these themes use backstretch, you want an image that is somewhat zoomed-out since it will zoom in on it's own. Usually a 3 to 1 ratio is good, something like 1800 x 600 but it does not have to be exact -- it just needs to be a wide photo vs a tall. Hope that makes sense!

---

@gscoolidge | Support Nerd | Website Producer/Tweaker | IDX Integrations | Hosting Options

[unklee]

Thanks for your help. But even with a picture 1800 x 600, it only showed half the width on my screen. The only way I could get it to show the full width was to reduce the browser window's height so it was just showing the full picture, nothing below it - then the full width was showing. I even tried putting a half size picture on a white background to make it 1800 x 600 and the picture didn't show well.

I think this convinces me that the stretch graphic idea isn't a good one unless the picture is pretty abstract or homogeneous (like a picture of sky or an aerial photo of a forest), and for most people converting to a standard graphic is better - as the many discussions here attest.

I'm a little sorry to come to that conclusion, but the present design is too unpredictable for different screen sizes, and being able to show a site well on different screen sizes is an essential for WordPress these days and one of the reasons I purchased Genesis in the first place.

Thanks for your help, it enabled me to come to this conclusion.

[unklee]

Just for the record, I came to the conclusion that fiddling with the background image is just too much trouble, so I got the result I wanted by setting up a new widget area on the front page and adding a photo to that. It can sit in the same spot and is totally responsive without a lot of mucking around. So far in trialling it, I haven't found any problems.

[Author]

Posts