Featured image not the same across browsers

Tagged: Featured image has different sizes

This topic has 31 replies, 2 voices, and was last updated 3 years, 3 months ago by Skandha.

Viewing 20 posts - 1 through 20 (of 32 total)

1 2 →

Author

Posts
September 3, 2021 at 12:25 am #289345

lblumenfeld
Participant

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.

September 3, 2021 at 2:10 am #289353

Skandha
Participant

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

Kind Regards,
Skandha

September 3, 2021 at 1:00 pm #289369

lblumenfeld
Participant

http://www.brassaddiction.com

September 3, 2021 at 2:13 pm #289374

lblumenfeld
Participant

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

September 3, 2021 at 11:31 pm #289388

lblumenfeld
Participant

Any ideas?

September 4, 2021 at 2:37 am #289407

Skandha
Participant

@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

September 4, 2021 at 9:55 pm #289434

lblumenfeld
Participant

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

September 4, 2021 at 9:57 pm #289435

lblumenfeld
Participant

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

September 4, 2021 at 10:15 pm #289436

lblumenfeld
Participant

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.

September 6, 2021 at 5:02 am #289508

Skandha
Participant

@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

September 6, 2021 at 12:51 pm #289532

lblumenfeld
Participant

Why are my responses suddenly awaiting moderation?

September 6, 2021 at 12:53 pm #289533

lblumenfeld
Participant

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

September 7, 2021 at 2:41 am #289531

lblumenfeld
Participant

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.

September 7, 2021 at 3:34 am #289595
Skandha
Participant
@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
September 7, 2021 at 3:02 pm #289606

lblumenfeld
Participant

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.

September 7, 2021 at 3:38 pm #289610

lblumenfeld
Participant

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.

September 8, 2021 at 3:34 am #289637
Skandha
Participant
@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
September 9, 2021 at 1:12 am #289708

lblumenfeld
Participant

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

September 9, 2021 at 2:06 am #289684

lblumenfeld
Participant

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?

September 9, 2021 at 6:40 am #289764

Skandha
Participant

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

Kind Regards,
Skandha
Author

Posts