[lblumenfeld]

On my laptop which is W10 and chrome, the featured image is the correct dimensions but is dimmed out.
On my iphone, the image is cropped on the sides, and is not dimmed.

Here’s what I need
1. The entire image must appears in its entirety and not crop on all browsers.

How do I do this?

Thanks.

[Skandha]

@lblumenfeld: Hello there,
Can you please post in your site URL so that I can look into the issue?

Kind Regards,
Skandha

[lblumenfeld]

http://www.brassaddiction.com

[lblumenfeld]

FYI, figuring these things out is key to us making a purchase. Thanks.

[lblumenfeld]

Any ideas?

[Skandha]

@lblumenfeld: Hello there,
I suggest to use the recommended size of 1920*1080px and check if this solves the issue. You can check out the recommended image sizes here.

Let me know if the issue persists!
Kind Regards,
Skandha

[lblumenfeld]

Not all of them are that size. How can I use ones that are not that size and have the page perform correctly?

[lblumenfeld]

I’m okay with a width of 1920, but the photos will have varying heights.

[lblumenfeld]

So, I need the page to work properly with any image height (each one might be different). I’m okay with a requirement for a width of 1920. This needs to work properly on all browsers. Thanks.

[Skandha]

@lblumenfeld: Hello there,
The Header Image on pages except the homepage displays with a smaller height and a black overlay. Do you want header image on inner pages to display like the homepage?

I checked your homepage on both Firefox and Chrome on laptop and didn’t find any difference with the images.

Kind Regards,
Skandha

[lblumenfeld]

Why are my responses suddenly awaiting moderation?

[lblumenfeld]

That’s not correct. Please see the contact us page. You’ll see that the sides of the photo are cut off on the iPhone when held vertically. The image is correct when the phone is held sideways.

Can you please tell me how to correct this? It also cuts off on chrome sometimes.

I really need to get this to work today or try another

[lblumenfeld]

That’s not correct. Please see http://brassaddiction.com/contact-us/ page. You’ll see that the sides of the photo are cut off on the iPhone when held vertically. The image is correct when the phone is held sideways.

Can you please tell me how to correct this? It also cuts off on chrome sometimes.

I really need to get this to work today or try another template.

Thanks.

[Skandha]

@lblumenfeld: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width: 800px) {
    .custom-header .wrapper::before {
        background-image: unset !important;
    }
    .custom-header-media img {
        display: block !important;
    }
    .custom-header-media img {
        position: unset !important;
        width: auto;
    }
    .custom-header-content {
        padding: 20px 25px !important;
    }
}

Let me know if this solves the issue!
Kind Regards,
Skandha

[lblumenfeld]

That CSS made the issue much worse. Now, when I view the site on the iPhone, the image is even more cut off when the phone is held vertically. Also, when I hold it in landscape, not that image is cut off too.

I just purchased the pro version of the template, Please let me know how to fix this issue. If the template is not compatible with iPhone then let me know that too.

I need a template that can be used across all devices (laptop, phone, ipad, etc.) Can your themes do this?

I also need a more rapid response. This conversation has been going on for 4 days. I am way behind.

[lblumenfeld]

To be clear, here is what I need.
1. The featured image needs to render completely and exactly the same on all browser sizes and all devices.
2. The title needs to show on the image as it does now.
3. The image should not be grayed out as it is now. It needs to show as original.

Thanks.

[Skandha]

@lblumenfeld: Hello there,
Sorry for the delay as we seem to be working in different timezones.
Can you please try using the CSS Code below instead of the above one and check if the image is now responsive on mobile devices or not?

.custom-header .wrapper:before {
	display: none;
}
.custom-header-media img, .custom-header-media video, .custom-header-media iframe {
    display: block;
    height: auto;
    position: unset;
    object-fit: unset;
}
.custom-header-content {
    padding: 254px 50px;
    position: absolute;
    top: 50%;
    padding: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
}
body:not(.home) .header-media .wrapper::after {
	display: none;
}

Let me know if this solves your issues!
Kind Regards,
Skandha

[lblumenfeld]

That worked to some degree, except that now the page title shows on the image mad not the page. How do I fix this?

[lblumenfeld]

The width is now correct, however, the page title displays over the image instead of at the top of the content, where it used to be. How do I reposition it there–without undoing the other corrections?

[Skandha]

@lblumenfeld: Hello there,
Do you want the Contact Us text to be below the image?

Kind Regards,
Skandha

[Author]

Posts