Full screen image display

libertybs.co.uk/clients/thelaurelsMOBI inserted an image in a full screen header block (Home page). I made sure this was resized to the same size as the default one it replaced (1920 x 1280) . I have tried with auto resizing ticked and unticked, but it STILL will not show correctly on the mobile view.I have also tried various blocks without success. Surely this is fundamental for a 'responsive' website builder??? Support simply says "....will report to developers' Great. Later: I just noticed another thread from last February (although slightly different problem). forums.mobirise.com/discussion/15287/block-header-image-sizes

But in that thread FILYOV states "On Mobile device, in Portrait mode that generally means the width of the image is as much as the width of the screen and the height is whatever comes form the aspect ratio. And since the screen in Portrait and the image - in Landscape - we get a tiny image in result."THAT is what I would expect...but not happening.

Comments

You can use the image block (from the Images & Videos or Media section) to show the full image. Full-screen blocks are responsive, and blocks change their size depending on the size of your browser window, so it's impossible to keep the same size of images. We preserve aspect ratio, but images can look cropped.

But they do not resize to fit mobile screens despite being the same size as the default one it replaces.A I said, surely that is a basic function of a 'responsive' website builder. The image on mobile looks rediculous. Just have a look.

Your picture is definitely resposive.But you need fullscreen, so the house has to be shown from the upper to the buttom border of the screen.On a landscape-screen you see the complete building, on a portrait-screen it is cut left and right.There are different possibilities to change this. One is: you can use in css two different pictures as a background, depending on the resolution of your screen: one picture of the house like it is, and for smartphone a different picture, maybe the house from left or right or only a part.

This is made here with the slider in the top. The slider is different on pc and smartphone.

"One is: you can use in css two different pictures as a background, depending on the resolution of your screen: one picture of the house like it is, and for smartphone a different picture, maybe the house from left or right or only a part."

I would LOVE to do that and have a completely different photo for the mobile device (a portrait image). I didn't think that was possible within Mobirise. What do I need to do in CSS (only have the basics of this....)???

You make it with Media-Queries1. Upload the 2 different images to a folder in your webspace to EXTERNAL-PICS2. Name them "house-pc.jpg" and "house-mobile.jpg"3. Make the normal full-screen header-block, NOT PARALLAX (I did not try with parallax)4. Add the following class in source code (css editor) to the header - block

You see, the breakpoint between PC and mobile is at 800px, you can play arround with this value

I take a closer look later, i am not in Büro at the moment. Is it online? Did you remove the parallax in mobi? did you assign the class to the header Block. Maybe the http or https in the image path is missing.

You will get that error when you don't add an image via Mobirise itself - Just ignore the error message - You know the image is in the right place - But remember to upload that image folder to your host

Hi Frank...well it publishes....but I still do not see the house-mobile image......what I DO see is that the big image now displays correctly resized on the mobile(!). The device preview on the MB development screen however doesn't show this resized.

Just published locally.....I see the coding in assets/mobirise/css/mbr-additional.css.I published manually using Filezilla....still don't see the mobile home pic......I AM using a mobile emulator not an actual mobile phone....usually shows ok.

Hi Graham, there is still the wrong sollution in your code.Some posts above is the correct css-code.The version with the class could not work with Mobi4, because the background is always overwritten by Mobi in the parameters.

Clear Cache and press F5 and everything is fine.You should think: only we developers resize the window. Somebody who open the website on a smartphone will never resize the browser. He will get automaticly the door picture.