Unable to get rid of space below image in banner in tablet mode

[Nelsonhochberg]

I am unable to get rid of space below image in banner in tablet mode. I have tried changing the size of the banner, adjusting the padding and margins. Nothing seams to work Project ID: 2797414

[Nelsonhochberg]

It is on the Aircraft Jack page only

[Nelsonhochberg]

I even tried copying the banner from the home page which is working fine to the Aircraft Jack page and the space below the image in tablet mode instantly showed up and I could not get rid of it.

[Andre]

Actually, I can see it on most pages. The issue is the min set height on desktop which gets transported to tablet and mobile. The min height is set for the whole container, but the background image is quite “low” therefore you will get the space, as there is nothing else that is there.

Regarding the copying: Work with the reference feature to avoid consistency on your website.

Recommendation: I went to table mode and changed the min height - example 20REM. And it looks better:

I do recommend to maybe rework the image to have different sizes to use or at least find a suitable height for all viewports that work with the image.

You might also want to play around with the image settings and how its displayed as the background.

Let me know if that helps.

[Nelsonhochberg]

Thanks for the reply and advise!

In the time waiting for the reply I figured out the same solution although I’m using vh units for the min. height. My problem with the menu/banner now is I spend a lot of time getting things to look right switching back and forth between the preview and edit; then when I publish the website, the menu/banners change!! Very frustrating. I notice that viewing the published website: https://littleairplanedriver.com/, using chrome on my desktop, clicking on the restore button and changing the width of the window, the space between the menu bar and image changes with the width changes of the window. How can I fix this?

Also the menu bar on my cell phone becomes very tall and I haven’t figured out how to fix that.

I have worked with over a hundred different programming languages since I started in the late 1960. This includes the worst language: Cobol (in 1999 I was offered a $280K/yr job fixing government Cobol programs for the Y2K problem. I turned it down stating I would rather have all my teeth pulled without anesthesia); the most complicated language: APT (Automatic Program Tools: it had an 8.5 X 11 3 book dictionary and an 11 book encyclopedia describing the functions) and my favorite: APL (A Programming Language: the most succinct. The first spreadsheet was written in APL in one day). Over the years, I have come to dislike programming which is why I am trying to write my website in a WYSIWYG solution like Sitejet. I have worked with Wordpress, didn’t care for it so I am trying Sitejet. Sitejet is rapidly becoming my second most disliked programming solution but I have already have a month into this project. Sitejet and Wordpress are the only two WYSIWYG programming solutions my host Hobohost offers. If my frustration continues to build, I may need to change hosting to someone with a different website builder.

Perhaps with your help, my frustration can be reduced. I am hoping.

Thanks again for your help.

[Andre]

Hey Nelson,

I do understand why you feel frustrated. This is maybe just a case of experience with webdesign.

In your case, you used the banner with a background image on the container. This is mainly intended for decorative images behind content (like text or buttons).

When a banner contains only an image, using a background image can cause exactly the problems you’re seeing like different scaling on different screen sizes, the need to set a minimum height manually and images appearing cropped or distorted. So literally what happened to you.

I do recommend for banners, to place the image as an image element inside the banner. This means that Sitejet as well as browsers can work with the correct aspect ratio, the responsive scaling and calculating the proper height.

This makes it all more reliable. You did nothing wrong and nothing is broken, but changing the setup probably avoids your current issue.

I can offer either to give you a workaround/setup or I just log in and “take care of the issue” for you?

[Nelsonhochberg]

Yes, just take care of the issue for me, please. And if it is not too much trouble, could you also add the menu and banner to all the other pages as well?

Thank you very much!!!

[Ronnie]

Hi Nelson,

please have a look at the changes and let me know if the result matches what you had in mind.

I have updated the banner and replaced it on all subpages that previously used the same banner.
To make future updates easier for you, I created references to the banner from your homepage. This means:
if you change the banner once on the homepage, the same change will automatically appear on all other banners as well.

You can find more information about this feature here:

https://help.sitejet.io/hc/en-us/articles/24276005732503-How-to-create-references

If you would also like to use this banner on additional subpages, simply copy one of the existing banner references (for example from the “Flying/Instruction” page) and paste it into the new page.

If anything does not look as expected or needs adjustment, just let us know.

Best regards.

[Nelsonhochberg]

Thank you very much!!

It looks like you removed the image from the banner and placed the image in its own container just below the banner. Is that correct? That’s what I would have done if I created the website using CSS/HTML. I had put the image in the banner because that’s what the AI generator did.

The menu/banner and image has a space between them in the AircraftJack page. Also in that page, the menu is very tall in smartphone mode:

Should I just copy the banner and image to the AircraftJack page or can you do that?

It looks like you didn’t publish the changes. Should I do that?

Some time ago, I lost all of the menus/banners and had to rebuild them. I know I can save my work with Ctrl-S which I frequently do, but is there a way I can save my work preferably locally to my hard drive so I can revert to it in case of a problem?

Thank you for your help!

[Ronnie]

You can check the Navigator to easily inspect the element hierarchy.

Previously there was a background image set for the Banner itself. You can see that there is an Image Element inside now.

You‘re right. I actually missed the old Banner on the “AircraftJack” page. You could just copy the new Banner to that site, but as I said in the earlier post, you should create a reference to your Banner instead. You can do so by right-clicking the Banner Element inside the Navigator on your “Home” page and selecting “Create reference”.

This will create a copy (below your Banner) that is automatically updated when you make changes to the Banner on your Home page. Just move (cut and paste) this copy into the “AircraftJack” page.

If you need any further help with this, let me know!

[Ronnie]

@Nelsonhochberg

It looks like you didn’t publish the changes. Should I do that?

You would need to publish yourself, if you want to do so.

[Nelsonhochberg]

I published the website with your changes. It looks much better now. But there are two small problems:

1. As the screen drops to tablet width, the menu drops below the logo:

Is there a way to stop that?

1. The menu gets cut off on the right side before switching to the hamburger:

I assume there is a way to adjust when the menu switches to the hamburger. How do I adjust that?

I copied a reference to the banner to the “AircraftJack” page. I have not published that change yet.

Thanks again for your help.

[Ronnie]

The first issue usually occurs, because there is simply not enough room besides the logo to display the full menu. You could change the gap and font size settings under Menu Item, like i did in the screenshot fix this.

To adjust the screensize up to which the hamburger icon is visible, you can simply set the value yourself under the Hamburger Icon settings here:

You can find both of these settings when you’re editing the Menu Bar element. Hope this helps!

[Nelsonhochberg]

I’m starting to get the hang of it. I changed the gap setting from 24 px to 10 px and set the Hamburger Icon Max Screen Width to 935. This switches to the Hamburger Icon before the menu drops down below the logo. First, I used the screen ruler in PicPick (https://picpick.app/en/) and determined that the menu drops down below the logo at a screen width of 1987 px but putting this in the Max Screen Width did not work at all so I came up with the Max Screen Width of 935 by trial and error.

My next frustration is trying to reduce the size of the space above “Affiliate Store” in the Affiliates page – the red arrow in the screenshot below:

I tried moving the heading up – that didn’t work. I tried changing the position from default to absolute – that worked but I lost the centering command.

Can you guide me on that please?

Again, thank you.

[Nelsonhochberg]

I found it – container padding: