On my homepage I have a single "full height row". This is working correctly on desktop, but on mobile and iPad it is slightly taller than a full page. Please could you help me resolve this issue?
I'm still having the same issues. Is it the dimensions of my background image that might be making the row taller on tablet and mobile? The image resolution is 3000 x 1456 pixels.
With CSS, is it possible to stop the background image becoming taller than the screen? I would like to see the piano keys at the bottom of the screen without the user having to scroll down.
Yes, I have tested this on two different tablets. Screenshots attached are direct from my iPad. It has the same error in both landscape and portrait. You can see that the background image is too tall for the page.For reference, here is all the custom CSS I am using (which I don't think should affect anything).
Many thanks,
Oliver.
CUSTOM CSS
@media only screen and (max-width: 1000px) and (min-width: 1px) { #slide-out-widget-area .inner .off-canvas-menu-container li a { font-size: 16px !important; line-height: 16px !important; } } @media only screen and (max-width: 690px) and (min-width: 1px) { #slide-out-widget-area .inner .off-canvas-menu-container li a { font-size: 14px !important; line-height: 0px !important; } }
@media only screen and (max-width: 1000px){ #header-outer { padding: 25px 0px !important; } }
body.material #slide-out-widget-area[class*="slide-out-from-right"] .off-canvas-menu-container li a:hover:after { display: none !important; }
body.material #slide-out-widget-area[class*="slide-out-from-right"] .off-canvas-menu-container li a:after, #slide-out-widget-area .tagcloud a:hover{ display:none; }
Cannot seem to replicate the issue making it difficult to find custom solution. Which browser are you using and does it happen when you check on incognito.
I noted that on mobile you disabled background image hence no piano keys.
I have just downloaded Chrome for iPad and see that the background image looks correct. The problem seems to be with Safari and iOS devices. (The reason I disabled the background image on mobile was because it was also displaying incorrectly on mobile).
We escalated this issue to the developer to take a look into. They will be in contact.
It might take a while. Consider using a different structure for now like the nectar slide added to a page with one slide in it. Should work similar to a full height row.
I've just updated the Salient theme and WPBakery... and cleared cache both within WordPress and safari. Unfortunately I'm still having the same issue with Safari on iPad.
Please do let me know if there's anything you can do?
Many thanks for your suggestion. Unfortunately the custom CSS either works in either portrait or landscape orientation (but not both). Please do let me know if you have another solution? Or when a fix might be released?
Can you try to enable the "Page full screen rows" option in the metabox under the page builder? That option uses javascript to calculate the browser window height instead of CSS so it also should provide the functionality you're looking for. See attached screenshot.
Hello,
On my homepage I have a single "full height row". This is working correctly on desktop, but on mobile and iPad it is slightly taller than a full page. Please could you help me resolve this issue?
Many thanks in advance!
Hi Oliver,
I have visited your homepage and height is okay on all devices. Ensure the browser cache is cleared.
Hope this helps.
Hi Andrew,
I'm still having the same issues. Is it the dimensions of my background image that might be making the row taller on tablet and mobile? The image resolution is 3000 x 1456 pixels.
With CSS, is it possible to stop the background image becoming taller than the screen? I would like to see the piano keys at the bottom of the screen without the user having to scroll down.
Thanks in advance.
Hey Again,
Could you provide a screenshot of the issue ? Also are you testing it on a Actual Device ?.
Best
ThemeNectar Support Team
Hi Tahir,
Yes, I have tested this on two different tablets. Screenshots attached are direct from my iPad. It has the same error in both landscape and portrait. You can see that the background image is too tall for the page.For reference, here is all the custom CSS I am using (which I don't think should affect anything).
Many thanks,
Oliver.
CUSTOM CSS
@media only screen and (max-width: 1000px) and (min-width: 1px) {
#slide-out-widget-area .inner .off-canvas-menu-container li a {
font-size: 16px !important;
line-height: 16px !important;
}
}
@media only screen and (max-width: 690px) and (min-width: 1px) {
#slide-out-widget-area .inner .off-canvas-menu-container li a {
font-size: 14px !important;
line-height: 0px !important;
}
}
@media only screen and (max-width: 1000px){
#header-outer {
padding: 25px 0px !important;
}
}
body.material #slide-out-widget-area[class*="slide-out-from-right"] .off-canvas-menu-container li a:hover:after {
display: none !important;
}
body.material #slide-out-widget-area[class*="slide-out-from-right"] .off-canvas-menu-container li a:after, #slide-out-widget-area .tagcloud a:hover{
display:none;
}
.bottom-meta-wrap {
display: flex !important;
flex-direction: column-reverse !important;
}
Hi Oliver,
Can you share login details we check from backend. We going to need username and password with admin privileges.
Thanks.
Hi Oliver,
Cannot seem to replicate the issue making it difficult to find custom solution. Which browser are you using and does it happen when you check on incognito.
I noted that on mobile you disabled background image hence no piano keys.
Kind regards.
Hi Andrew,
I have just downloaded Chrome for iPad and see that the background image looks correct. The problem seems to be with Safari and iOS devices. (The reason I disabled the background image on mobile was because it was also displaying incorrectly on mobile).
Any suggestions?
Hi Andrew,
Just wanted to check you received my last message?
Best wishes,
Oliver.
Hi Oliver,
Apologies for the late reply on this.
We escalated this issue to the developer to take a look into.
They will be in contact.
It might take a while.
Consider using a different structure for now like the nectar slide added to a page with one slide in it. Should work similar to a full height row.
Sorry for the inconvenience.
Hi Andrew,
A couple of months have now gone by. Is there any fix for this please?
Many thanks,
Oliver.
Hey Again,
Did the new Salient 12 fix this ?.
Please update to Salient Theme Version 12 and Salient WPBakery Page Builder 6.1 .
To get a list of Bug Fixes and new Feature addons in the Latest Theme update, the changelog can be viewed here : http://themenectar.com/changelogs/salient.html .
Update the theme by following this guide: http://themenectar.com/docs/salient/important-salient-update-for-new-envato-requirements/ and http://themenectar.com/docs/salient/updating-salient/
Best.
ThemeNectar Support Team
Hi Tahir,
I've just updated the Salient theme and WPBakery... and cleared cache both within WordPress and safari. Unfortunately I'm still having the same issue with Safari on iPad.
Please do let me know if there's anything you can do?
Many thanks, Oliver.
Hey Oliver, Thanks for your patience with this ticket.
The issue is occurring because on iOS the top browser bar (where the URL is) changes the CSS calculations for viewport height - source: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser
In the case where you need the bottom to be aligned exactly for design purposes, a workaround could be achieved by adding in the following CSS:
.vc_mobile .wpb_row.vc_row-o-full-height.top-level, .vc_mobile .wpb_row.vc_row-o-full-height.top-level > .col.span_12 { min-height: 96vh!important; }Hi,
Many thanks for your suggestion. Unfortunately the custom CSS either works in either portrait or landscape orientation (but not both). Please do let me know if you have another solution? Or when a fix might be released?
Best wishes,
Oliver.
I forgot to mention... the suggested CSS also doesn’t work on Chrome when viewed on an iPad. It creates empty space at the bottom of the page.
Hey Oliver,
Can you try to enable the "Page full screen rows" option in the metabox under the page builder? That option uses javascript to calculate the browser window height instead of CSS so it also should provide the functionality you're looking for. See attached screenshot.
Problem solved! Thank you SO much for all your help.