Home › Forums › Legacy Support › Support queries › Styling issues › Tips/Guide Text Boxes out of the screen
- This topic has 11 replies, 2 voices, and was last updated 3 years, 5 months ago by pablocanedoq.
Viewing 12 posts - 1 through 12 (of 12 total)
-
AuthorPosts
-
December 5, 2020 at 2:55 pm #328280pablocanedoqParticipantHello, 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?December 7, 2020 at 11:56 am #328436AdaParticipantFor 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; }
December 8, 2020 at 3:07 pm #328630pablocanedoqParticipantI 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.December 8, 2020 at 3:08 pm #328631pablocanedoqParticipantThis reply has been marked as private.December 9, 2020 at 6:57 am #328685AdaParticipantI have customized the margin and padding according to your site content , Please replace the previous code with this updated one ,from Customize>>Custom CSS
You can slight increase or decrease these padding values as per your preference..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; }
December 11, 2020 at 3:23 pm #329033pablocanedoqParticipantAgain, 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/w0mdhzDecember 12, 2020 at 5:52 am #329076AdaParticipantSir 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.December 14, 2020 at 2:37 pm #329327pablocanedoqParticipantThanks, 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/w2h5irDecember 15, 2020 at 7:43 am #329416AdaParticipantI have added the required custom css code in the Custom Css Section . Please verify if the problem is solved . I've used this code
You can slight increase or decrease the padding and width value as per your need from the Customize section.#vibebp_member .vibebp_main { padding-top:3rem !important; } .bp-vibebp .vibebp_live_modules .firebase_modules.active { width: 360px !important; }
December 15, 2020 at 8:24 pm #329554pablocanedoqParticipantExcellent! 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/cYloqw83fEDecember 16, 2020 at 6:27 am #329608AdaParticipantThanks for your appreciation sir. For this modification add this code in the Custom CSS
After checking this code please inform us if we can close this topic?.vibebp_main button.fc-today-button:hover { color: #000000 !important; }
December 16, 2020 at 7:16 pm #329756pablocanedoqParticipantThanks, Ada. It works perfectly. Now you can close the topic. -
AuthorPosts
Viewing 12 posts - 1 through 12 (of 12 total)
- The topic ‘Tips/Guide Text Boxes out of the screen’ is closed to new replies.