Front page hero scaling issues (Business Identity Theme)

  • Unknown's avatar
    andymcnamara · Member ·

    I’m having problems getting a front page hero image to scale ‘correctly’.
    The image I’m adding is a 1440 wide jpeg but the actual displayed width keeps changing – apparently depending on factors such as the text I overlay. The image does not re-scale appropriately for different display sizes.

    Using the same image for the flourish, results in the image re-scaling perfectly for different display sizes (desktop, tablet, phone) while the front page hero seems to do its own thing.
    Am I using this wrong?
    Thanks.

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

  • Unknown's avatar
    jeremeylduvall · Member ·

    Can you try to upload an image that is exactly 1440 by 422? That’s the specific width/height ratio recommended by the theme details.

    Also, could you elaborate on “the actual displayed width keeps changing?” If you could provide me with some specific instances where the theme isn’t acting as expected, I’ll be able to troubleshoot a bit more!

  • Unknown's avatar
    andymcnamara · Member ·

    Thanks for the response. I’ve now uploaded a 1440 by 422 image to the front page hero area.

    The original image (before uploading to the website) has a factory centred with white space all around, but once added to the front page hero section it doesn’t display correctly:

    On my macbook screen it crops off part of the top of the image.
    On my iPad it crops both top and bottom off the image.

    By the way for this section the documentation doesn’t seem to recommend any particular height:

    “Front page hero: ….. The recommended width dimension for this area is 1440 pixels wide. Feel free to play around with the height of the image, but keep in mind that you’ll want to pick something that looks nice on all devices…”

    Thanks!

  • Unknown's avatar
    andymcnamara · Member ·

    Further info:
    The same image placed in the flourish resized beautifully on all devices (by this I mean you see the same, full image un-cropped, just resized to fit).

    The same image placed as a header image on another page (not front page) crops off the sides (note the difference to the front page hero which crops off the top and bottom) and doesn’t resize properly.

    You can see an example of both of the above here:
    http://andrewjamesmcnamara.com/experience/

  • Unknown's avatar
    andymcnamara · Member ·

    Afternote to above: The above example (experience page) does look OK on my macbook screen but resizes badly (cropping) on both iPad and iPhone.
    The same image used as a flourish on this page resized properly without cropping across all devices.

  • Unknown's avatar
    jeremeylduvall · Member ·

    Hey Andrew,

    Please see below!

    By the way for this section the documentation doesn’t seem to recommend any particular height:

    Ah – you’re definitely correct. I mistakenly read the Custom Header Image information. Sorry about that.

    The above example (experience page) does look OK on my macbook screen but resizes badly (cropping) on both iPad and iPhone.

    The same image used as a flourish on this page resized properly without cropping across all devices.

    The Flourish and Header areas have different styling, which leads to a different display on mobile devices (by design). Just so we’re on the same page, the main issue is that the hero image is getting cut off on mobile devices. You would like it to display the same size as the flourish image. Correct?

  • Unknown's avatar
    andymcnamara · Member ·

    Hi Jeremy

    I’ve probably confused this with too much info so I’ll try to summarise a little better below.

    Issue 1: I can’t get my FRONT PAGE HERO image on my HOME page to display as I want on ANY device. By this I mean that the image crops and scales in a seemingly random manner on all devices and looks good on none. On my macbook it seems to be cropping off the TOP.

    Issue 1 background: I have uploaded an image at 1440 by 422 resolution. This same image is on my website in the FLOURISH section. It’s displayed fully and correctly here so you can see the original.

    Issue 2: I can’t get the HEADER image on my EXPERIENCE page to display as I want on MOBILE devices.

    Issue 2 background: This is the same image as used above and in this case crops off the image from the SIDES (i.e. differently to the FRONT PAGE HERO).

    I do get that there’s some deliberate auto-scaling / cropping on the FRONT PAGE HERO as part of the template but what I’m getting I’m finding completely unusable after a lot of experimenting with different resolutions.

    Plead do take a look at these 2 pages of my site at different display sizes to see what I’m talking about.

    Many thanks!

  • Unknown's avatar
    andymcnamara · Member ·

    Sorry – to answer your question: Yes I would like both the FRONT PAGE HERO image on the HOME page and the HEADER image on the EXPERIENCE page (and others) to display as the FLOURISH is on all devices.

    Thanks!

  • Unknown's avatar
    jeremeylduvall · Member ·

    Hey Andrew,

    Great! Thanks for clarifying. Let’s start with this bit of CSS. Can you drop it under Appearance -> Customize -> CSS?

    Note: After a bit more testing, this CSS doesn’t work quite as well as initially expected. 

    #hero {
	top: 90px;
	width: 100%;
	height: 600px;
	background-size: contain;
	background-color: #fff;
}

@media only screen
and (min-device-width : 480px)
and (max-device-width : 1024px) {
	#hero {
		height: auto;
		top: 20px;
	}
}

@media only screen
and (max-width : 480px) {
	#hero {
		height: auto;
		top: 20px;
	}
}

    I tested this out on a traditional screen, iPad, and iPhone 6. We may need to tinker around a bit, but I think this will get you the general look you’re going for.

    Let me know!

  • Unknown's avatar
    andymcnamara · Member ·

    Hi, thanks for that

    OK I’ve added the CSS (all new to me!) with the following results:

    FRONT PAGE HERO image on HOME SCREEN:
    MacBook Pro Retina: width is good but lots of white space above and below image.
    IPad Retina: Top half of image is cropped off (landscape and portrait mode).
    IPhone 5S: Top part (1/3 is) of image is cropped off in portrait mode. Image displays in full with LOTS of white space above and below in landscape mode.

    I’ll come back to the Experience page header later to avoid confusion!

    Thanks for the help!

  • Unknown's avatar
    jeremeylduvall · Member ·

    Hey Andrew,

    Thanks for reporting back. CSS can get a bit tricky especially when dealing with responsiveness across various screen sizes. The @media portions are my attempt at making sure the layout looks decent across iPhones, iPads, etc. The last thing we want to do is mess up how your site appears on mobile phones!

    I think the best option here would be one of the following two paths forward:

    1. Repost your question in the Business Identity support forum here:

    https://premium-themes.forums.wordpress.com/forum/business-identity

    The theme authors know this theme better than anyone, and they’ve been exceptionally active in that forum. They’ll be able to help you better than I can.

    2. Repost in the CSS Customization forum here:

    https://en.forums.wordpress.com/forum/css-customization

    We have some CSS gurus that are sharper than I at this kind of customization.

    I would urge you to go with option #1 first.

    I’m sorry to point you elsewhere! I tested this again today, but I wasn’t able to get this looking right. Either of the two options above will put you in much more capable hands.

    If you have any specific questions regarding WordPress.com, I’m happy to answer them!

  • Unknown's avatar
    andymcnamara · Member ·

    OK, I’ll take your advice and post in the business identity theme forum.

    Thanks for trying!

  • The topic ‘Front page hero scaling issues (Business Identity Theme)’ is closed to new replies.