Menu white space SmartSlider3

Hi @petersmedia!

In Content editing mode ( https://www.youtube.com/watch?v=lsq09izc1H4&feature=youtu.be&t=3m55s ) your slide’s height is as big as the height of your layers, margins and paddings are and your entire slider is as big as the highest slide is. This is causing your problem. The first slide (“Welcome to 50 Dates at 50” slide) has a short text, while the other slides have longer texts. In your case the 2nd “Phase 1” slide (with the image on bottom) seems to be the highest slide, so this defines the height of all slides. Smart Slider can only produce a good layout on all your slides, if you have about the same amount of content on all of them. As you see for example on this video:

with font resizer and some adjustments you could try to make the mobile view have similarly sized contents, but if it would be possible to add a same amount of texts to all slides, that would be the best.

Hi Gabor & Thank You for your help,

The second Phase 1 slide was a duplicate i made to edit. You mention you are seeing an image on the bottom of that slide, i did place one there, which appears on the editor preview as it should, although when i check it from the front end in Google, it has not changed!? Ive attached an image of how it looks both ends and also shows the extra white menu space in mobile view . It WAS working for a while yesterday, it appeared as it should on Google and other emulators, ive also attached an image of what it looked like then. So now, anytime i make any edits, they dont happen in mobile view on the front end.

https://ibb.co/DRJgL3p
https://ibb.co/kqKsLwH

Hi @petersmedia

I checked the linked page both on my android phone and in Chrome’s iPhone emulator, and it appeared fine for me as you see in the screenshot: https://imgur.com/a/UqIwEIt
But in your first picture it seems, as you would simply resize the browser. By resizing the browser, that will still be a desktop browser so it will show the desktop layout.
If you would like to check how your slider appears on different devices, then you should rather simulate devices with DevTools: https://developers.google.com/web/tools/chrome-devtools/device-mode
actually the same problem seem to occur in your emulator, too.

If you would like to make the screen size also matter, then you should go to our Global Settings > General tab and at Responsive mode > Based on you should choose the “Combined” option: https://smartslider3.helpscoutdocs.com/article/214-responsive-mode

As for the white space in your menu:
If you mean the white space, when your mobile menu is open, then that white space is coming from the style of the menu itself like you see here: https://imgur.com/a/W2qTKYe
so we don’t really have a control over that, but if you want to reduce that gap in your menu, you should override the style of your header menu in mobile view.

Thank You Gabor,

Thank you for the image, very releiving. Ive also checked that the combined option is ticked.

Yes, you are seeing it correctly, i do not see that!

Even when i test in the developer tools you mention, i get the same messed up version. I cannot believe it seems to be working everywhere but here : / – i dont know why am i not seeing it correctly. https://ibb.co/fXT3C32

I would really like to remove the gap in the mobile menu, do you have any links or pointers i can learn how to do it, would you use CSS ..i can try, where abouts would this be entered in Smart Slider 3.

Thank you again for your kind help! Very much appriciated

Update.

I have since disabled all extentions in Chrome and i can now see the slide as it should appear : )

Hi @petersmedia

I am glad it appears fine now.

As for the menu:
We can not provide support for third party plugins/themes, but the problem is related to that, some of the menu items are moved from their original position via negative CSS top values e.g.:

@media screen and (max-width: 480px){
#hamburgerMenuParent > li.ish-ph-mn-search {
    top: -20px;
}
}

@media screen and (max-width: 480px){
#hamburgerMenuParent > li.ish-ph-expandable_btn {
    top: -40px;
}
}

and this #hamburgerMenuParent element also has a negative top property, that is probably to make your hamburger menu appear at the same position both when it is opened and when not.

@media screen and (max-width: 480px){
.ish-ph-mn-resp_nav.responsive {
    position: relative;
    top: -50px;
    height: 216px;
}
}

So the elements are moved from their positions, but the height of the container will remain the same.

Finally the first menu item ( Navigation ) has some big top padding, too:

@media (max-width: 480px){
.ish-ph-mn-resp_nav.responsive li:nth-child(1) {
    padding-top: 80px !important;
}
}

For the best solution I would suggest getting in touch with the developers of your theme, since there are multiple CSS properties that should be adjusted. But as a workaround what you could do is removing these negative top properties from the mentioned elements, this 80px top padding, and you should set that “216px” height to “auto” instead. After that you could simply make your mobile button appear outside of its container like:

@media screen and (max-width: 480px) {
  #hamburgerMenuParent{
    overflow: visible
  }

	ul.ish-ph-mn-resp_nav.responsive li.hamburger-icon {
		top: -50px;
	}
}

Anyways with Chrome DevTools – https://developers.google.com/web/tools/chrome-devtools/device-mode – you can inspect the style of your website when it is in mobile view. And you will also be able to see how your menu looks like when you adjust certain CSS properties: https://designtlc.com/use-chrome-inspector-edit-website-css/

Best regards,
Laszlo.

Thank you Laszlo very very helpful

Following your advice, i adjusted the negative value of the parenthamburger element. The attached image shows before and after, it worked and spread the menu so techinacally reducing the white space. The other attached image shows that i couldnt find the code that you mentioned?

@media screen and (max-width: 480px){
#hamburgerMenuParent > li.ish-ph-mn-search {
top: -20px;
}
}

and..

@media screen and (max-width: 480px){
#hamburgerMenuParent > li.ish-ph-expandable_btn {
top: -40px;
}
}

I could only find the parent settings like in the other image, double clicked on the hamburgerparent element class in the left hand window, and then adjusted the Top: negative value. But didnt work with the search element.

Thank you again!

https://ibb.co/7WkqN0B
https://ibb.co/34fCqRx

Hi @petersmedia

I am glad you were able to adjust the size of the menu.

The earlier mentioned CSS were on the li elements as you see in the attachment: https://imgur.com/a/c7YbeRy
but with your adjustments you probably no longer want to remove those, as that would make some of your menu items no longer be visible. So it can stay as it is.

Best regards,
Laszlo.

Thank You Laszlo for all your help, much appriciated : )