Home page Graphic Issues on mobile

Could someone please help me with this??

Hi edhruv – thanks for your patience over the holidays. I’ll have a look at this now and let you know what I find.

I’ve done some testing with one of your images on a test site running Harmonic. I think what’s happening is that the smaller screens are picking up an empty portion of the both images. So rather than the images being missing, they’re there, but depending on the size of your phone, the noticeable parts of the image like the hand or the candle may not be visible.

For example, on my test site, you can see a bit of the fingers here on an iPhone 6:

Unfortunately it’s very hard to override the background image positioning in Harmonic because the images are placed inline dynamically, making it difficult to override with custom CSS or a child theme. You might try altering your images or using different ones so that the key parts are closer to the left edge of the screen.

Hey,

Thanks so much for the revert. I see your point. But this appears to me to be a little beyond the screen size or such. Please note that I am not a tech wiz like most of you, though I can handle a bit of html and such.

If you look at the first image, only part of the graphic is visible. As you can see the bottom portion gets cut off. Is there some way for me to get the image to get displayed fully or to get resized to ensure that the whole image gets displayed?

I played around with this a bit this morning and have some CSS you can try – Kathryn is right, the way the images are dynamically defined depending on the screen size makes this a bit tricky.

Another factor is that the images on are Harmonic are designed more as backgrounds (so they can handle scaling) behind the content or logo/tagline. In your case, the image is the content.

Try adding this CSS snippet – it should help to dynamically set the height of the first panel based on the width of the screen – so the full image should be visible on all devices, and center all of the images on mobile devices:

/*Set first panel to maintain a 2:1 aspect ratio (based on current image)*/
#slide-1 {
	height: 50vw !important;
}

/*Always center the background images, even on mobile*/
.bcg {
	background-position: 50% 0 !important;
}

/*Prevent the first panel's background from cropping*/
@media screen and (min-width: 1140px) {
	#slide-1 .bcg {
		background-size: contain;
		background-position: 50% 3vw !important;
	}
}

/*Allow cropping on large screens, to prevent black bars above/beside the image
@media screen and (min-width: 2049px) {
  #slide-1 .bcg	{
		background-size: cover;
	}
}

It uses more !important styles than I’d like, but we’re working against inline declarations, so it’s a necessary evil in this case ??

There will be some minor cropping on really large screens, but it shouldn’t be enough to hide any of the text ??