Turning Off Viewports Bar. - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Turning Off Viewports Bar.

L

lumajosh

SP Page Builder 2 years ago

Hi,

I was wondering whether it is possible to turn off Viewports bar during a page design phase. The issue I'm having is that all elements of a page during development are being adjusted to insure proper positioning in terms of rows padding. However the same page does not look the same if a website is accessed through the frontend. It seems that the Viewports bar, which is give or take is about 40 px, once is not there, screwing all row positioning - https://rb.gy/e7x9oi.

Thank you

0
20 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #106697

Hi

Thanks for contacting us. Could you please give me your site URL so that I can check?

-Regards.

0
L
lumajosh
Accepted Answer
2 years ago #106746

https://joomla4.bostonholistichealing.com

Hi, In case you need to login, please check hidden area for the login info. Thank you

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #106900

Did you use any custom CSS on that portion?

0
L
lumajosh
Accepted Answer
2 years ago #106947

Yes, I've used custom CSS to format page's title -

@media (min-width: 320px) and (max-width: 767px) {

section-id-1674755768431 .sppb-section-title .sppb-title-subheading {

font-family: 'Maven Pro';
text-align: center;
font-size: 22px !important;
line-height: 26px !important;
font-weight: 600;
}

}

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #107094

Use this custom CSS

#sp-page-builder .page-content .sppb-section:first-child{
    padding-top: 1px !important;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

0
L
lumajosh
Accepted Answer
2 years ago #107133

Provided code did solve the margin issue for About Me page, thank you, however there are over margin issues I have on practically every page. Please see the following example - https://tinyurl.com/mw8nhuc5.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #107141

Could you please give me that specific page link?

0
L
lumajosh
Accepted Answer
2 years ago #107145

https://joomla4.bostonholistichealing.com/services/reiki-healing-and-reiki-training Also, magrins of the background video used on this page are off as well

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #107359

It seems like this on my end

https://prnt.sc/rOBiYLLtBHvf

0
L
lumajosh
Accepted Answer
2 years ago #107361

This seems to become like another love affair... I just opened this page in both Chrome and Edge and they both display information, not a blank page as captured in your screenshot. The buttom line is that margins on all of the pages are out of whack between design mode and live view without Viewports Bar being there. I provided you with login info, so if there is a true desire to help solve the issue, I think someone from the development team could login and investigate.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #107597

Could you please give me a screencast of your issue?

0
L
lumajosh
Accepted Answer
2 years ago #107606

Please use the following link - https://tinyurl.com/h3jsv2wn. Just to ensure that I communicated my issue correctly, the viewport bar used during the development is 40px, once I run the site live, all the padding / margins I configured during the design get shifted.

0
0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #107864

When you delete my CSS is this working?

0
L
lumajosh
Accepted Answer
2 years ago #107869

Sorry, I'm not sure if I understand your question? Custom CSS you've provide me with is being used and its working for about me only page.

0
L
lumajosh
Accepted Answer
2 years ago #107909

I'd like to move on going live with Joomla 4 implementation, however since margins on practically every page of all rows / objects in design vs live are off, I can’t. I’ve provided you with screenshots, videos and login info, however the issues I’m having weren’t resolved (with exception of About Me page). So the question is, would you be able without asking me any additional questions about my problems get to the bottom of it? If you can’t or won’t, just tell me, so we’ll stop playing a ping pong game.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #108113

Sorry for this inconvenience. Its better you can create a new forum post about this new section.

0
L
lumajosh
Accepted Answer
2 years ago #108135

But why? What's wrong with the current post? There is no new section. Like I’ve mentioned previously, you have everything at your disposal to dive into the identified issues. This post is open for almost two weeks now and it seems that I need somehow to prove that the issues I’m reporting truly exist. People who post on this forum are trying to resolve their issues because of Page Builder bugs or “features”, and lack of support is simply amazing.

Here is yet another illustration on how video resizes in the design mode vs frontend.

https://tinyurl.com/3w69d2bp

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 2 years ago #108230

You can try one thing. Just remove this CSS and then check.

#sp-page-builder .page-content .sppb-section:first-child {
    padding-top: 1px !important;
}

Remove this one. It conflicts that part.

0
L
lumajosh
Accepted Answer
2 years ago #108237

Removing this CSS does adjust the video background for mobile to almost the same height as I would expext it. However header of the About Me page, gets moved up. Reviewing the rest of the pages I also noticed that the latest SPPB update messed up font sizes and other positioning. I need to work on adjusting everything. At this point in time it looks like that the issues I'm having can't be resolved.

0