Visual problems on smartphones

[Usapuka]

Hello, On the course presentation page, the titles, description, etc. are superimposed on the image. This is how it looks on the PC: https://prnt.sc/10dxwv0, while this is how it looks on the mobile TE screen: https://acaneb.org/acaneb/CoursePage.jpeg The icons of an H5P course are not visible: https://acaneb.org/acaneb/IconsInH5P.jpeg How can I get the page to look good and the icons to show? Thanks, regards

[Ada]

For course page issue use this css code in appearance>> customize>> custom css

.single-course .elementor-element.elementor-element-cd03fe8.elementor-widget.elementor-widget-wplms_course_featured {
    z-index:999 !important;
}

For H5P icons issue please share course URL or H5P content url which I have to check.

[Usapuka]

Hi Ada, Thanks, I have added the CSS and while there was improvement it still overlaps the image box with the sections title: https://prnt.sc/10edi2r H5P (the icon problem is in Android Phone, I don't know in Ios phone): https://elearning.tecnobiz.com.ar/course/tipo-de-material/ > External Developments > H5P Multiple Choice The home page icons are not visible either: https://elearning.tecnobiz.com.ar Thanks, regards

[Ada]

Hi, I checked it on android phones , the icons are visible . On homepage also I didnot find any icon missing https://prntscr.com/10fuyog I have modified the code at your site for overlapping issue Please check now https://prntscr.com/10fv6d9

[Usapuka]

Hi Ada, Is this image (https://prnt.sc/10fuyog) of a real phone? (not a PC simulating a phone). On a PC with a reduced screen I can see the icons fine but not on a real phone. I have tried it (https://prnt.sc/10fv6d9) and it seems to me that the course description is not visible, can you please check it? Thanks, regards

[Ada]

Hi, Yes this image is not of a real phone but I have checked the same from a phone also and these icons are apppearing nicely. moreover in this screenshot https://acaneb.org/acaneb/IconsInH5P.jpeg it seems page has not loaded completely so please check it again or I will share a screenshot with my phone. For this https://prnt.sc/10fv6d9 - yes checking the issue. Please ping here tomorrow. I'll provide modified code.

[Usapuka]

Hi Ada, I have taken two new screenshots from my Android phone, the course presentation page (https://acaneb.org/acaneb/Curso.jpeg) and the H5P unit (https://acaneb.org/acaneb/H5P.jpeg). The screenshots do not look right. Regards,

[Ada]

Hi, For single course page issue , I checked applying udemy course layout and it is appearing correctly. So the layout you have created has some margin issue. Try editting course layout page with elementor in mobile view. https://drive.google.com/file/d/1pnuuKm3IiDItuQLapclGuzOzUghsRW3K/view

[Usapuka]

Hi Ada, Thank you for your research and response. I have tried to edit my course layout page with Elementor in mobile view, but it see fine as Udemy page layout (https://screencast-o-matic.com/watch/cre62PVc3T3), the problem appears in a real Android phone view (https://prnt.sc/10i3ccm). What can I do? Regards,

[Usapuka]

Hi Ada, I remembered that you helped me with the current layout: https://wplms.io/support/forums/topic/fixed-block-in-course-layout-dont-work/. If "fixed_block" in the Class css is erased, the problem is solved. Can I have fixed block for the PC a not for Phones? Regards,

[Veronica]

hi @Usapuka as @Ada is not going to be us for at least 2 weeks so I will continue to assist you here with the above video and discussion, it is difficult to understand the issue so can you please let me know one by one about your issue so I can assist you accordingly

[Usapuka]

Hi Veronica. Thanks for your help, to sum up: I have encountered the following problems viewing a course (https://elearning.tecnobiz.com.ar/course/tipo-de-material/) on the mobile phone: 1. The block on the right appeared overlapping the title and description (https://acaneb.org/acaneb/CoursePage.jpeg). Then we discovered that the problem was caused by "fixed_block" added in the Class css of the block (https://wplms.io/support/forums/topic/fixed-block-in-course-layout-dont-work/). My question now is if there is a way to have the right block fixed on PC / Tablet and look fine on phones. 2. Another problem is that the icons in a unit made in H5P do not show on a real phone (https://acaneb.org/acaneb/H5P.jpeg). They do show up on the PC, simulating a cell phone. Also the icons are not visible on the PC using the PWA App: https://prnt.sc/10iwgx9. 3. Icons of the Home page are not visible either: https://elearning.tecnobiz.com.ar . Thanks, regards,

[Veronica]

hi for the overlapping issue, I have just checked it on my end and it is showing fine: http://somup.com/crelXzbin7 and also please create a topic in the styling section to get an accurate response. and for icons missing issue: please follow this tip: https://docs.wplms.io/admin-guide-faqs#elementor-and-other-icons-go-missing-when-pwa-enabled once you followed this tip it will help and also please create a topic in the styling section to get an accurate response.

[Usapuka]

1. I've added back in the Class css of the block "fixed_block", so now you can see the overlapping problem. 3. I have solved the icon display problem on the home page by disabling BP single page. 2. In PWA pre-cache I added https://elearning.tecnobiz.com.ar/wp-content/uploads/h5p//libraries/FontAwesome-4.5/ which corresponds to this icon (https://prnt.sc/10jpu4k), but the icon is not visible. Also in SCORM courses (https://prnt.sc/10jpsbo) the icons are not visible. Searching and loading in pre-cache each URL of the icons folder in each SCORM and H5P course package is a very cumbersome job (if it would work): is there any other way to make these icons visible on mobile phones? Thanks, regards

[Veronica]

hi we can stop the transformation of course detail block using this: .single-course .elementor-column-wrap.elementor-element-populated { transform:none !important; } but it is showing overlapping in here http://prntscr.com/10k82d2 are you talking about the same you want to stop the transformation but without this overlapping issue please confirm the same so I will try to perform the same with custom CSS code and also the continue course button and progress change their position to the bottom when scroll do you want to stop it too? and for the icon please create a new topic

[Author]

Posts