I have used the Architect template and everything works fine apart the first row has a gap at the bottom on a mobile devices even though it is set to full height. On a desktop it works fine. Please try to open Related URL on a mobile device and notice that it isn't a full height. I have tried every option in the builder but couldn't find a solution.
We can't seem to replicate this error from our end. Here's a screenshot of the same. Could you let us know what device and browser you're using when you experience this issue? I tested this on an iPhone 13 and 14 and also a One PLus 9.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
@media only screen and (max-width: 690px){
.material .wpb_content_element, .material .wpb_row {
margin-bottom: -10px !IMPORTANT;
}
}
Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
To assist you better, we'd love to have a closer look at your setup, and to do this, we'll need admin login credentials
(dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
I really don't mind sending you my credentials. However, I am not using any special setup.
This is a fresh clean wp instal with your architect demo imported. I have only changed tekst and background across the site.
I was wandering if that gap is visible on your demo site too and I have registered to this service: https://testgrid.io/ On android mobile devices there is a gap at the bottom of the screen. It is not a full screen as on the desktop.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
I have used the Architect template and everything works fine apart the first row has a gap at the bottom on a mobile devices even though it is set to full height. On a desktop it works fine. Please try to open Related URL on a mobile device and notice that it isn't a full height. I have tried every option in the builder but couldn't find a solution.
Attached files: mobile-device-gap.jpg
Hi there,
Thank you for reaching out to us.
We can't seem to replicate this error from our end. Here's a screenshot of the same. Could you let us know what device and browser you're using when you experience this issue? I tested this on an iPhone 13 and 14 and also a One PLus 9.
We look forward to your reply on the same.
Thanks,
Hello,
thank you for a quick answer.
I see this gap on a each system I use; win 10, win 11, android (Samsung galaxy 22 pro), iphone X pro
I am attaching a printscreen from samsung. This is your archicest demo page. I can see the gap even there.
Attached files: Screenshot_20240118_104646_Chrome.jpg
Hi there,
Thanks for writing back.
To make the changes as requested, you will need to add some custom CSS code. To do this, please follow these steps:
From your WordPress dashboard, Navigate to Salient > General Settings > CSS/Script Related. In the custom code area, insert the provided CSS snippet:
@media only screen and (max-width: 690px){ .material .wpb_content_element, .material .wpb_row { margin-bottom: -10px !IMPORTANT; } }Once the code is added, save and refresh the page to see if the change has been applied. In case it helps, please check this section from the documentation on CSS/Script Related.
If this does not work as expected or If you have any further questions or need additional assistance, don't hesitate to write back, I'm happy to help.
Hello Judith,
thank you for a help but that solution won't work because it messes up all row paddings all over the site on a mobile devices.
Hi there,
Thanks for getting back to us.
To assist you better, we'd love to have a closer look at your setup, and to do this, we'll need admin login credentials
(dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
If you prefer, you can safely share the access through a one-time secret note or using an access plugin such as Controlled Admin Access.
Before you provide this information, we strongly recommend taking a backup of your site.
If you have any concerns or questions about this process, please don't hesitate to let me know.
Best regards,
Hello Judith
I really don't mind sending you my credentials. However, I am not using any special setup.
This is a fresh clean wp instal with your architect demo imported. I have only changed tekst and background across the site.
I was wandering if that gap is visible on your demo site too and I have registered to this service: https://testgrid.io/
On android mobile devices there is a gap at the bottom of the screen. It is not a full screen as on the desktop.
Attached files: pixel6.jpg
vivoy27.jpg
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 999px) { .using-mobile-browser .wpb_row.vc_row-o-full-height.top-level, .using-mobile-browser .wpb_row.vc_row-o-full-height.top-level > .col.span_12, [data-permanent-transparent="1"].using-mobile-browser .wpb_row.vc_row-o-full-height.top-level, [data-permanent-transparent="1"].using-mobile-browser .wpb_row.vc_row-o-full-height.top-level > .col.span_12 { min-height:100vh !important; } }Thanks
ThemeNectar Support Team
Tahir, thank you. Now it is much better. I have only changed the height value to 95vh bacause 100vh was too much.
Aniway, now it works. Maybe you could add this to a future theme update. Just saying...