diff --git a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
index 0d83e5a7e..7aadba0cb 100644
--- a/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
+++ b/src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/addon-block-recentlyaccessedcourses.html
@@ -8,14 +8,12 @@
         <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.icon == 'spinner'"></ion-spinner>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" class="core-loading-center">
+<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
     <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_recentlyaccessedcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
-    <div class="safe-area-page">
-         <div class="core-horizontal-scroll">
-            <ng-container *ngFor="let course of courses">
-                <core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses" [showDownload]="downloadEnabled"></core-courses-course-progress>
-            </ng-container>
-        </div>
+     <div class="core-horizontal-scroll">
+        <ng-container *ngFor="let course of courses">
+            <core-courses-course-progress [course]="course" class="core-recentlyaccessedcourses" [showDownload]="downloadEnabled"></core-courses-course-progress>
+        </ng-container>
     </div>
 </core-loading>
diff --git a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
index f3538163d..f6e60ba65 100644
--- a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
+++ b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/addon-block-recentlyaccesseditems.html
@@ -1,7 +1,7 @@
 <ion-item-divider>
     <h2>{{ 'addon.block_recentlyaccesseditems.pluginname' | translate }}</h2>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" class="core-loading-center">
+<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
     <div class="core-horizontal-scroll" *ngIf="items && items.length > 0">
         <div *ngFor="let item of items">
             <ion-card>
diff --git a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
index a900b1f0f..a6b1d49b7 100644
--- a/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
+++ b/src/addon/block/starredcourses/components/starredcourses/addon-block-starredcourses.html
@@ -8,14 +8,12 @@
         <ion-spinner *ngIf="!prefetchCoursesData.icon || prefetchCoursesData.icon == 'spinner'"></ion-spinner>
     </div>
 </ion-item-divider>
-<core-loading [hideUntil]="loaded" class="core-loading-center">
+<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
     <core-empty-box *ngIf="courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_starredcourses.nocourses' | translate"></core-empty-box>
     <!-- List of courses. -->
-    <div class="safe-area-page">
-        <div class="core-horizontal-scroll">
-            <ng-container *ngFor="let course of courses">
-                <core-courses-course-progress [course]="course" class="core-block_starredcourses" [showDownload]="downloadEnabled"></core-courses-course-progress>
-            </ng-container>
-        </div>
+    <div class="core-horizontal-scroll">
+        <ng-container *ngFor="let course of courses">
+            <core-courses-course-progress [course]="course" class="core-block_starredcourses" [showDownload]="downloadEnabled"></core-courses-course-progress>
+        </ng-container>
     </div>
 </core-loading>
diff --git a/src/addon/block/timeline/components/timeline/addon-block-timeline.html b/src/addon/block/timeline/components/timeline/addon-block-timeline.html
index 0e160fdf0..62afe16e1 100644
--- a/src/addon/block/timeline/components/timeline/addon-block-timeline.html
+++ b/src/addon/block/timeline/components/timeline/addon-block-timeline.html
@@ -20,18 +20,16 @@
     <core-loading [hideUntil]="timeline.loaded" [hidden]="sort != 'sortbydates'" class="core-loading-center">
         <addon-block-timeline-events [events]="timeline.events" showCourse="true" [canLoadMore]="timeline.canLoadMore" (loadMore)="loadMoreTimeline()" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
     </core-loading>
-    <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'" class="core-loading-center">
-        <div class="safe-area-page">
-            <ion-grid no-padding>
-                <ion-row no-padding>
-                    <ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6>
-                        <core-courses-course-progress [course]="course">
-                            <addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMoreCourse(course)" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
-                        </core-courses-course-progress>
-                    </ion-col>
-                </ion-row>
-            </ion-grid>
-        </div>
+    <core-loading [hideUntil]="timelineCourses.loaded" [hidden]="sort != 'sortbycourses'" class="core-loading-center safe-area-page">
+        <ion-grid no-padding>
+            <ion-row no-padding>
+                <ion-col *ngFor="let course of timelineCourses.courses" no-padding col-12 col-md-6>
+                    <core-courses-course-progress [course]="course">
+                        <addon-block-timeline-events [events]="course.events" [canLoadMore]="course.canLoadMore" (loadMore)="loadMoreCourse(course)" [from]="dataFrom" [to]="dataTo"></addon-block-timeline-events>
+                    </core-courses-course-progress>
+                </ion-col>
+            </ion-row>
+        </ion-grid>
         <core-empty-box *ngIf="timelineCourses.courses.length == 0" image="assets/img/icons/courses.svg" [message]="'addon.block_timeline.nocoursesinprogress' | translate"></core-empty-box>
     </core-loading>
 </core-loading>
\ No newline at end of file
diff --git a/src/addon/blog/components/entries/addon-blog-entries.html b/src/addon/blog/components/entries/addon-blog-entries.html
index b3a41ae72..f5ed012be 100644
--- a/src/addon/blog/components/entries/addon-blog-entries.html
+++ b/src/addon/blog/components/entries/addon-blog-entries.html
@@ -3,12 +3,10 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
     <core-loading [hideUntil]="loaded" class="core-loading-center">
-        <div class="safe-padding-horizontal">
-            <ion-item *ngIf="showMyEntriesToggle">
-                <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
-                <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)">></ion-toggle>
-            </ion-item>
-        </div>
+        <ion-item *ngIf="showMyEntriesToggle">
+            <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
+            <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)">></ion-toggle>
+        </ion-item>
         <core-empty-box *ngIf="entries && entries.length == 0" icon="fa-newspaper-o" [message]="'addon.blog.noentriesyet' | translate"></core-empty-box>
         <ng-container *ngFor="let entry of entries">
             <ion-card *ngIf="!onlyMyEntries || entry.userid == currentUserId">
@@ -28,7 +26,9 @@
                     </p>
                 </ion-item>
                 <ion-card-content>
-                    <core-format-text [text]="entry.summary" [component]="this.component" [componentId]="entry.id"></core-format-text>
+                    <ion-item>
+                        <core-format-text [text]="entry.summary" [component]="this.component" [componentId]="entry.id"></core-format-text>
+                    </ion-item>
                     <ion-item text-wrap *ngIf="tagsEnabled && entry.tags && entry.tags.length > 0">
                         <div item-start>{{ 'core.tag.tags' | translate }}:</div>
                         <core-tag-list [tags]="entry.tags"></core-tag-list>
diff --git a/src/addon/calendar/components/calendar/addon-calendar-calendar.html b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
index 093b97064..460072acb 100644
--- a/src/addon/calendar/components/calendar/addon-calendar-calendar.html
+++ b/src/addon/calendar/components/calendar/addon-calendar-calendar.html
@@ -6,7 +6,7 @@
     </core-context-menu>
 </core-navbar-buttons>
 
-<core-loading [hideUntil]="loaded" class="core-loading-center">
+<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
     <!-- Period name and arrows to navigate. -->
     <ion-grid no-padding class="addon-calendar-navigation">
         <ion-row align-items-center>
diff --git a/src/addon/calendar/pages/day/day.html b/src/addon/calendar/pages/day/day.html
index cb9102207..4f225959f 100644
--- a/src/addon/calendar/pages/day/day.html
+++ b/src/addon/calendar/pages/day/day.html
@@ -19,7 +19,7 @@
     </ion-refresher>
 
     <!-- Period name and arrows to navigate. -->
-    <ion-grid padding-top>
+    <ion-grid padding-top class="safe-area-page">
         <ion-row>
             <ion-col text-start *ngIf="currentMoment">
                 <a ion-button icon-only clear (click)="loadPrevious()" [title]="'addon.calendar.dayprev' | translate">
@@ -37,7 +37,7 @@
         </ion-row>
     </ion-grid>
 
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="safe-area-page">
         <!-- There is data to be synchronized -->
         <ion-card class="core-warning-card" icon-start *ngIf="hasOffline">
             <ion-icon name="warning"></ion-icon> {{ 'core.hasdatatosync' | translate:{$a: 'core.day' | translate} }}
diff --git a/src/addon/files/pages/list/list.html b/src/addon/files/pages/list/list.html
index 06fdce330..4d467d824 100644
--- a/src/addon/files/pages/list/list.html
+++ b/src/addon/files/pages/list/list.html
@@ -8,7 +8,7 @@
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
 
-    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles">
+    <core-loading [hideUntil]="filesLoaded" *ngIf="showPrivateFiles || showSiteFiles" class="safe-area-page">
         <!-- Allow selecting the files to see: private or site. -->
         <div padding *ngIf="showPrivateFiles && showSiteFiles && !path">
             <ion-select [(ngModel)]="root" (ngModelChange)="rootChanged()" interface="popover" class="core-button-select">
diff --git a/src/addon/messages/pages/discussion/discussion.html b/src/addon/messages/pages/discussion/discussion.html
index 8363436b7..f29618655 100644
--- a/src/addon/messages/pages/discussion/discussion.html
+++ b/src/addon/messages/pages/discussion/discussion.html
@@ -25,7 +25,7 @@
     </core-navbar-buttons>
 </ion-header>
 <ion-content class="has-footer">
-    <core-loading [hideUntil]="loaded">
+    <core-loading [hideUntil]="loaded" class="safe-area-page">
         <!-- Load previous messages. -->
         <core-infinite-loading [enabled]="canLoadMore" (action)="loadPrevious($event)" position="top" [error]="loadMoreError"></core-infinite-loading>
 
@@ -34,7 +34,7 @@
             <p text-center><i>{{ 'addon.messages.selfconversationdefaultmessage' | translate }}</i></p>
         </ng-container>
 
-        <ion-list class="addon-messages-discussion-container safe-area-page" [class.addon-messages-discussion-group]="isGroup" [attr.aria-live]="'polite'">
+        <ion-list class="addon-messages-discussion-container" [class.addon-messages-discussion-group]="isGroup" [attr.aria-live]="'polite'">
             <ng-container *ngFor="let message of messages; index as index; last as last">
                 <h6 text-center *ngIf="message.showDate" class="addon-messages-date">
                     {{ message.timecreated | coreFormatDate: "strftimedayshort" }}
diff --git a/src/addon/mod/book/components/index/addon-mod-book-index.html b/src/addon/mod/book/components/index/addon-mod-book-index.html
index 13cc19b7e..3b1f0d214 100644
--- a/src/addon/mod/book/components/index/addon-mod-book-index.html
+++ b/src/addon/mod/book/components/index/addon-mod-book-index.html
@@ -18,7 +18,7 @@
 
     <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>
 
-    <div padding>
+    <div padding class="safe-padding-horizontal">
         <core-navigation-bar [previous]="previousChapter > 0 && previousChapter" [next]="nextChapter > 0 && nextChapter" (action)="changeChapter($event)"></core-navigation-bar>
         <core-format-text [component]="component" [componentId]="componentId" [text]="chapterContent"></core-format-text>
         <div margin-top *ngIf="tagsEnabled && contentsMap && contentsMap[currentChapter] && contentsMap[currentChapter].tags && contentsMap[currentChapter].tags.length > 0">
diff --git a/src/addon/mod/chat/components/index/addon-mod-chat-index.html b/src/addon/mod/chat/components/index/addon-mod-chat-index.html
index 3aaa3b0ce..a9bc1ebdc 100644
--- a/src/addon/mod/chat/components/index/addon-mod-chat-index.html
+++ b/src/addon/mod/chat/components/index/addon-mod-chat-index.html
@@ -10,7 +10,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="loaded" class="core-loading-center">
+<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
 
     <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>
 
diff --git a/src/addon/mod/chat/pages/sessions/sessions.html b/src/addon/mod/chat/pages/sessions/sessions.html
index b78df54bc..acffafa23 100644
--- a/src/addon/mod/chat/pages/sessions/sessions.html
+++ b/src/addon/mod/chat/pages/sessions/sessions.html
@@ -28,9 +28,9 @@
                     <p *ngIf="session.duration">{{ session.duration | coreDuration }}</p>
                 </ion-item>
                 <ion-card-content>
-                    <p *ngFor="let user of session.sessionusers">
+                    <ion-item *ngFor="let user of session.sessionusers">
                         {{ user.userfullname }} <span *ngIf="user.messagecount">({{ user.messagecount }})</span>
-                    </p>
+                    </ion-item>
                 </ion-card-content>
                 <div *ngIf="session.sessionusers.length < session.allsessionusers.length">
                     <button ion-button clear (click)="showMoreUsers(session, $event)">
diff --git a/src/addon/mod/data/components/index/addon-mod-data-index.html b/src/addon/mod/data/components/index/addon-mod-data-index.html
index dd2beb9a0..cb7f30534 100644
--- a/src/addon/mod/data/components/index/addon-mod-data-index.html
+++ b/src/addon/mod/data/components/index/addon-mod-data-index.html
@@ -66,7 +66,7 @@
         </div>
     </ng-container>
 
-    <div class="addon-data-contents addon-data-entries-{{data.id}}" *ngIf="!isEmpty">
+    <div class="addon-data-contents addon-data-entries-{{data.id}} safe-padding-horizontal" *ngIf="!isEmpty">
         <core-style [css]="data.csstemplate" prefix=".addon-data-entries-{{data.id}}"></core-style>
 
         <core-compile-html [text]="entriesRendered" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html>
diff --git a/src/addon/mod/imscp/components/index/addon-mod-imscp-index.html b/src/addon/mod/imscp/components/index/addon-mod-imscp-index.html
index 775db0670..e8c542dfa 100644
--- a/src/addon/mod/imscp/components/index/addon-mod-imscp-index.html
+++ b/src/addon/mod/imscp/components/index/addon-mod-imscp-index.html
@@ -14,7 +14,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="loaded" class="core-loading-center">
+<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
     <div class="addon-mod-imscp-container">
         <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>
         <core-navigation-bar [previous]="previousItem" [next]="nextItem" (action)="loadItem($event)" [info]="description" [title]="'core.description' | translate" [component]="component" [componentId]="componentId"></core-navigation-bar>
diff --git a/src/addon/mod/lti/components/index/addon-mod-lti-index.html b/src/addon/mod/lti/components/index/addon-mod-lti-index.html
index e46b4fdae..6f76ace97 100644
--- a/src/addon/mod/lti/components/index/addon-mod-lti-index.html
+++ b/src/addon/mod/lti/components/index/addon-mod-lti-index.html
@@ -9,7 +9,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="loaded" class="core-loading-center">
+<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
 
     <core-course-module-description *ngIf="lti && lti.showdescriptionlaunch" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>
 
diff --git a/src/addon/mod/page/components/index/addon-mod-page-index.html b/src/addon/mod/page/components/index/addon-mod-page-index.html
index 819cef352..d231a3874 100644
--- a/src/addon/mod/page/components/index/addon-mod-page-index.html
+++ b/src/addon/mod/page/components/index/addon-mod-page-index.html
@@ -11,7 +11,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="loaded" class="core-loading-center">
+<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
 
     <core-course-module-description *ngIf="displayDescription" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>
 
diff --git a/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html b/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html
index 7f7cb5b74..b6eba13f7 100644
--- a/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html
+++ b/src/addon/mod/quiz/components/index/addon-mod-quiz-index.html
@@ -36,7 +36,9 @@
     <!-- List of user attempts. -->
     <ion-card class="addon-mod_quiz-table" *ngIf="quiz && attempts && attempts.length">
         <ion-card-header text-wrap>
-            <h2>{{ 'addon.mod_quiz.summaryofattempts' | translate }}</h2>
+            <div class="safe-padding-horizontal">
+                <h2>{{ 'addon.mod_quiz.summaryofattempts' | translate }}</h2>
+            </div>
         </ion-card-header>
         <ion-list>
             <!-- "Header" of the table -->
diff --git a/src/addon/mod/quiz/pages/review/review.html b/src/addon/mod/quiz/pages/review/review.html
index 3dba297ac..4d398ed27 100644
--- a/src/addon/mod/quiz/pages/review/review.html
+++ b/src/addon/mod/quiz/pages/review/review.html
@@ -18,8 +18,10 @@
         <!-- Review summary -->
         <ion-card *ngIf="attempt">
             <ion-card-header text-wrap>
-                <h2 *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</h2>
-                <h2 *ngIf="!attempt.preview">{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}</h2>
+                <div class="safe-padding-horizontal">
+                    <h2 *ngIf="attempt.preview">{{ 'addon.mod_quiz.reviewofpreview' | translate }}</h2>
+                    <h2 *ngIf="!attempt.preview">{{ 'addon.mod_quiz.reviewofattempt' | translate:{$a: attempt.attempt} }}</h2>
+                </div>
             </ion-card-header>
             <ion-list>
                 <ion-item text-wrap no-lines>
diff --git a/src/addon/mod/resource/components/index/addon-mod-resource-index.html b/src/addon/mod/resource/components/index/addon-mod-resource-index.html
index bfe0d9270..43e4c906f 100644
--- a/src/addon/mod/resource/components/index/addon-mod-resource-index.html
+++ b/src/addon/mod/resource/components/index/addon-mod-resource-index.html
@@ -11,7 +11,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="loaded" class="core-loading-center">
+<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
 
     <core-course-module-description *ngIf="mode != 'iframe' && (mode != 'embedded' || displayDescription)" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>
 
diff --git a/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html
index 5aeb8dec5..959fd819f 100644
--- a/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/src/addon/mod/scorm/components/index/addon-mod-scorm-index.html
@@ -26,7 +26,9 @@
         <!-- Attempts status. -->
         <ion-card *ngIf="(scorm.displayattemptstatus || (scorm.offlineAttempts && scorm.offlineAttempts.length)) && !skip">
             <ion-card-header text-wrap>
-                <h2>{{ 'addon.mod_scorm.attempts' | translate }}</h2>
+                <div class="safe-padding-horizontal">
+                    <h2>{{ 'addon.mod_scorm.attempts' | translate }}</h2>
+                </div>
             </ion-card-header>
             <ion-list>
                 <ng-container *ngIf="scorm.displayattemptstatus">
diff --git a/src/addon/mod/survey/components/index/addon-mod-survey-index.html b/src/addon/mod/survey/components/index/addon-mod-survey-index.html
index 58f12a502..3ed46e9bc 100644
--- a/src/addon/mod/survey/components/index/addon-mod-survey-index.html
+++ b/src/addon/mod/survey/components/index/addon-mod-survey-index.html
@@ -12,7 +12,7 @@
 </core-navbar-buttons>
 
 <!-- Content. -->
-<core-loading [hideUntil]="loaded" class="core-loading-center">
+<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">
 
     <core-course-module-description *ngIf="survey && !survey.surveydone && !hasOffline" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>
 
diff --git a/src/addon/mod/url/components/index/addon-mod-url-index.html b/src/addon/mod/url/components/index/addon-mod-url-index.html
index bf2d57265..2e3ae8b8b 100644
--- a/src/addon/mod/url/components/index/addon-mod-url-index.html
+++ b/src/addon/mod/url/components/index/addon-mod-url-index.html
@@ -31,11 +31,11 @@
             <h2>{{ 'addon.mod_url.pointingtourl' | translate }}</h2>
             <p>{{ url }}</p>
         </ion-item>
-        <div padding>
+        <ion-item text-wrap>
             <a ion-button block (click)="go()" icon-start>
                 <ion-icon name="link" start></ion-icon>
                 {{ 'addon.mod_url.accessurl' | translate }}
             </a>
-        </div>
+        </ion-item>
     </ion-list>
 </core-loading>
diff --git a/src/addon/mod/wiki/components/index/index.scss b/src/addon/mod/wiki/components/index/index.scss
index 3a0249f11..e7edc2e28 100644
--- a/src/addon/mod/wiki/components/index/index.scss
+++ b/src/addon/mod/wiki/components/index/index.scss
@@ -13,6 +13,7 @@ ion-app.app-root addon-mod-wiki-index {
     .addon-mod_wiki-page-content {
         background-color: $white;
         border-top: 1px solid $gray;
+        @include safe-area-padding-horizontal(0px, 0px);
         @include darkmode() {
             background-color: $black;
         }
diff --git a/src/app/app.ios.scss b/src/app/app.ios.scss
index d90e3da7b..76b7d379d 100644
--- a/src/app/app.ios.scss
+++ b/src/app/app.ios.scss
@@ -37,7 +37,6 @@ ion-app.app-root.ios {
     @include margin-horizontal(0, null);
   }
 
-
   @each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
     .core-#{$color-name}-card {
       @extend .card-ios ;
@@ -48,10 +47,10 @@ ion-app.app-root.ios {
       }
 
       &[icon-start] {
-        @include padding(null, null, null, $card-ios-padding-left * 2 + 20);
+        @include safe-area-padding(null, null, null, $card-ios-padding-left * 2 + 20);
 
         ion-icon {
-          @include position(null, null, null, $card-ios-padding-left);
+          @include safe-area-position(null, null, null, $card-ios-padding-left);
         }
       }
     }
@@ -121,4 +120,4 @@ ion-app.app-root.ios {
       cursor: pointer;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/app.md.scss b/src/app/app.md.scss
index db1666048..a1efde285 100644
--- a/src/app/app.md.scss
+++ b/src/app/app.md.scss
@@ -43,10 +43,10 @@ ion-app.app-root.md {
       }
 
       &[icon-start] {
-        @include padding(null, null, null, $card-md-padding-left * 2 + 20);
+        @include safe-area-padding(null, null, null, $card-md-padding-left * 2 + 20);
 
         ion-icon {
-          @include position(null, null, null, $card-md-padding-left);
+          @include safe-area-position(null, null, null, $card-md-padding-left);
         }
       }
     }
diff --git a/src/app/app.scss b/src/app/app.scss
index a43d1efee..8f49c0974 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -738,13 +738,13 @@ ion-app.app-root {
       }
 
       &[icon-start] {
-        @include padding(null, null, null, 52px);
+        @include safe-area-padding(null, null, null, 52px);
         position: relative;
 
         > ion-icon {
           color: $color-base;
           position: absolute;
-          @include position(0, null, null, 16px);
+          @include safe-area-position(0, null, null, 16px);
           height: 100%;
           font-size: 24px;
           display: flex;
@@ -786,17 +786,7 @@ ion-app.app-root {
     }
 
     .core-#{$color-name}-selected-item {
-      @include safe-area-border-start(5px, solid, $color-base);
-
-      &.item-md {
-        @include padding(null, null, null, $item-md-padding-start - 5px);
-      }
-      &.item-ios {
-        @include padding(null, null, null, $item-ios-padding-start - 5px);
-      }
-      &.item-wp {
-        @include padding(null, null, null, $item-wp-padding-start - 5px);
-      }
+      @include core-selected-item($color-base);
     }
 
     .split-pane-main .core-#{$color-name}-selected-item {
@@ -852,6 +842,8 @@ ion-app.app-root {
 
   @media only screen and (min-height: 400px) and (min-width: 300px) {
       .core-modal-lateral {
+        @include core-split-area-end();
+
         .modal-wrapper {
           position: absolute;
           @include position(0 !important, 0 !important, 0 !important, auto);
@@ -1031,6 +1023,14 @@ ion-app.app-root {
     flex-flow: nowrap;
     overflow-x: scroll;
     flex-direction: row;
+
+    .item-ios.item-block {
+      @include padding-horizontal($item-ios-padding-end / 2, null);
+
+      .item-inner {
+        @include padding-horizontal(null, $item-ios-padding-end / 2);
+      }
+    }
   }
 
   ion-content.core-expand-max .scroll-content {
@@ -1095,11 +1095,6 @@ ion-app.app-root {
   }
 }
 
-[dir="ltr"] body, [dir="rtl"] body {
-  padding-top: constant(safe-area-inset-top); //for iOS 11.2
-  padding-top: env(safe-area-inset-top); //for iOS 11.1
-}
-
 body.keyboard-is-open {
   ion-content:not(.has-footer) {
     > .scroll-content, > .fixed-content {
@@ -1112,31 +1107,6 @@ body.keyboard-is-open {
   }
 }
 
-.safe-padding-horizontal{
-  @include safe-area-padding-horizontal(0px, 0px);
-}
-
-[padding].safe-padding-horizontal,
-ion-app.ios [padding].safe-padding-horizontal {
-  @include safe-area-padding-horizontal($content-padding, $content-padding);
-}
-
-ion-app.ios .split-pane-side,
-.split-pane-side {
-    .safe-padding-horizontal,
-    [padding].safe-padding-horizontal {
-      @include safe-area-padding-start(0px, $content-padding);
-    }
-}
-
-ion-app.ios .split-pane-main,
-.split-pane-main {
-    .safe-padding-horizontal,
-    [padding].safe-padding-horizontal {
-      @include safe-area-padding-end($content-padding, 0px);
-    }
-}
-
 details summary {
   pointer-events: auto;
 }
@@ -1239,3 +1209,42 @@ ion-app.platform-desktop {
     font-size: 28px;
   }
 }
+
+// Safe areas
+[dir="ltr"] body, [dir="rtl"] body {
+  padding-top: constant(safe-area-inset-top); //for iOS 11.2
+  padding-top: env(safe-area-inset-top); //for iOS 11.1
+}
+
+ion-app.app-root {
+  .safe-area-page,
+  .safe-padding-horizontal {
+    @include safe-area-padding-horizontal(0px, 0px);
+  }
+
+  [padding].safe-padding-horizontal,
+  &.ios [padding].safe-padding-horizontal {
+    @include safe-area-padding-horizontal($content-padding, $content-padding);
+  }
+
+  // Disable safe area padding.
+  ion-popover,
+  .safe-area-page,
+  .safe-padding-horizontal {
+    .item-ios.item-block {
+      @include padding-horizontal($item-ios-padding-end, null);
+
+      .item-inner {
+        @include padding-horizontal(null, $item-ios-padding-end / 2);
+      }
+    }
+  }
+
+  .item-ios[detail-push] .item-inner,
+  button.item-ios:not([detail-none]) .item-inner,
+  a.item-ios:not([detail-none]) .item-inner {
+    [item-end] {
+      @include safe-area-margin-horizontal(($item-ios-padding-start / 2), ($item-ios-padding-end / 2));
+    }
+  }
+}
diff --git a/src/app/app.wp.scss b/src/app/app.wp.scss
index 127e273b0..97a8317ae 100644
--- a/src/app/app.wp.scss
+++ b/src/app/app.wp.scss
@@ -40,10 +40,10 @@ ion-app.app-root.wp {
       }
 
       &[icon-start] {
-        @include padding(null, null, null, $card-wp-padding-left * 2 + 20);
+        @include safe-area-padding(null, null, null, $card-wp-padding-left * 2 + 20);
 
         ion-icon {
-          @include position(null, null, null, $card-wp-padding-left);
+          @include safe-area-position(null, null, null, $card-wp-padding-left);
         }
       }
     }
diff --git a/src/components/file/file.scss b/src/components/file/file.scss
index 227c565b8..9fa957c53 100644
--- a/src/components/file/file.scss
+++ b/src/components/file/file.scss
@@ -20,7 +20,7 @@ ion-app.app-root {
 
     core-file > .item.item-block > .item-inner {
         border-bottom: 0;
-        @include padding(null, 0, null, null);
+        @include safe-area-padding(null, 0px, null, null);
         .buttons {
             display: flex;
             flex-flow: row;
diff --git a/src/components/loading/loading.scss b/src/components/loading/loading.scss
index 8b4136eea..d4c5916ba 100644
--- a/src/components/loading/loading.scss
+++ b/src/components/loading/loading.scss
@@ -20,6 +20,16 @@ ion-app.app-root {
         &.core-loading-noheight .core-loading-content {
             height: auto;
         }
+
+        &.safe-area-page {
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+
+            > .core-loading-content > *,
+            > .core-loading-content-loading > * {
+                @include safe-area-padding-horizontal(0px, 0px);
+            }
+        }
     }
 
     .scroll-content > core-loading,
diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts
index 21cb4e92f..ad4c61032 100644
--- a/src/components/loading/loading.ts
+++ b/src/components/loading/loading.ts
@@ -84,11 +84,13 @@ export class CoreLoadingComponent implements OnInit, OnChanges {
                     setTimeout(() => {
                         // Change CSS to force calculate height.
                         this.content.nativeElement.classList.add('core-loading-content');
+                        this.content.nativeElement.classList.remove('core-loading-content-loading');
                     }, 500);
                 });
             } else {
                 this.element.classList.remove('core-loading-loaded');
                 this.content.nativeElement.classList.remove('core-loading-content');
+                this.content.nativeElement.classList.add('core-loading-content-loading');
             }
 
             // Trigger the event after a timeout since the elements inside ngIf haven't been added to DOM yet.
diff --git a/src/components/split-view/split-view.scss b/src/components/split-view/split-view.scss
index 4d1fe88aa..355e1ef4e 100644
--- a/src/components/split-view/split-view.scss
+++ b/src/components/split-view/split-view.scss
@@ -17,6 +17,11 @@ ion-app.app-root core-split-view {
     .split-pane-visible {
         .split-pane-main {
             display: block;
+            @include core-split-area-end();
+        }
+
+        .split-pane-side {
+            @include core-split-area-start();
         }
 
         .split-pane-side .core-split-item-selected {
@@ -27,12 +32,6 @@ ion-app.app-root core-split-view {
               background-color: $black;
             }
         }
-
-        .item-ios[detail-push] .item-inner,
-        button.item-ios:not([detail-none]) .item-inner,
-        a.item-ios:not([detail-none]) .item-inner {
-            @include background-position(end, $item-ios-padding-end - 2, center);
-        }
     }
     ion-header {
         display: none;
@@ -41,32 +40,3 @@ ion-app.app-root core-split-view {
         padding-top: 0  !important;
     }
 }
-
-.safe-area-page {
-    @include safe-area-padding-horizontal(0px, 0px);
-}
-
-ion-app.app-root .split-pane-visible .split-pane-side {
-  .safe-area-page  {
-    @include safe-area-padding-start(0px, 0px);
-
-    .core-split-item-selected {
-      @include border-start(5px, solid, $core-splitview-selected);
-    }
-  }
-
-  // Disable safe area padding.
-  .item-ios.item-block .item-inner {
-    @include padding-horizontal(null, $item-ios-padding-end / 2);
-  }
-}
-
-ion-app.app-root .split-pane-visible .split-pane-main {
-  .safe-area-page  {
-    @include safe-area-padding-end(0px, 0px);
-  }
-
-  .toolbar {
-    @include safe-area-padding-end(0px, 0px);
-  }
-}
diff --git a/src/core/block/components/block/block.scss b/src/core/block/components/block/block.scss
index 2ab0c8f20..95fcc68e7 100644
--- a/src/core/block/components/block/block.scss
+++ b/src/core/block/components/block/block.scss
@@ -19,7 +19,7 @@ ion-app.app-root core-block {
   }
 
   .item-divider {
-    @include safe-area-padding-horizontal(null, 0px);
+    @include padding-horizontal(null, 0px);
   }
 
   .item-divider .core-button-spinner {
diff --git a/src/core/block/components/course-blocks/course-blocks.scss b/src/core/block/components/course-blocks/course-blocks.scss
index ef2da86c0..b81858bc9 100644
--- a/src/core/block/components/course-blocks/course-blocks.scss
+++ b/src/core/block/components/course-blocks/course-blocks.scss
@@ -22,12 +22,14 @@ ion-app.app-root core-block-course-blocks {
                 box-shadow: none !important;
                 flex-grow: 1;
                 max-width: 100%;
+                @include core-split-area-start();
             }
 
             div.core-course-blocks-side {
                 max-width: $core-side-blocks-max-width;
                 min-width: $core-side-blocks-min-width;
                 @include border-start(1px, solid, $list-md-border-color);
+                @include core-split-area-end();
             }
 
             .core-course-blocks-content,
diff --git a/src/core/course/components/format/core-course-format.html b/src/core/course/components/format/core-course-format.html
index 40bcd52fe..7013b69f5 100644
--- a/src/core/course/components/format/core-course-format.html
+++ b/src/core/course/components/format/core-course-format.html
@@ -55,7 +55,7 @@
                 <core-infinite-loading [enabled]="canLoadMore" (action)="showMoreActivities($event)"></core-infinite-loading>
             </div>
 
-            <ion-buttons padding end class="core-course-section-nav-buttons" *ngIf="displaySectionSelector && sections && sections.length">
+            <ion-buttons padding end class="core-course-section-nav-buttons safe-padding-horizontal" *ngIf="displaySectionSelector && sections && sections.length">
                 <button *ngIf="previousSection" ion-button color="light" icon-only (click)="sectionChanged(previousSection)" title="{{ 'core.previous' | translate }}">
                     <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
                     <core-format-text class="accesshide" [text]="previousSection.formattedName || previousSection.name"></core-format-text>
diff --git a/src/core/course/components/module-description/course-module-description.scss b/src/core/course/components/module-description/course-module-description.scss
new file mode 100644
index 000000000..e34a0f102
--- /dev/null
+++ b/src/core/course/components/module-description/course-module-description.scss
@@ -0,0 +1,16 @@
+ion-app.app-root {
+    .safe-area-page,
+    .safe-padding-horizontal {
+        core-course-module-description {
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+            .item-ios.item-block {
+                @include safe-area-padding-horizontal($item-ios-padding-end / 2, null);
+
+                .item-inner {
+                    @include safe-area-padding-horizontal(null, $item-ios-padding-end / 2);
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/core/courses/components/my-courses/my-courses.html b/src/core/courses/components/my-courses/my-courses.html
index 06ca202b8..f6133e350 100644
--- a/src/core/courses/components/my-courses/my-courses.html
+++ b/src/core/courses/components/my-courses/my-courses.html
@@ -1,7 +1,7 @@
 <core-loading [hideUntil]="coursesLoaded">
     <ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
     </ion-searchbar>
-    <ion-grid no-padding>
+    <ion-grid no-padding class="safe-area-page">
         <ion-row no-padding>
             <ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
                 <core-courses-course-progress [course]="course" class="core-courseoverview" showAll="true"></core-courses-course-progress>
diff --git a/src/core/grades/components/course/core-grades-course.html b/src/core/grades/components/course/core-grades-course.html
index 991a1d048..9832467c9 100644
--- a/src/core/grades/components/course/core-grades-course.html
+++ b/src/core/grades/components/course/core-grades-course.html
@@ -2,11 +2,11 @@
     <ion-refresher [enabled]="gradesLoaded" (ionRefresh)="refreshGrades($event)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <core-loading [hideUntil]="gradesLoaded">
+    <core-loading [hideUntil]="gradesLoaded" class="safe-area-page">
         <core-empty-box *ngIf="!gradesTable" icon="stats" [message]="'core.grades.nogradesreturned' | translate">
         </core-empty-box>
 
-        <div *ngIf="gradesTable" class="core-grades-container safe-area-page">
+        <div *ngIf="gradesTable" class="core-grades-container">
             <table cellspacing="0" cellpadding="0" class="core-grades-table">
                 <thead>
                     <tr>
diff --git a/src/core/siteplugins/providers/helper.ts b/src/core/siteplugins/providers/helper.ts
index 0544efa54..288ca0f0b 100644
--- a/src/core/siteplugins/providers/helper.ts
+++ b/src/core/siteplugins/providers/helper.ts
@@ -664,7 +664,8 @@ export class CoreSitePluginsHelperProvider {
 
         const uniqueName = this.sitePluginsProvider.getHandlerUniqueName(plugin, handlerName),
             blockName = (handlerSchema.moodlecomponent || plugin.component).replace('block_', ''),
-            titleString = (handlerSchema.displaydata && handlerSchema.displaydata.title) ? handlerSchema.displaydata.title : 'pluginname',
+            titleString = (handlerSchema.displaydata && handlerSchema.displaydata.title) ?
+                handlerSchema.displaydata.title : 'pluginname',
             prefixedTitle = this.getPrefixedString(plugin.addon, titleString);
 
         this.blockDelegate.registerHandler(
diff --git a/src/core/tag/pages/search/search.html b/src/core/tag/pages/search/search.html
index 5635d09d9..7fb46cba0 100644
--- a/src/core/tag/pages/search/search.html
+++ b/src/core/tag/pages/search/search.html
@@ -7,7 +7,7 @@
     <ion-refresher [enabled]="loaded" (ionRefresh)="refreshData($event)">
         <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
     </ion-refresher>
-    <ion-grid>
+    <ion-grid class="safe-area-page">
         <ion-row>
             <ion-col col-12 [attr.col-sm-6]="collections && collections.length > 1 ? '' : null">
                 <core-search-box (onSubmit)="searchTags($event)" (onClear)="searchTags('')" [initialSearch]="query" [disabled]="searching" autocorrect="off" [spellcheck]="false" [autoFocus]="true" [lengthCheck]="0"></core-search-box>
@@ -20,7 +20,7 @@
             </ion-col>
         </ion-row>
     </ion-grid>
-    <core-loading [hideUntil]="loaded && !searching">
+    <core-loading [hideUntil]="loaded && !searching" class="safe-area-page">
         <core-empty-box *ngIf="!cloud || !cloud.tags || !cloud.tags.length" icon="pricetags" [message]="'core.tag.notagsfound' | translate: {$a: query}"></core-empty-box>
 
         <ng-container *ngIf="cloud && cloud.tags && cloud.tags.length > 0">
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index ff18d0e8f..f82a5a8fa 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -413,7 +413,6 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
   }
 }
 
-
 @mixin safe-area-border-end($px, $type, $color) {
   $safe-area-position: calc(constant(safe-area-inset-right) + #{$px});
   $safe-area-position-env: calc(env(safe-area-inset-right) + #{$px});
@@ -425,6 +424,29 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
   }
 }
 
+@mixin safe-area-margin-horizontal($start, $end: $start) {
+  $safe-area-end: null;
+  $safe-area-start: null;
+  $safe-area-start-env: null;
+  $safe-area-end-env: null;
+
+  @if ($end) {
+    $safe-area-end: calc(constant(safe-area-inset-right) + #{$end});
+    $safe-area-end-env: calc(env(safe-area-inset-right) + #{$end});
+  }
+  @if ($start) {
+    $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
+    $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
+  }
+
+  @include margin-horizontal($start, $end);
+
+  @media screen and (orientation: landscape) {
+    @include margin-horizontal($safe-area-start, $safe-area-end);
+    @include margin-horizontal($safe-area-start-env, $safe-area-end-env);
+  }
+}
+
 @mixin safe-area-padding-start($start, $end) {
   $safe-area-start: calc(constant(safe-area-inset-left) + #{$start});
   $safe-area-start-env: calc(env(safe-area-inset-left) + #{$start});
@@ -449,6 +471,12 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
   }
 }
 
+@mixin safe-area-position($top: null, $end: null, $bottom: null, $start: null) {
+  @include safe-position-horizontal($start, $end);
+  top: $top;
+  bottom: $bottom;
+}
+
 @mixin horizontal_scroll_item($width, $min-width, $max-width) {
     flex: 0 0 $width;
     min-width: $min-width;
@@ -556,16 +584,91 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
 }
 
 @mixin core-selected-item($selected-color) {
-  @include border-start(5px, solid, $selected-color);
+  @include safe-area-border-start(5px, solid, $selected-color);
 
   &.item-md {
-      @include padding(null, null, null, $item-md-padding-start - 5px);
+      @include padding-horizontal($item-md-padding-start - 5px, null);
   }
   &.item-ios {
-      @include padding(null, null, null, $item-ios-padding-start - 5px);
+      @include padding-horizontal($item-ios-padding-start - 5px, null);
   }
   &.item-wp {
-      @include padding(null, null, null, $item-wp-padding-start - 5px);
+      @include padding-horizontal($item-wp-padding-start - 5px, null);
+  }
+}
+
+
+@mixin core-split-area-start() {
+  .safe-padding-horizontal,
+  [padding].safe-padding-horizontal {
+    @include safe-area-padding-start(0px, $content-padding);
+  }
+
+  .safe-area-page  {
+    @include safe-area-padding-start(0px, 0px);
+
+    .core-split-item-selected {
+      @include border-start(5px, solid, $core-splitview-selected);
+    }
+  }
+
+  core-loading.safe-area-page {
+    > .core-loading-content > *,
+    > .core-loading-content-loading > * {
+        @include safe-area-padding-start(0px, 0px);
+    }
+  }
+
+  // Disable safe area padding on the "end" side.
+  .item-ios.item-block .item-inner {
+    @include padding-horizontal(null, $item-ios-padding-end / 2);
+  }
+
+  @if $item-ios-detail-push-show == true {
+    .item-ios[detail-push] .item-inner,
+    button.item-ios:not([detail-none]) .item-inner,
+    a.item-ios:not([detail-none]) .item-inner {
+      @include padding-horizontal(null, 32px);
+      @include background-position(end, $item-ios-padding-end - 2, center);
+      [item-end] {
+        @include margin-horizontal(($item-ios-padding-start / 2), ($item-ios-padding-end / 2));
+      }
+    }
+  }
+
+  ion-fab[end] {
+    @include position-horizontal(null, $fab-content-margin);
+  }
+}
+
+@mixin core-split-area-end() {
+  .safe-padding-horizontal,
+  [padding].safe-padding-horizontal {
+    @include safe-area-padding-end($content-padding, 0px);
+  }
+
+  .safe-area-page  {
+    @include safe-area-padding-end(0px, 0px);
+  }
+
+  core-loading.safe-area-page {
+    > .core-loading-content > *,
+    > .core-loading-content-loading > * {
+        @include safe-area-padding-end(0px, 0px);
+    }
+  }
+
+  // Disable safe area padding on the "start" side.
+  .item-ios {
+    @include padding-horizontal($item-ios-padding-end / 2, null);
+  }
+
+  .toolbar {
+    @include safe-area-padding-end(0px, 0px);
+  }
+
+  .core-nav-item-selected, .item.core-nav-item-selected {
+    @include border-start(5px, solid, $core-splitview-selected);
   }
 }