- This topic has 31 replies, 2 voices, and was last updated 2 years, 11 months ago by
Skandha.
-
AuthorPosts
-
September 3, 2021 at 12:25 am #289345
lblumenfeld
ParticipantOn 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 #289353Skandha
Participant@lblumenfeld: Hello there,
Can you please post in your site URL so that I can look into the issue?Kind Regards,
SkandhaSeptember 3, 2021 at 1:00 pm #289369lblumenfeld
ParticipantSeptember 3, 2021 at 2:13 pm #289374lblumenfeld
ParticipantFYI, figuring these things out is key to us making a purchase. Thanks.
September 3, 2021 at 11:31 pm #289388lblumenfeld
ParticipantAny ideas?
September 4, 2021 at 2:37 am #289407Skandha
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,
SkandhaSeptember 4, 2021 at 9:55 pm #289434lblumenfeld
ParticipantNot 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 #289435lblumenfeld
ParticipantI’m okay with a width of 1920, but the photos will have varying heights.
September 4, 2021 at 10:15 pm #289436lblumenfeld
ParticipantSo, 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 #289508Skandha
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,
SkandhaSeptember 6, 2021 at 12:51 pm #289532lblumenfeld
ParticipantWhy are my responses suddenly awaiting moderation?
September 6, 2021 at 12:53 pm #289533lblumenfeld
ParticipantThat’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 #289531lblumenfeld
ParticipantThat’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 #289595Skandha
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,
SkandhaSeptember 7, 2021 at 3:02 pm #289606lblumenfeld
ParticipantThat 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 #289610lblumenfeld
ParticipantTo 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 #289637Skandha
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,
SkandhaSeptember 9, 2021 at 1:12 am #289708lblumenfeld
ParticipantThat 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 #289684lblumenfeld
ParticipantThe 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 #289764Skandha
Participant@lblumenfeld: Hello there,
Do you want the Contact Us text to be below the image?Kind Regards,
Skandha -
AuthorPosts
- The topic ‘Featured image not the same across browsers’ is closed to new replies.