Tips/Guide Text Boxes out of the screen

[pablocanedoq]

Hello, When the Tips/Guide Text Boxes are on the side of the screen, they are left out of the screen. This happens all over the PWA interface. Here are several examples of this problem. Please, see these images: https://prnt.sc/vwdtx5 https://prnt.sc/vwdoek https://prnt.sc/vwdp7f https://prnt.sc/vwdpxb How to fix this?

[Ada]

For the locations you have shared ,where you are facing this problem I have written custom css Add this custom css code in appearance >>customize >>CUSTOM CSS

.vibebp_main .fc-header-toolbar {   
    padding-right: 4rem;!important;
 }

.vibebp_main .appointments_header{
	padding-right:4rem;!important;
}
.course_admin .course_students .course_student{
    margin: 0.75rem 0.75rem 0rem 2.5rem;!important;
}
.vibebp_main .create_course .course_duration_stick_left {
    margin-right: 7rem;!important;
}

[pablocanedoq]

I added the css custom code, but it doesn't work at all. All the text boxes that are near the sides of the screen, go out of it and are not visible in their entirety. Please watch the video: https://screencast-o-matic.com/watch/cYljoeNJ6k If necessary, I leave my credentials below in the following message.

[pablocanedoq]

This reply has been marked as private.

[Ada]

I have customized the margin and padding according to your site content , Please replace the previous code with this updated one ,from Customize>>Custom CSS

.vibebp_main .fc-header-toolbar {
    
    padding-right: 5.5rem;!important;
}

.vibebp_main .appointments_header{
	padding-right:5.5rem;!important;
}
.course_admin .course_students .course_student{
    margin-right: 5rem;!important;
}
.vibebp_main .create_course .course_duration_stick_left {
    margin-right: 7rem;
}
.vibebp_main .appointments_header {
    padding-right: 5.5rem;
    !important: ;
}
.wplms_create_course_wrapper .wplms_edit_course_content {
    
    padding-right: 10rem;!important;
}

You can slight increase or decrease these padding values as per your preference.

[pablocanedoq]

Again, the code does not work. It just doesn't make any change. I did test changing the values ​​and it doesn't work either: https://prnt.sc/w0mdhz

[Ada]

Sir You had missed a parenthesis '}' in the Custom CSS. https://prntscr.com/w0zog5 I have added it and now It is working. Please check and share if the problem is resolved.

[pablocanedoq]

Thanks, Ada. In the Edit Course section the matter is resolved. But the issue has not been fixed in the Appointments section. Look the image please: https://prnt.sc/w2h7jq And it has not been solved in the Chat section either. https://prnt.sc/w2h5ir

[Ada]

I have added the required custom css code in the Custom Css Section . Please verify if the problem is solved . I've used this code

#vibebp_member .vibebp_main {
    padding-top:3rem !important;
}
.bp-vibebp .vibebp_live_modules .firebase_modules.active {
    
    width: 360px !important;    
}

You can slight increase or decrease the padding and width value as per your need from the Customize section.

[pablocanedoq]

Excellent! Thank you very much, Ada. Let me take advantage of this thread, to fix another little styling issue in this very section (Appointments and Calendar too). When you put your mouse cursor over the "Today" button, the text disappears. Watch the following video, please: https://screencast-o-matic.com/watch/cYloqw83fE

[Ada]

Thanks for your appreciation sir. For this modification add this code in the Custom CSS

.vibebp_main button.fc-today-button:hover {
    color: #000000 !important;
}

After checking this code please inform us if we can close this topic?

[pablocanedoq]

Thanks, Ada. It works perfectly. Now you can close the topic.

[Author]

Posts