banner header being cropped in desktop

It looks like the aspect ratio is different on that one screen, so it's being cropped.

Thanks for the reply MerlinAZ, I took quite some time to ensure the aspect ratios are the same throughout (doesn't mean I'm not wrong though!)
If I click to resize the image in desktop design view, and use the bottom right corner handle to resize, Nicepage shows it has the correct aspect ratio (see attached image) same as in tablet design view (also attached).

But I still think it's related to the resolution vs width of viewing.
If you open the preview window and drag the side of the window width side to side you can see what I mean.

Last edited 26 January 2022 by MerlinAZ

Hello Nick,

Depending on the size of the screen, the width of the block changes, the width of the picture changes and proportionally its height.
The wider the screen is, the higher the image will be on the screen. Meanwhile, the height of the block is not changing depending on the screen width.
As the result, on wide screens not the whole picture can be viewed, because its height becomes greater than the height of the block. This is a standard background image behavior.

Please send here the desktop project, so we could compare locally.

The topic will be changed to private.

Thank you.
...................................................
Sincerely,
Anna T
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Once again thanks for the reply MerlinAZ
Initially I thought you might have found the issue with resolution, but I am now more inclined to think this is a bug in NP with it not rendering the page correctly in resolutions above 992px.
Whilst I agree it will resize and stop cropping if you drag the window size around, but that is what it is meant to do for the different screen resolutions of different devices, again it looks to me as if NP is not rendering the image correctly above the laptop size of 992px.

The 5 design views in NP are desktop 1200px and up, Laptop 992px and up, Tablets 768px and up, etc etc.

The only one there is an issue with is in desktop, whilst I am only using a 17" laptop here my resolution is 1920x1080 so it should handle the desktop view, but to be sure I've tried it using a 27" monitor running at 2560x1440 and it still crops the image and I've attached a screenshot of that.

Would someone from the NP development team care to comment on the above please?

Ah, just seen a post from the support team.

As the result, on wide screens not the whole picture can be viewed, because its height becomes greater than the height of the block. This is a standard background image behavior.

Please send here the desktop project, so we could compare locally.

Thanks for the reply Anna, if that's the case that is very frustrating as it means the site is not being seen as I intended and whilst more and more people are using tablets and mobiles to browse with, nevertheless it should still render correctly for those using desktops with widescreens etc.

I've hopefully uploaded the project for you.

Thanks
Nick

Anna
What's the answer to this please?
The only way I can think of dealing with this is by setting the design to block width in desktop design view so it keeps the aspect ratio of the banner on large screens, but use screen width in all other design views where it appears to work ok?

Hello Nick,

Your background image is 1600px/1092px, the image element is set W1300 and H561, that is why on wide screen this image element would be cropped to fit the width and height.

There is no option to set for the background image width to be screen or sheet for different modes.
Anyway, any changes require increasing the image element height or upload the previously resized image to the project.

...................................................
Sincerely,
Anna T
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hello Anna, sorry have been dealing with a family matter for a few days.

Out of interest, I smart resized the image in PSP to 1300x561 and of course the issue persists because when viewed on a screen over 1300 wide, Nicepage is not keeping the image aspect ratio in proportion to the available screen size.

Looking at a few other websites that do similar to what I want, they seem to use a min-height attribute for the css to stop the image being cropped like this, is this possible in NP and if so how?

Which leads me to another point, can we have a simple built in HTML editor added to NP please, so it makes it much easier to add things like 'hover tags' like "back to home" when the mouse pointer is over our main logo for example on sub pages.

So to repeat, is there some way this can be corrected please, because it is very frustrating that the site is not displaying as I intended, in particular on large screens?
Having said that, I have just downloaded and updated NP to the latest 4.4.3 version and saw in the release notes some mention os better support for large screens, can you expand on this please?

Thanks
Nick

Hello again Anna
Aha, have just read the release notes for the latest version, brilliant, just what I, and by the sound of it, others need.

I'll have a play in due course and get back to you, but if it solves my issue above, then brilliant job Nicepage, that's top class customer support.

Thanks
Nick

Hello Nick,

Ok, please try this option for large screen size and let us know if you have any questions.

We support additional HTML and CSS, and provide HTML element where you can add any custom HTML, CSS or JS.
https://nicepage.com/doc/1121/site-settings
https://nicepage.com/doc/164389/html-element

Please note that styles should be wrapped with <style> tags, scripts should be wrapped with <script> tags
If the custom code should be added to the page HEAD section (before BODY) then you should add the script to the Site Settings >> HTML >> Additional HEAD HTML.
If the script should be added to the page BODY, then add an HTML element to the Header or Footer and then insert the script. The script should be executed in the browse preview or directly on the server.

Please check the articles and let us know if you require any additional assistance.

...................................................
Sincerely,
Anna T
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp