I build my website using otter blocks with Neve/WordPress and I need your urgent assistance please concerning the website main/header image size dimension, as when generating a visual with suitable dimension for desktop view , it looks small and inconsistent for mobile page view and the reverse.
Also there is no option to add main/header image specially to each desktop view and mobile view.
What is the best dimension that fit both desktop and mobile view please?!
First of all thank you for using Neve and Otter Blocks!
Neve is a fully responsive theme by default so you should not have any problems with the responsiveness of the header image. I have tested with multiple types of images and could not see anything wrong. Could you please offer the URL of the website where this problem appears so that we can take a closer look? Additionally can you please specify on which browser/mobile device have you noticed this behaviour?
In general, any image with the width around 1920 pixels and height between 600 and 800 pixels should work just fine.
The used size for almost all the website’s header images is 1920 * 1080 , it appears well in the desktop view but it looks small/inconsistent with the other page component in the mobile view.
The following pages are example of what I mean as you can check them through desktop and mobile please:
I tried another size on the homepage header image which is 3800 * 4000 , it looks fine on both devices but it is too big and not all the visuals could be designed in this size.
I have checked your website both on desktop and mobile and, unfortunately, could not see anything wrong. Can you please provide some screenshots of the inconsistency you refer to and if it’s possible to explain how would you want it to actually look? This will help us understand better and offer you the best solution.
Thanks for your reply, here you are the requested screenshots
The issue is their appearance is not consistent with the other page’s component , as the page text and images looks bigger than the main/header image
In case I tried to make the page text size smaller, it does not look good at the desktop version, as the text looks small then.
so what should I do please? as I have been trying to fix this issue but the issue still exists and I need to finish the project to be delivered next week please.
should I make the header/main image size 3800 * 4000 px as in the home page please?
Upon reviewing your website, I noticed that you’re using an Image block for the images on your pages, which isn’t part of our Otter plugin. A similar behaviour can be achieved using the Section Block in Otter, which has responsive settings. You can find more information about how to do this here.
To adjust the size of the Image Block, simply click on “Edit Page” and modify the Width and Height values in the right panel.
Kind regards,
Mara
Viewing 6 replies - 1 through 6 (of 6 total)
The topic ‘Website Header Image Dimensions Using Otter Blocks’ is closed to new replies.
