diff --git a/app/components/announcement_banner/__snapshots__/announcement_banner.test.js.snap b/app/components/announcement_banner/__snapshots__/announcement_banner.test.js.snap
index 9ac3bb32f..fb9a3a48f 100644
--- a/app/components/announcement_banner/__snapshots__/announcement_banner.test.js.snap
+++ b/app/components/announcement_banner/__snapshots__/announcement_banner.test.js.snap
@@ -22,11 +22,14 @@ exports[`AnnouncementBanner should match snapshot 1`] = `
     activeOpacity={0.2}
     onPress={[Function]}
     style={
-      Object {
-        "alignItems": "center",
-        "flex": 1,
-        "flexDirection": "row",
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+        },
+        null,
+      ]
     }
   >
     <Text
diff --git a/app/components/announcement_banner/announcement_banner.js b/app/components/announcement_banner/announcement_banner.js
index 67b4b6d91..2b239a8b2 100644
--- a/app/components/announcement_banner/announcement_banner.js
+++ b/app/components/announcement_banner/announcement_banner.js
@@ -11,8 +11,8 @@ import {
 } from 'react-native';
 import {intlShape} from 'react-intl';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-
 import RemoveMarkdown from 'app/components/remove_markdown';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 const {View: AnimatedView} = Animated;
 
@@ -27,6 +27,7 @@ export default class AnnouncementBanner extends PureComponent {
         bannerText: PropTypes.string,
         bannerTextColor: PropTypes.string,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -84,6 +85,7 @@ export default class AnnouncementBanner extends PureComponent {
             bannerColor,
             bannerText,
             bannerTextColor,
+            isLandscape,
         } = this.props;
 
         const bannerStyle = {
@@ -101,7 +103,7 @@ export default class AnnouncementBanner extends PureComponent {
             >
                 <TouchableOpacity
                     onPress={this.handlePress}
-                    style={style.wrapper}
+                    style={[style.wrapper, padding(isLandscape)]}
                 >
                     <Text
                         ellipsizeMode='tail'
diff --git a/app/components/announcement_banner/announcement_banner.test.js b/app/components/announcement_banner/announcement_banner.test.js
index 73085ebf1..390e62dec 100644
--- a/app/components/announcement_banner/announcement_banner.test.js
+++ b/app/components/announcement_banner/announcement_banner.test.js
@@ -21,6 +21,7 @@ describe('AnnouncementBanner', () => {
         bannerText: 'Banner Text',
         bannerTextColor: '#fff',
         theme: Preferences.THEMES.default,
+        isLandscape: false,
     };
 
     test('should match snapshot', () => {
diff --git a/app/components/announcement_banner/index.js b/app/components/announcement_banner/index.js
index f06d6eea1..346f08acc 100644
--- a/app/components/announcement_banner/index.js
+++ b/app/components/announcement_banner/index.js
@@ -8,6 +8,7 @@ import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 import {goToScreen} from 'app/actions/navigation';
+import {isLandscape} from 'app/selectors/device';
 
 import AnnouncementBanner from './announcement_banner';
 
@@ -23,6 +24,7 @@ function mapStateToProps(state) {
         bannerText: config.BannerText,
         bannerTextColor: config.BannerTextColor || '#000',
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/autocomplete/at_mention/at_mention.js b/app/components/autocomplete/at_mention/at_mention.js
index 7b8fafaee..c3b0d0de0 100644
--- a/app/components/autocomplete/at_mention/at_mention.js
+++ b/app/components/autocomplete/at_mention/at_mention.js
@@ -35,6 +35,7 @@ export default class AtMention extends PureComponent {
         teamMembers: PropTypes.array,
         theme: PropTypes.object.isRequired,
         value: PropTypes.string,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -178,6 +179,7 @@ export default class AtMention extends PureComponent {
                 id={section.id}
                 defaultMessage={section.defaultMessage}
                 theme={this.props.theme}
+                isLandscape={this.props.isLandscape}
             />
         );
     };
diff --git a/app/components/autocomplete/at_mention/index.js b/app/components/autocomplete/at_mention/index.js
index 87f5bd21c..33b8ab5cd 100644
--- a/app/components/autocomplete/at_mention/index.js
+++ b/app/components/autocomplete/at_mention/index.js
@@ -7,6 +7,7 @@ import {connect} from 'react-redux';
 import {autocompleteUsers} from 'mattermost-redux/actions/users';
 import {getCurrentChannelId, getDefaultChannel} from 'mattermost-redux/selectors/entities/channels';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
+import {isLandscape} from 'app/selectors/device';
 
 import {
     filterMembersInChannel,
@@ -45,6 +46,7 @@ function mapStateToProps(state, ownProps) {
         outChannel,
         requestStatus: state.requests.users.autocompleteUsers.status,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/autocomplete/at_mention_item/at_mention_item.js b/app/components/autocomplete/at_mention_item/at_mention_item.js
index b24a83290..fcdb6573e 100644
--- a/app/components/autocomplete/at_mention_item/at_mention_item.js
+++ b/app/components/autocomplete/at_mention_item/at_mention_item.js
@@ -13,6 +13,7 @@ import ProfilePicture from 'app/components/profile_picture';
 import BotTag from 'app/components/bot_tag';
 import GuestTag from 'app/components/guest_tag';
 import {makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 export default class AtMentionItem extends PureComponent {
     static propTypes = {
@@ -24,6 +25,7 @@ export default class AtMentionItem extends PureComponent {
         isGuest: PropTypes.bool,
         isBot: PropTypes.bool,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -44,6 +46,7 @@ export default class AtMentionItem extends PureComponent {
             username,
             theme,
             isBot,
+            isLandscape,
             isGuest,
         } = this.props;
 
@@ -54,7 +57,7 @@ export default class AtMentionItem extends PureComponent {
             <TouchableOpacity
                 key={userId}
                 onPress={this.completeMention}
-                style={style.row}
+                style={[style.row, padding(isLandscape)]}
             >
                 <View style={style.rowPicture}>
                     <ProfilePicture
diff --git a/app/components/autocomplete/at_mention_item/index.js b/app/components/autocomplete/at_mention_item/index.js
index 382537563..ba634b989 100644
--- a/app/components/autocomplete/at_mention_item/index.js
+++ b/app/components/autocomplete/at_mention_item/index.js
@@ -9,6 +9,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 import AtMentionItem from './at_mention_item';
 
+import {isLandscape} from 'app/selectors/device';
 import {isGuest} from 'app/utils/users';
 
 function mapStateToProps(state, ownProps) {
@@ -21,6 +22,7 @@ function mapStateToProps(state, ownProps) {
         isBot: Boolean(user.is_bot),
         isGuest: isGuest(user),
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/autocomplete/autocomplete_section_header.js b/app/components/autocomplete/autocomplete_section_header.js
index b15c7f482..997a8cf44 100644
--- a/app/components/autocomplete/autocomplete_section_header.js
+++ b/app/components/autocomplete/autocomplete_section_header.js
@@ -7,6 +7,7 @@ import {ActivityIndicator, View} from 'react-native';
 
 import FormattedText from 'app/components/formatted_text';
 import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 export default class AutocompleteSectionHeader extends PureComponent {
     static propTypes = {
@@ -14,15 +15,20 @@ export default class AutocompleteSectionHeader extends PureComponent {
         id: PropTypes.string.isRequired,
         loading: PropTypes.bool,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
+    };
+
+    static defaultProps = {
+        isLandscape: false,
     };
 
     render() {
-        const {defaultMessage, id, loading, theme} = this.props;
+        const {defaultMessage, id, loading, theme, isLandscape} = this.props;
         const style = getStyleFromTheme(theme);
 
         return (
             <View style={style.sectionWrapper}>
-                <View style={style.section}>
+                <View style={[style.section, padding(isLandscape)]}>
                     <FormattedText
                         id={id}
                         defaultMessage={defaultMessage}
diff --git a/app/components/autocomplete/channel_mention/channel_mention.js b/app/components/autocomplete/channel_mention/channel_mention.js
index d0dc707df..4c3b395cb 100644
--- a/app/components/autocomplete/channel_mention/channel_mention.js
+++ b/app/components/autocomplete/channel_mention/channel_mention.js
@@ -39,6 +39,7 @@ export default class ChannelMention extends PureComponent {
         theme: PropTypes.object.isRequired,
         value: PropTypes.string,
         serverVersion: PropTypes.string,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -195,6 +196,7 @@ export default class ChannelMention extends PureComponent {
                 defaultMessage={section.defaultMessage}
                 loading={!section.hideLoadingIndicator && this.props.requestStatus === RequestStatus.STARTED}
                 theme={this.props.theme}
+                isLandscape={this.props.isLandscape}
             />
         );
     };
diff --git a/app/components/autocomplete/channel_mention/index.js b/app/components/autocomplete/channel_mention/index.js
index 9c2898ae0..7bc6974b8 100644
--- a/app/components/autocomplete/channel_mention/index.js
+++ b/app/components/autocomplete/channel_mention/index.js
@@ -7,6 +7,7 @@ import {connect} from 'react-redux';
 import {searchChannels, autocompleteChannelsForSearch} from 'mattermost-redux/actions/channels';
 import {getMyChannelMemberships} from 'mattermost-redux/selectors/entities/channels';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
+import {isLandscape} from 'app/selectors/device';
 
 import {
     filterMyChannels,
@@ -52,6 +53,7 @@ function mapStateToProps(state, ownProps) {
         requestStatus: state.requests.channels.getChannels.status,
         theme: getTheme(state),
         serverVersion: state.entities.general.serverVersion,
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/autocomplete/channel_mention_item/channel_mention_item.js b/app/components/autocomplete/channel_mention_item/channel_mention_item.js
index 606de102f..cbf2f95c4 100644
--- a/app/components/autocomplete/channel_mention_item/channel_mention_item.js
+++ b/app/components/autocomplete/channel_mention_item/channel_mention_item.js
@@ -10,6 +10,7 @@ import {
 
 import {General} from 'mattermost-redux/constants';
 import BotTag from 'app/components/bot_tag';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import GuestTag from 'app/components/guest_tag';
 
 import {makeStyleSheetFromTheme} from 'app/utils/theme';
@@ -24,6 +25,7 @@ export default class ChannelMentionItem extends PureComponent {
         isGuest: PropTypes.bool.isRequired,
         onPress: PropTypes.func.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     completeMention = () => {
@@ -43,6 +45,7 @@ export default class ChannelMentionItem extends PureComponent {
             theme,
             type,
             isBot,
+            isLandscape,
             isGuest,
         } = this.props;
 
@@ -56,7 +59,7 @@ export default class ChannelMentionItem extends PureComponent {
                 <TouchableOpacity
                     key={channelId}
                     onPress={this.completeMention}
-                    style={style.row}
+                    style={[style.row, padding(isLandscape)]}
                 >
                     <Text style={style.rowDisplayName}>{'@' + displayName}</Text>
                     <BotTag
@@ -74,7 +77,7 @@ export default class ChannelMentionItem extends PureComponent {
             <TouchableOpacity
                 key={channelId}
                 onPress={this.completeMention}
-                style={style.row}
+                style={[style.row, padding(isLandscape)]}
             >
                 <Text style={style.rowDisplayName}>{displayName}</Text>
                 <Text style={style.rowName}>{` (~${name})`}</Text>
diff --git a/app/components/autocomplete/channel_mention_item/index.js b/app/components/autocomplete/channel_mention_item/index.js
index a1b57f86a..3bf635684 100644
--- a/app/components/autocomplete/channel_mention_item/index.js
+++ b/app/components/autocomplete/channel_mention_item/index.js
@@ -15,6 +15,8 @@ import ChannelMentionItem from './channel_mention_item';
 
 import {getUser} from 'mattermost-redux/selectors/entities/users';
 
+import {isLandscape} from 'app/selectors/device';
+
 function mapStateToProps(state, ownProps) {
     const channel = getChannel(state, ownProps.channelId);
     const displayName = getChannelNameForSearchAutocomplete(state, ownProps.channelId);
@@ -33,6 +35,7 @@ function mapStateToProps(state, ownProps) {
         type: channel.type,
         isBot,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/autocomplete/slash_suggestion/index.js b/app/components/autocomplete/slash_suggestion/index.js
index 123b2fefc..7a00252d7 100644
--- a/app/components/autocomplete/slash_suggestion/index.js
+++ b/app/components/autocomplete/slash_suggestion/index.js
@@ -9,6 +9,7 @@ import {getAutocompleteCommands} from 'mattermost-redux/actions/integrations';
 import {getAutocompleteCommandsList} from 'mattermost-redux/selectors/entities/integrations';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
+import {isLandscape} from 'app/selectors/device';
 
 import SlashSuggestion from './slash_suggestion';
 
@@ -31,6 +32,7 @@ function mapStateToProps(state) {
         commandsRequest: state.requests.integrations.getAutocompleteCommands,
         currentTeamId: getCurrentTeamId(state),
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/autocomplete/slash_suggestion/slash_suggestion.js b/app/components/autocomplete/slash_suggestion/slash_suggestion.js
index b3bf07eba..bbf8c1da0 100644
--- a/app/components/autocomplete/slash_suggestion/slash_suggestion.js
+++ b/app/components/autocomplete/slash_suggestion/slash_suggestion.js
@@ -32,6 +32,7 @@ export default class SlashSuggestion extends Component {
         onChangeText: PropTypes.func.isRequired,
         onResultCountChange: PropTypes.func.isRequired,
         value: PropTypes.string,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -145,6 +146,7 @@ export default class SlashSuggestion extends Component {
             onPress={this.completeSuggestion}
             theme={this.props.theme}
             trigger={item.trigger}
+            isLandscape={this.props.isLandscape}
         />
     )
 
diff --git a/app/components/autocomplete/slash_suggestion/slash_suggestion_item.js b/app/components/autocomplete/slash_suggestion/slash_suggestion_item.js
index 85681ec0c..667637fa4 100644
--- a/app/components/autocomplete/slash_suggestion/slash_suggestion_item.js
+++ b/app/components/autocomplete/slash_suggestion/slash_suggestion_item.js
@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 export default class SlashSuggestionItem extends PureComponent {
     static propTypes = {
@@ -17,6 +18,7 @@ export default class SlashSuggestionItem extends PureComponent {
         onPress: PropTypes.func.isRequired,
         theme: PropTypes.object.isRequired,
         trigger: PropTypes.string,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     completeSuggestion = () => {
@@ -30,6 +32,7 @@ export default class SlashSuggestionItem extends PureComponent {
             hint,
             theme,
             trigger,
+            isLandscape,
         } = this.props;
 
         const style = getStyleFromTheme(theme);
@@ -37,7 +40,7 @@ export default class SlashSuggestionItem extends PureComponent {
         return (
             <TouchableOpacity
                 onPress={this.completeSuggestion}
-                style={style.row}
+                style={[style.row, padding(isLandscape)]}
             >
                 <Text style={style.suggestionName}>{`/${trigger} ${hint}`}</Text>
                 <Text style={style.suggestionDescription}>{description}</Text>
diff --git a/app/components/channel_intro/channel_intro.js b/app/components/channel_intro/channel_intro.js
index 658b53177..2ff50fa9c 100644
--- a/app/components/channel_intro/channel_intro.js
+++ b/app/components/channel_intro/channel_intro.js
@@ -11,7 +11,7 @@ import {
 import {getFullName} from 'mattermost-redux/utils/user_utils';
 import {General} from 'mattermost-redux/constants';
 import {injectIntl, intlShape} from 'react-intl';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import ProfilePicture from 'app/components/profile_picture';
 import BotTag from 'app/components/bot_tag';
 import GuestTag from 'app/components/guest_tag';
@@ -30,6 +30,7 @@ class ChannelIntro extends PureComponent {
         currentChannelMembers: PropTypes.array.isRequired,
         intl: intlShape.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -307,7 +308,7 @@ class ChannelIntro extends PureComponent {
     };
 
     render() {
-        const {currentChannel, theme} = this.props;
+        const {currentChannel, theme, isLandscape} = this.props;
         const style = getStyleSheet(theme);
         const channelType = currentChannel.type;
 
@@ -315,10 +316,10 @@ class ChannelIntro extends PureComponent {
         if (channelType === General.DM_CHANNEL || channelType === General.GM_CHANNEL) {
             profiles = (
                 <View>
-                    <View style={style.profilesContainer}>
+                    <View style={[style.profilesContainer, padding(isLandscape)]}>
                         {this.buildProfiles()}
                     </View>
-                    <View style={style.namesContainer}>
+                    <View style={[style.namesContainer, padding(isLandscape)]}>
                         {this.buildNames()}
                     </View>
                 </View>
@@ -328,7 +329,7 @@ class ChannelIntro extends PureComponent {
         return (
             <View style={style.container}>
                 {profiles}
-                <View style={style.contentContainer}>
+                <View style={[style.contentContainer, padding(isLandscape)]}>
                     {this.buildContent()}
                 </View>
             </View>
diff --git a/app/components/channel_intro/index.js b/app/components/channel_intro/index.js
index 8d6ccf49e..aa10a1525 100644
--- a/app/components/channel_intro/index.js
+++ b/app/components/channel_intro/index.js
@@ -10,7 +10,7 @@ import {makeGetChannel} from 'mattermost-redux/selectors/entities/channels';
 import {getCurrentUserId, getUser, makeGetProfilesInChannel} from 'mattermost-redux/selectors/entities/users';
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
-
+import {isLandscape} from 'app/selectors/device';
 import {goToScreen} from 'app/actions/navigation';
 import {getChannelMembersForDm} from 'app/selectors/channel';
 
@@ -50,6 +50,7 @@ function makeMapStateToProps() {
             currentChannel,
             currentChannelMembers,
             theme: getTheme(state),
+            isLandscape: isLandscape(state),
         };
     };
 }
diff --git a/app/components/channel_loader/__snapshots__/channel_loader.test.js.snap b/app/components/channel_loader/__snapshots__/channel_loader.test.js.snap
index d440ab175..e59927f00 100644
--- a/app/components/channel_loader/__snapshots__/channel_loader.test.js.snap
+++ b/app/components/channel_loader/__snapshots__/channel_loader.test.js.snap
@@ -9,6 +9,7 @@ exports[`ChannelLoader should match snapshot 1`] = `
         "flex": 1,
       },
       undefined,
+      null,
       Object {
         "backgroundColor": "#ffffff",
       },
diff --git a/app/components/channel_loader/channel_loader.js b/app/components/channel_loader/channel_loader.js
index f92042df7..ad550cde6 100644
--- a/app/components/channel_loader/channel_loader.js
+++ b/app/components/channel_loader/channel_loader.js
@@ -15,6 +15,7 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter';
 
 import CustomPropTypes from 'app/constants/custom_prop_types';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 const {View: AnimatedView} = Animated;
 
@@ -33,6 +34,7 @@ export default class ChannelLoader extends PureComponent {
         style: CustomPropTypes.Style,
         theme: PropTypes.object.isRequired,
         height: PropTypes.number,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     constructor(props) {
@@ -156,6 +158,7 @@ export default class ChannelLoader extends PureComponent {
             channelIsLoading,
             style: styleProp,
             theme,
+            isLandscape,
         } = this.props;
 
         if (!channelIsLoading) {
@@ -167,7 +170,7 @@ export default class ChannelLoader extends PureComponent {
 
         return (
             <View
-                style={[style.container, styleProp, {backgroundColor: bg}]}
+                style={[style.container, styleProp, padding(isLandscape), {backgroundColor: bg}]}
                 onLayout={this.handleLayout}
             >
                 {Array(this.state.maxRows).fill().map((item, index) => this.buildSections({
diff --git a/app/components/channel_loader/channel_loader.test.js b/app/components/channel_loader/channel_loader.test.js
index f742cc385..1591d1fac 100644
--- a/app/components/channel_loader/channel_loader.test.js
+++ b/app/components/channel_loader/channel_loader.test.js
@@ -20,6 +20,7 @@ describe('ChannelLoader', () => {
             handleSelectChannel: jest.fn(),
             setChannelLoading: jest.fn(),
         },
+        isLandscape: false,
     };
 
     test('should match snapshot', () => {
diff --git a/app/components/channel_loader/index.js b/app/components/channel_loader/index.js
index 397413b19..aa7d9b53f 100644
--- a/app/components/channel_loader/index.js
+++ b/app/components/channel_loader/index.js
@@ -10,6 +10,8 @@ import {handleSelectChannel, setChannelLoading} from 'app/actions/views/channel'
 
 import ChannelLoader from './channel_loader';
 
+import {isLandscape} from 'app/selectors/device';
+
 function mapStateToProps(state, ownProps) {
     const channelIsLoading = ownProps.hasOwnProperty('channelIsLoading') ?
         ownProps.channelIsLoading :
@@ -18,6 +20,7 @@ function mapStateToProps(state, ownProps) {
     return {
         channelIsLoading,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/custom_list/__snapshots__/index.test.js.snap b/app/components/custom_list/__snapshots__/index.test.js.snap
index 79bcda2bf..38087a1d3 100644
--- a/app/components/custom_list/__snapshots__/index.test.js.snap
+++ b/app/components/custom_list/__snapshots__/index.test.js.snap
@@ -117,10 +117,13 @@ exports[`CustomList should match snapshot, renderSectionHeader 1`] = `
   >
     <Text
       style={
-        Object {
-          "color": "#3d3c40",
-          "fontWeight": "600",
-        }
+        Array [
+          Object {
+            "color": "#3d3c40",
+            "fontWeight": "600",
+          },
+          null,
+        ]
       }
     >
       section_id
diff --git a/app/components/custom_list/channel_list_row/channel_list_row.js b/app/components/custom_list/channel_list_row/channel_list_row.js
index 5375d71e7..01feaf7a0 100644
--- a/app/components/custom_list/channel_list_row/channel_list_row.js
+++ b/app/components/custom_list/channel_list_row/channel_list_row.js
@@ -18,6 +18,7 @@ export default class ChannelListRow extends React.PureComponent {
         theme: PropTypes.object.isRequired,
         channel: PropTypes.object.isRequired,
         ...CustomListRow.propTypes,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     onPress = () => {
@@ -47,6 +48,7 @@ export default class ChannelListRow extends React.PureComponent {
                 enabled={this.props.enabled}
                 selectable={this.props.selectable}
                 selected={this.props.selected}
+                isLandscape={this.props.isLandscape}
             >
                 <View style={style.container}>
                     <View style={style.titleContainer}>
diff --git a/app/components/custom_list/channel_list_row/index.js b/app/components/custom_list/channel_list_row/index.js
index 980103e48..113da9f39 100644
--- a/app/components/custom_list/channel_list_row/index.js
+++ b/app/components/custom_list/channel_list_row/index.js
@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 import {makeGetChannel} from 'mattermost-redux/selectors/entities/channels';
-
+import {isLandscape} from 'app/selectors/device';
 import ChannelListRow from './channel_list_row';
 
 function makeMapStateToProps() {
@@ -16,6 +16,7 @@ function makeMapStateToProps() {
         return {
             theme: getTheme(state),
             channel: getChannel(state, ownProps),
+            isLandscape: isLandscape(state),
         };
     };
 }
diff --git a/app/components/custom_list/custom_list_row.js b/app/components/custom_list/custom_list_row.js
index 6f16d17b5..3caec1af7 100644
--- a/app/components/custom_list/custom_list_row.js
+++ b/app/components/custom_list/custom_list_row.js
@@ -8,7 +8,7 @@ import {
     View,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
-
+import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import ConditionalTouchable from 'app/components/conditional_touchable';
 import CustomPropTypes from 'app/constants/custom_prop_types';
 
@@ -20,10 +20,12 @@ export default class CustomListRow extends React.PureComponent {
         selected: PropTypes.bool,
         children: CustomPropTypes.Children,
         item: PropTypes.object,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
         enabled: true,
+        isLandscape: false,
     };
 
     render() {
@@ -33,7 +35,7 @@ export default class CustomListRow extends React.PureComponent {
                 onPress={this.props.onPress}
                 style={style.touchable}
             >
-                <View style={style.container}>
+                <View style={[style.container, padding(this.props.isLandscape)]}>
                     {this.props.selectable &&
                         <View style={style.selectorContainer}>
                             <View style={[style.selector, (this.props.selected && style.selectorFilled), (!this.props.enabled && style.selectorDisabled)]}>
diff --git a/app/components/custom_list/index.js b/app/components/custom_list/index.js
index c8b825d9b..42ae0461d 100644
--- a/app/components/custom_list/index.js
+++ b/app/components/custom_list/index.js
@@ -7,6 +7,7 @@ import {FlatList, Keyboard, Platform, SectionList, Text, View} from 'react-nativ
 
 import {ListTypes} from 'app/constants';
 import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
+import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 export const FLATLIST = 'flat';
 export const SECTIONLIST = 'section';
@@ -30,12 +31,14 @@ export default class CustomList extends PureComponent {
         selectable: PropTypes.bool,
         theme: PropTypes.object.isRequired,
         shouldRenderSeparator: PropTypes.bool,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
         listType: FLATLIST,
         showNoResults: true,
         shouldRenderSeparator: true,
+        isLandscape: false,
     };
 
     constructor(props) {
@@ -148,12 +151,13 @@ export default class CustomList extends PureComponent {
     };
 
     renderSectionHeader = ({section}) => {
-        const style = getStyleFromTheme(this.props.theme);
+        const {theme, isLandscape} = this.props;
+        const style = getStyleFromTheme(theme);
 
         return (
             <View style={style.sectionWrapper}>
                 <View style={style.sectionContainer}>
-                    <Text style={style.sectionText}>{section.id}</Text>
+                    <Text style={[style.sectionText, padding(isLandscape)]}>{section.id}</Text>
                 </View>
             </View>
         );
diff --git a/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap b/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap
index 741210df8..fdb73806e 100644
--- a/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap
+++ b/app/components/custom_list/user_list_row/__snapshots__/user_list_test.test.js.snap
@@ -14,6 +14,7 @@ exports[`UserListRow should match snapshot 1`] = `
   <CustomListRow
     enabled={true}
     id="21345"
+    isLandscape={false}
     onPress={[Function]}
   >
     <View
@@ -143,6 +144,7 @@ exports[`UserListRow should match snapshot for  currentUser with (you) populated
   <CustomListRow
     enabled={true}
     id="21345"
+    isLandscape={false}
     onPress={[Function]}
   >
     <View
@@ -270,6 +272,7 @@ exports[`UserListRow should match snapshot for deactivated user 1`] = `
   <CustomListRow
     enabled={true}
     id="21345"
+    isLandscape={false}
     onPress={[Function]}
   >
     <View
@@ -410,6 +413,7 @@ exports[`UserListRow should match snapshot for guest user 1`] = `
   <CustomListRow
     enabled={true}
     id="21345"
+    isLandscape={false}
     onPress={[Function]}
   >
     <View
diff --git a/app/components/custom_list/user_list_row/index.js b/app/components/custom_list/user_list_row/index.js
index 827bf7c80..8de48fbcf 100644
--- a/app/components/custom_list/user_list_row/index.js
+++ b/app/components/custom_list/user_list_row/index.js
@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 
 import {getTeammateNameDisplaySetting, getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getCurrentUserId, getUser} from 'mattermost-redux/selectors/entities/users';
-
+import {isLandscape} from 'app/selectors/device';
 import UserListRow from './user_list_row';
 
 function mapStateToProps(state, ownProps) {
@@ -14,6 +14,7 @@ function mapStateToProps(state, ownProps) {
         theme: getTheme(state),
         user: getUser(state, ownProps.id),
         teammateNameDisplay: getTeammateNameDisplaySetting(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/custom_list/user_list_row/user_list_row.js b/app/components/custom_list/user_list_row/user_list_row.js
index 8cf57fc42..10309de12 100644
--- a/app/components/custom_list/user_list_row/user_list_row.js
+++ b/app/components/custom_list/user_list_row/user_list_row.js
@@ -10,7 +10,6 @@ import {
 } from 'react-native';
 
 import {displayUsername} from 'mattermost-redux/utils/user_utils';
-
 import ProfilePicture from 'app/components/profile_picture';
 import BotTag from 'app/components/bot_tag';
 import GuestTag from 'app/components/guest_tag';
@@ -48,6 +47,7 @@ export default class UserListRow extends React.PureComponent {
             teammateNameDisplay,
             theme,
             user,
+            isLandscape,
         } = this.props;
 
         const {id, username} = user;
@@ -72,6 +72,7 @@ export default class UserListRow extends React.PureComponent {
                     enabled={enabled}
                     selectable={selectable}
                     selected={selected}
+                    isLandscape={isLandscape}
                 >
                     <View style={style.profileContainer}>
                         <ProfilePicture
diff --git a/app/components/custom_list/user_list_row/user_list_test.test.js b/app/components/custom_list/user_list_row/user_list_test.test.js
index c88ea250d..d2e62bcb1 100644
--- a/app/components/custom_list/user_list_row/user_list_test.test.js
+++ b/app/components/custom_list/user_list_row/user_list_test.test.js
@@ -29,6 +29,7 @@ describe('UserListRow', () => {
         },
         theme: Preferences.THEMES.default,
         teammateNameDisplay: 'test',
+        isLandscape: false,
     };
 
     test('should match snapshot', () => {
diff --git a/app/components/edit_channel_info/edit_channel_info.js b/app/components/edit_channel_info/edit_channel_info.js
index 70871ab9a..bcf2a9be8 100644
--- a/app/components/edit_channel_info/edit_channel_info.js
+++ b/app/components/edit_channel_info/edit_channel_info.js
@@ -23,6 +23,7 @@ import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_lo
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 import {getShortenedURL} from 'app/utils/url';
 import {t} from 'app/utils/i18n';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 export default class EditChannelInfo extends PureComponent {
     static propTypes = {
@@ -51,6 +52,7 @@ export default class EditChannelInfo extends PureComponent {
         oldChannelURL: PropTypes.string,
         oldHeader: PropTypes.string,
         oldPurpose: PropTypes.string,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -181,6 +183,7 @@ export default class EditChannelInfo extends PureComponent {
             channelURL,
             header,
             purpose,
+            isLandscape,
         } = this.props;
         const {error, saving} = this.props;
         const fullUrl = currentTeamUrl + '/channels';
@@ -204,7 +207,7 @@ export default class EditChannelInfo extends PureComponent {
         if (error) {
             displayError = (
                 <View style={[style.errorContainer, {width: deviceWidth}]}>
-                    <View style={style.errorWrapper}>
+                    <View style={[style.errorWrapper, padding(isLandscape)]}>
                         <ErrorText error={error}/>
                     </View>
                 </View>
@@ -225,12 +228,12 @@ export default class EditChannelInfo extends PureComponent {
                                 <View>
                                     <View>
                                         <FormattedText
-                                            style={style.title}
+                                            style={[style.title, padding(isLandscape)]}
                                             id='channel_modal.name'
                                             defaultMessage='Name'
                                         />
                                     </View>
-                                    <View style={style.inputContainer}>
+                                    <View style={[style.inputContainer, padding(isLandscape)]}>
                                         <TextInputWithLocalizedPlaceholder
                                             ref={this.nameInput}
                                             value={displayName}
@@ -249,7 +252,7 @@ export default class EditChannelInfo extends PureComponent {
                             {/*TODO: Hide channel url field until it's added to CreateChannel */}
                             {false && editing && !displayHeaderOnly && (
                                 <View>
-                                    <View style={style.titleContainer30}>
+                                    <View style={[style.titleContainer30, padding(isLandscape)]}>
                                         <FormattedText
                                             style={style.title}
                                             id='rename_channel.url'
@@ -259,7 +262,7 @@ export default class EditChannelInfo extends PureComponent {
                                             {shortUrl}
                                         </Text>
                                     </View>
-                                    <View style={style.inputContainer}>
+                                    <View style={[style.inputContainer, padding(isLandscape)]}>
                                         <TextInputWithLocalizedPlaceholder
                                             ref={this.urlInput}
                                             value={channelURL}
@@ -277,7 +280,7 @@ export default class EditChannelInfo extends PureComponent {
                             )}
                             {!displayHeaderOnly && (
                                 <View>
-                                    <View style={style.titleContainer30}>
+                                    <View style={[style.titleContainer30, padding(isLandscape)]}>
                                         <FormattedText
                                             style={style.title}
                                             id='channel_modal.purpose'
@@ -289,7 +292,7 @@ export default class EditChannelInfo extends PureComponent {
                                             defaultMessage='(optional)'
                                         />
                                     </View>
-                                    <View style={style.inputContainer}>
+                                    <View style={[style.inputContainer, padding(isLandscape)]}>
                                         <TextInputWithLocalizedPlaceholder
                                             ref={this.purposeInput}
                                             value={purpose}
@@ -308,14 +311,14 @@ export default class EditChannelInfo extends PureComponent {
                                     </View>
                                     <View>
                                         <FormattedText
-                                            style={style.helpText}
+                                            style={[style.helpText, padding(isLandscape)]}
                                             id='channel_modal.descriptionHelp'
                                             defaultMessage='Describe how this channel should be used.'
                                         />
                                     </View>
                                 </View>
                             )}
-                            <View style={style.titleContainer15}>
+                            <View style={[style.titleContainer15, padding(isLandscape)]}>
                                 <FormattedText
                                     style={style.title}
                                     id='channel_modal.header'
@@ -327,7 +330,7 @@ export default class EditChannelInfo extends PureComponent {
                                     defaultMessage='(optional)'
                                 />
                             </View>
-                            <View style={style.inputContainer}>
+                            <View style={[style.inputContainer, padding(isLandscape)]}>
                                 <TextInputWithLocalizedPlaceholder
                                     ref={this.headerInput}
                                     value={header}
@@ -347,7 +350,7 @@ export default class EditChannelInfo extends PureComponent {
                             </View>
                             <View ref={this.lastText}>
                                 <FormattedText
-                                    style={style.helpText}
+                                    style={[style.helpText, padding(isLandscape)]}
                                     id='channel_modal.headerHelp'
                                     defaultMessage={'Set text that will appear in the header of the channel beside the channel name. For example, include frequently used links by typing [Link Title](http://example.com).'}
                                 />
diff --git a/app/components/edit_channel_info/index.js b/app/components/edit_channel_info/index.js
index a523704f5..156b13db2 100644
--- a/app/components/edit_channel_info/index.js
+++ b/app/components/edit_channel_info/index.js
@@ -8,9 +8,15 @@ import {
     dismissModal,
     popTopScreen,
 } from 'app/actions/navigation';
-
+import {isLandscape} from 'app/selectors/device';
 import EditChannelInfo from './edit_channel_info';
 
+function mapStateToProps(state) {
+    return {
+        isLandscape: isLandscape(state),
+    };
+}
+
 function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
@@ -20,4 +26,4 @@ function mapDispatchToProps(dispatch) {
     };
 }
 
-export default connect(null, mapDispatchToProps)(EditChannelInfo);
+export default connect(mapStateToProps, mapDispatchToProps)(EditChannelInfo);
diff --git a/app/components/emoji_picker/emoji_picker.js b/app/components/emoji_picker/emoji_picker.js
index c3565b04c..66663cef5 100644
--- a/app/components/emoji_picker/emoji_picker.js
+++ b/app/components/emoji_picker/emoji_picker.js
@@ -26,7 +26,7 @@ import SearchBar from 'app/components/search_bar';
 import {DeviceTypes} from 'app/constants';
 import {emptyFunction} from 'app/utils/general';
 import {makeStyleSheetFromTheme, changeOpacity} from 'app/utils/theme';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import EmojiPickerRow from './emoji_picker_row';
 
 const EMOJI_SIZE = 30;
@@ -210,7 +210,8 @@ export default class EmojiPicker extends PureComponent {
     };
 
     getNumberOfColumns = (deviceWidth) => {
-        return Math.floor(Number(((deviceWidth - (SECTION_MARGIN * 2)) / (EMOJI_SIZE + (EMOJI_GUTTER * 2)))));
+        const shorten = DeviceTypes.IS_IPHONE_X && this.props.isLandscape ? 4 : 2;
+        return Math.floor(Number(((deviceWidth - (SECTION_MARGIN * shorten)) / (EMOJI_SIZE + (EMOJI_GUTTER * shorten)))));
     };
 
     renderItem = ({item}) => {
@@ -235,7 +236,7 @@ export default class EmojiPicker extends PureComponent {
                 onPress={() => this.props.onEmojiPress(item)}
                 style={style.flatListRow}
             >
-                <View style={style.flatListEmoji}>
+                <View style={[style.flatListEmoji, padding(this.props.isLandscape)]}>
                     <Emoji
                         emojiName={item}
                         size={20}
@@ -395,6 +396,8 @@ export default class EmojiPicker extends PureComponent {
         const {formatMessage} = intl;
         const styles = getStyleSheetFromTheme(theme);
 
+        const shorten = DeviceTypes.IS_IPHONE_X && isLandscape ? 6 : 2;
+
         let listComponent;
         if (searchTerm) {
             listComponent = (
@@ -414,7 +417,7 @@ export default class EmojiPicker extends PureComponent {
                 <SectionList
                     ref={this.attachSectionList}
                     showsVerticalScrollIndicator={false}
-                    style={[styles.listView, {width: deviceWidth - (SECTION_MARGIN * 2)}]}
+                    style={[styles.listView, {width: deviceWidth - (SECTION_MARGIN * shorten)}]}
                     sections={emojis}
                     renderSectionHeader={this.renderSectionHeader}
                     renderItem={this.renderItem}
@@ -460,7 +463,7 @@ export default class EmojiPicker extends PureComponent {
                     keyboardVerticalOffset={keyboardOffset}
                     enabled={Platform.OS === 'ios'}
                 >
-                    <View style={styles.searchBar}>
+                    <View style={[styles.searchBar, padding(isLandscape)]}>
                         <SearchBar
                             ref='search_bar'
                             placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
diff --git a/app/components/post/index.js b/app/components/post/index.js
index 300c7feaf..df48aeaa0 100644
--- a/app/components/post/index.js
+++ b/app/components/post/index.js
@@ -14,6 +14,7 @@ import {isPostFlagged, isSystemMessage} from 'mattermost-redux/utils/post_utils'
 
 import {goToScreen, showModalOverCurrentContext} from 'app/actions/navigation';
 import {insertToDraft, setPostTooltipVisible} from 'app/actions/views/channel';
+import {isLandscape} from 'app/selectors/device';
 
 import Post from './post';
 
@@ -83,6 +84,7 @@ function makeMapStateToProps() {
             theme: getTheme(state),
             isFlagged: isPostFlagged(post.id, myPreferences),
             isCommentMention,
+            isLandscape: isLandscape(state),
         };
     };
 }
diff --git a/app/components/post/post.js b/app/components/post/post.js
index 4345e0955..0bca3c441 100644
--- a/app/components/post/post.js
+++ b/app/components/post/post.js
@@ -21,6 +21,7 @@ import {fromAutoResponder} from 'app/utils/general';
 import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 import {t} from 'app/utils/i18n';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 import {Posts} from 'mattermost-redux/constants';
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
@@ -67,6 +68,7 @@ export default class Post extends PureComponent {
         isCommentMention: PropTypes.bool,
         location: PropTypes.string,
         isBot: PropTypes.bool,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -243,6 +245,7 @@ export default class Post extends PureComponent {
             skipFlaggedHeader,
             skipPinnedHeader,
             location,
+            isLandscape,
         } = this.props;
 
         if (!post) {
@@ -300,7 +303,7 @@ export default class Post extends PureComponent {
 
         return (
             <TouchableHighlight
-                style={[style.postStyle, highlighted]}
+                style={[style.postStyle, highlighted, padding(isLandscape)]}
                 onPress={this.handlePress}
                 onLongPress={this.showPostOptions}
                 underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}
diff --git a/app/components/post_textbox/__snapshots__/post_textbox.test.js.snap b/app/components/post_textbox/__snapshots__/post_textbox.test.js.snap
index ea489c424..fb98aa48d 100644
--- a/app/components/post_textbox/__snapshots__/post_textbox.test.js.snap
+++ b/app/components/post_textbox/__snapshots__/post_textbox.test.js.snap
@@ -6,14 +6,17 @@ exports[`PostTextBox should match, full snapshot 1`] = `
   <View
     onLayout={[Function]}
     style={
-      Object {
-        "alignItems": "flex-end",
-        "backgroundColor": "#ffffff",
-        "borderTopColor": "rgba(61,60,64,0.2)",
-        "borderTopWidth": 1,
-        "flexDirection": "row",
-        "paddingVertical": 4,
-      }
+      Array [
+        Object {
+          "alignItems": "flex-end",
+          "backgroundColor": "#ffffff",
+          "borderTopColor": "rgba(61,60,64,0.2)",
+          "borderTopWidth": 1,
+          "flexDirection": "row",
+          "paddingVertical": 4,
+        },
+        null,
+      ]
     }
   >
     <Connect(AttachmentButton)
diff --git a/app/components/post_textbox/index.js b/app/components/post_textbox/index.js
index 26e72bab0..ac0878ab0 100644
--- a/app/components/post_textbox/index.js
+++ b/app/components/post_textbox/index.js
@@ -22,6 +22,7 @@ import {userTyping} from 'app/actions/views/typing';
 import {getCurrentChannelDraft, getThreadDraft} from 'app/selectors/views';
 import {getChannelMembersForDm} from 'app/selectors/channel';
 import {getAllowedServerMaxFileSize} from 'app/utils/file';
+import {isLandscape} from 'app/selectors/device';
 
 import PostTextbox from './post_textbox';
 
@@ -69,6 +70,7 @@ function mapStateToProps(state, ownProps) {
         enableConfirmNotificationsToChannel,
         currentChannelMembersCount,
         isTimezoneEnabled,
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/post_textbox/post_textbox.test.js b/app/components/post_textbox/post_textbox.test.js
index 44940a24e..d1e33d9ce 100644
--- a/app/components/post_textbox/post_textbox.test.js
+++ b/app/components/post_textbox/post_textbox.test.js
@@ -49,6 +49,7 @@ describe('PostTextBox', () => {
         onCloseChannel: jest.fn(),
         cursorPositionEvent: '',
         valueEvent: '',
+        isLandscape: false,
     };
 
     test('should match, full snapshot', () => {
diff --git a/app/components/post_textbox/post_textbox_base.js b/app/components/post_textbox/post_textbox_base.js
index 249129f45..8a26972e4 100644
--- a/app/components/post_textbox/post_textbox_base.js
+++ b/app/components/post_textbox/post_textbox_base.js
@@ -32,6 +32,7 @@ import {NOTIFY_ALL_MEMBERS} from 'app/constants/view';
 import {t} from 'app/utils/i18n';
 import {confirmOutOfOfficeDisabled} from 'app/utils/status';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 const {RNTextInputReset} = NativeModules;
 
@@ -77,6 +78,7 @@ export default class PostTextBoxBase extends PureComponent {
         enableConfirmNotificationsToChannel: PropTypes.bool,
         isTimezoneEnabled: PropTypes.bool,
         currentChannel: PropTypes.object,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -146,7 +148,7 @@ export default class PostTextBoxBase extends PureComponent {
     numberOfTimezones = async () => {
         const {data} = await this.props.actions.getChannelTimezones(this.props.channelId);
         return data?.length || 0;
-    }
+    };
 
     canSend = () => {
         const {files, maxMessageLength, uploadFileRequestStatus} = this.props;
@@ -408,6 +410,7 @@ export default class PostTextBoxBase extends PureComponent {
         const {files} = this.props;
         const {intl} = this.context;
         const {value} = this.state;
+
         if (files.length === 0 && !value) {
             Alert.alert(
                 intl.formatMessage({
@@ -681,7 +684,7 @@ export default class PostTextBoxBase extends PureComponent {
 
     renderTextBox = () => {
         const {intl} = this.context;
-        const {channelDisplayName, channelIsArchived, channelIsLoading, channelIsReadOnly, theme} = this.props;
+        const {channelDisplayName, channelIsArchived, channelIsLoading, channelIsReadOnly, theme, isLandscape} = this.props;
         const style = getStyleSheet(theme);
 
         if (channelIsArchived) {
@@ -694,7 +697,7 @@ export default class PostTextBoxBase extends PureComponent {
 
         return (
             <View
-                style={style.inputWrapper}
+                style={[style.inputWrapper, padding(isLandscape)]}
                 onLayout={this.handleLayout}
             >
                 {this.getAttachmentButton()}
diff --git a/app/components/safe_area_view/iphone_x_spacing/index.js b/app/components/safe_area_view/iphone_x_spacing/index.js
new file mode 100644
index 000000000..9460b5e2e
--- /dev/null
+++ b/app/components/safe_area_view/iphone_x_spacing/index.js
@@ -0,0 +1,20 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {DeviceTypes, ViewTypes} from 'app/constants';
+
+export const paddingHorizontal = (isLandscape, modifier = 0) => {
+    return DeviceTypes.IS_IPHONE_X && isLandscape ? {paddingHorizontal: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null;
+};
+
+export const paddingLeft = (isLandscape, modifier = 0) => {
+    return DeviceTypes.IS_IPHONE_X && isLandscape ? {paddingLeft: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null;
+};
+
+export const paddingRight = (isLandscape, modifier = 0) => {
+    return DeviceTypes.IS_IPHONE_X && isLandscape ? {paddingRight: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null;
+};
+
+export const marginHorizontal = (isLandscape, modifier = 0) => {
+    return DeviceTypes.IS_IPHONE_X && isLandscape ? {marginHorizontal: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + modifier} : null;
+};
\ No newline at end of file
diff --git a/app/components/safe_area_view/safe_area_view.ios.js b/app/components/safe_area_view/safe_area_view.ios.js
index 00d73702a..9b1c4dc12 100644
--- a/app/components/safe_area_view/safe_area_view.ios.js
+++ b/app/components/safe_area_view/safe_area_view.ios.js
@@ -25,10 +25,12 @@ export default class SafeAreaIos extends PureComponent {
         navBarBackgroundColor: PropTypes.string,
         headerComponent: PropTypes.node,
         theme: PropTypes.object.isRequired,
+        useLandscapeMargin: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
         keyboardOffset: 0,
+        useLandscapeMargin: false,
     };
 
     constructor(props) {
@@ -150,7 +152,7 @@ export default class SafeAreaIos extends PureComponent {
     };
 
     render() {
-        const {backgroundColor, children, footerColor, footerComponent, keyboardOffset, theme} = this.props;
+        const {backgroundColor, children, footerColor, footerComponent, keyboardOffset, theme, useLandscapeMargin} = this.props;
         const {keyboard, safeAreaInsets} = this.state;
 
         let bgColor = theme.centerChannelBg;
@@ -173,6 +175,8 @@ export default class SafeAreaIos extends PureComponent {
                 style={{
                     flex: 1,
                     backgroundColor: bgColor,
+                    marginLeft: useLandscapeMargin ? safeAreaInsets.left : 0,
+                    marginRight: useLandscapeMargin ? safeAreaInsets.right : 0,
                 }}
             >
                 {this.renderTopBar()}
diff --git a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap
index 1bfdb0263..821ee00ee 100644
--- a/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap
+++ b/app/components/sidebars/main/channels_list/channel_item/__snapshots__/channel_item.test.js.snap
@@ -17,6 +17,7 @@ exports[`ChannelItem should match snapshot 1`] = `
             "height": 44,
           },
           undefined,
+          null,
         ]
       }
     >
@@ -118,6 +119,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
             "height": 44,
           },
           undefined,
+          null,
         ]
       }
     >
@@ -230,6 +232,7 @@ exports[`ChannelItem should match snapshot for current user i.e currentUser (you
             "height": 44,
           },
           undefined,
+          null,
         ]
       }
     >
@@ -342,6 +345,7 @@ exports[`ChannelItem should match snapshot for deactivated user and is currentCh
             "height": 44,
           },
           undefined,
+          null,
         ]
       }
     >
@@ -454,6 +458,7 @@ exports[`ChannelItem should match snapshot for deactivated user and is searchRes
             "height": 44,
           },
           undefined,
+          null,
         ]
       }
     >
@@ -561,6 +566,7 @@ exports[`ChannelItem should match snapshot with draft 1`] = `
             "height": 44,
           },
           undefined,
+          null,
         ]
       }
     >
@@ -664,6 +670,7 @@ exports[`ChannelItem should match snapshot with mentions and muted 1`] = `
           Object {
             "opacity": 0.5,
           },
+          null,
         ]
       }
     >
diff --git a/app/components/sidebars/main/channels_list/channel_item/channel_item.js b/app/components/sidebars/main/channels_list/channel_item/channel_item.js
index e5af091d4..1131f50bf 100644
--- a/app/components/sidebars/main/channels_list/channel_item/channel_item.js
+++ b/app/components/sidebars/main/channels_list/channel_item/channel_item.js
@@ -13,7 +13,7 @@ import {intlShape} from 'react-intl';
 import {Navigation} from 'react-native-navigation';
 
 import {General} from 'mattermost-redux/constants';
-
+import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import Badge from 'app/components/badge';
 import ChannelIcon from 'app/components/channel_icon';
 import {preventDoubleTap} from 'app/utils/tap';
@@ -40,6 +40,7 @@ export default class ChannelItem extends PureComponent {
         isSearchResult: PropTypes.bool,
         isBot: PropTypes.bool.isRequired,
         previewChannel: PropTypes.func,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -98,6 +99,7 @@ export default class ChannelItem extends PureComponent {
             isSearchResult,
             channel,
             isBot,
+            isLandscape,
         } = this.props;
 
         const isArchived = channel.delete_at > 0;
@@ -194,7 +196,7 @@ export default class ChannelItem extends PureComponent {
                     onPress={this.onPress}
                     onPressIn={this.onPreview}
                 >
-                    <View style={[style.container, mutedStyle]}>
+                    <View style={[style.container, mutedStyle, padding(isLandscape)]}>
                         {extraBorder}
                         <View style={[style.item, extraItemStyle]}>
                             {icon}
diff --git a/app/components/sidebars/main/channels_list/channel_item/channel_item.test.js b/app/components/sidebars/main/channels_list/channel_item/channel_item.test.js
index b9ced6211..5b0fa7558 100644
--- a/app/components/sidebars/main/channels_list/channel_item/channel_item.test.js
+++ b/app/components/sidebars/main/channels_list/channel_item/channel_item.test.js
@@ -38,6 +38,7 @@ describe('ChannelItem', () => {
         unreadMsgs: 1,
         isSearchResult: false,
         isBot: false,
+        isLandscape: false,
     };
 
     test('should match snapshot', () => {
diff --git a/app/components/sidebars/main/channels_list/channel_item/index.js b/app/components/sidebars/main/channels_list/channel_item/index.js
index 0649de1af..c5a11e534 100644
--- a/app/components/sidebars/main/channels_list/channel_item/index.js
+++ b/app/components/sidebars/main/channels_list/channel_item/index.js
@@ -14,7 +14,7 @@ import {getTheme, getTeammateNameDisplaySetting} from 'mattermost-redux/selector
 import {getCurrentUserId, getUser} from 'mattermost-redux/selectors/entities/users';
 import {getUserIdFromChannelName, isChannelMuted} from 'mattermost-redux/utils/channel_utils';
 import {displayUsername} from 'mattermost-redux/utils/user_utils';
-
+import {isLandscape} from 'app/selectors/device';
 import {getDraftForChannel} from 'app/selectors/views';
 import {isGuest as isGuestUser} from 'app/utils/users';
 
@@ -84,6 +84,7 @@ function makeMapStateToProps() {
             theme: getTheme(state),
             unreadMsgs,
             isBot,
+            isLandscape: isLandscape(state),
             isGuest,
         };
     };
diff --git a/app/components/sidebars/main/channels_list/channels_list.js b/app/components/sidebars/main/channels_list/channels_list.js
index d597cade0..38c4e359f 100644
--- a/app/components/sidebars/main/channels_list/channels_list.js
+++ b/app/components/sidebars/main/channels_list/channels_list.js
@@ -12,7 +12,7 @@ import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
 import SearchBar from 'app/components/search_bar';
 import {ViewTypes} from 'app/constants';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 import List from './list';
@@ -31,6 +31,7 @@ export default class ChannelsList extends PureComponent {
         theme: PropTypes.object.isRequired,
         drawerOpened: PropTypes.bool,
         previewChannel: PropTypes.func,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -90,6 +91,7 @@ export default class ChannelsList extends PureComponent {
             onShowTeams,
             theme,
             previewChannel,
+            isLandscape,
         } = this.props;
 
         const {searching, term} = this.state;
@@ -127,7 +129,7 @@ export default class ChannelsList extends PureComponent {
         };
 
         const title = (
-            <View style={styles.searchContainer}>
+            <View style={[styles.searchContainer, padding(isLandscape)]}>
                 <SearchBar
                     ref='search_bar'
                     placeholder={intl.formatMessage({id: 'mobile.channel_drawer.search', defaultMessage: 'Jump to...'})}
@@ -234,6 +236,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         divider: {
             backgroundColor: changeOpacity(theme.sidebarText, 0.1),
             height: 1,
+            width: '100%',
         },
         actionContainer: {
             alignItems: 'center',
diff --git a/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js b/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js
index d37d56c42..d956fc760 100644
--- a/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js
+++ b/app/components/sidebars/main/channels_list/filtered_list/filtered_list.js
@@ -21,9 +21,9 @@ import {General} from 'mattermost-redux/constants';
 import {sortChannelsByDisplayName} from 'mattermost-redux/utils/channel_utils';
 import {displayUsername} from 'mattermost-redux/utils/user_utils';
 import {t} from 'app/utils/i18n';
-
 import ChannelItem from 'app/components/sidebars/main/channels_list/channel_item';
 import {ListTypes} from 'app/constants';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 const VIEWABILITY_CONFIG = ListTypes.VISIBILITY_CONFIG_DEFAULTS;
 
@@ -55,6 +55,7 @@ class FilteredList extends Component {
         term: PropTypes.string,
         theme: PropTypes.object.isRequired,
         previewChannel: PropTypes.func,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -400,7 +401,7 @@ class FilteredList extends Component {
                 <View>
                     {topDivider && this.renderDivider(styles, 0)}
                     <View style={styles.titleContainer}>
-                        <Text style={styles.title}>
+                        <Text style={[styles.title, padding(this.props.isLandscape)]}>
                             {formatMessage({id, defaultMessage}).toUpperCase()}
                         </Text>
                         {action && this.renderSectionAction(styles, action)}
diff --git a/app/components/sidebars/main/channels_list/filtered_list/index.js b/app/components/sidebars/main/channels_list/filtered_list/index.js
index a9dac6a0f..ad5d2544b 100644
--- a/app/components/sidebars/main/channels_list/filtered_list/index.js
+++ b/app/components/sidebars/main/channels_list/filtered_list/index.js
@@ -20,7 +20,7 @@ import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUserId, getProfilesInCurrentTeam, getUsers, getUserIdsInChannels, getUserStatuses} from 'mattermost-redux/selectors/entities/users';
 import {getDirectShowPreferences, getTeammateNameDisplaySetting, getTheme} from 'mattermost-redux/selectors/entities/preferences';
-
+import {isLandscape} from 'app/selectors/device';
 import Config from 'assets/config';
 
 import FilteredList from './filtered_list';
@@ -124,6 +124,7 @@ function mapStateToProps(state) {
         pastDirectMessages: pastDirectMessages(state),
         restrictDms,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/sidebars/main/channels_list/index.js b/app/components/sidebars/main/channels_list/index.js
index 0ae75dd47..5613c86ba 100644
--- a/app/components/sidebars/main/channels_list/index.js
+++ b/app/components/sidebars/main/channels_list/index.js
@@ -4,12 +4,13 @@
 import {connect} from 'react-redux';
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
-
+import {isLandscape} from 'app/selectors/device';
 import ChannelsList from './channels_list';
 
 function mapStateToProps(state) {
     return {
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/sidebars/main/channels_list/list/index.js b/app/components/sidebars/main/channels_list/list/index.js
index 01aa8ab45..d907cb118 100644
--- a/app/components/sidebars/main/channels_list/list/index.js
+++ b/app/components/sidebars/main/channels_list/list/index.js
@@ -21,7 +21,7 @@ import {haveITeamPermission} from 'mattermost-redux/selectors/entities/roles';
 import Permissions from 'mattermost-redux/constants/permissions';
 
 import {showModal} from 'app/actions/navigation';
-
+import {isLandscape} from 'app/selectors/device';
 import {DeviceTypes, ViewTypes} from 'app/constants';
 
 import List from './list';
@@ -78,6 +78,7 @@ function mapStateToProps(state) {
         theme: getTheme(state),
         unreadChannelIds,
         orderedChannelIds,
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/components/sidebars/main/channels_list/list/list.js b/app/components/sidebars/main/channels_list/list/list.js
index c117574d9..11587f56c 100644
--- a/app/components/sidebars/main/channels_list/list/list.js
+++ b/app/components/sidebars/main/channels_list/list/list.js
@@ -20,13 +20,15 @@ import {General} from 'mattermost-redux/constants';
 import {debounce} from 'mattermost-redux/actions/helpers';
 
 import ChannelItem from 'app/components/sidebars/main/channels_list/channel_item';
-import {DeviceTypes, ListTypes} from 'app/constants';
+import {DeviceTypes, ListTypes, ViewTypes} from 'app/constants';
 import {SidebarSectionTypes} from 'app/constants/view';
 
 import {t} from 'app/utils/i18n';
 import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity} from 'app/utils/theme';
 
+import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
+
 const VIEWABILITY_CONFIG = {
     ...ListTypes.VISIBILITY_CONFIG_DEFAULTS,
     waitForInteraction: true,
@@ -45,6 +47,7 @@ export default class List extends PureComponent {
         theme: PropTypes.object.isRequired,
         orderedChannelIds: PropTypes.array.isRequired,
         previewChannel: PropTypes.func,
+        isLandscape: PropTypes.bool.isRequired,
         actions: PropTypes.shape({
             showModal: PropTypes.func.isRequired,
         }).isRequired,
@@ -342,7 +345,7 @@ export default class List extends PureComponent {
     };
 
     renderSectionHeader = ({section}) => {
-        const {styles} = this.props;
+        const {styles, isLandscape} = this.props;
         const {intl} = this.context;
         const {
             action,
@@ -355,7 +358,7 @@ export default class List extends PureComponent {
         return (
             <View>
                 {topSeparator && this.renderSectionSeparator()}
-                <View style={styles.titleContainer}>
+                <View style={[styles.titleContainer, padding(isLandscape)]}>
                     <Text style={styles.title}>
                         {intl.formatMessage({id, defaultMessage}).toUpperCase()}
                     </Text>
@@ -418,11 +421,15 @@ export default class List extends PureComponent {
     };
 
     render() {
-        const {styles, theme} = this.props;
+        const {styles, theme, isLandscape} = this.props;
         const {sections, width, showIndicator} = this.state;
 
         const paddingBottom = this.listContentPadding();
 
+        const unreadBarStyles = DeviceTypes.IS_IPHONE_X && isLandscape ? {width: width - 32, marginLeft: ViewTypes.IOS_HORIZONTAL_LANDSCAPE + 16} : {width};
+
+        const unreadTextStyles = DeviceTypes.IS_IPHONE_X && isLandscape ? {marginLeft: -44} : null;
+
         return (
             <View
                 style={styles.container}
@@ -445,7 +452,8 @@ export default class List extends PureComponent {
                 {showIndicator &&
                 <UnreadIndicator
                     show={showIndicator}
-                    style={[styles.above, {width}]}
+                    style={[styles.above, unreadBarStyles]}
+                    textStyle={unreadTextStyles}
                     onPress={this.scrollToTop}
                     theme={theme}
                 />
diff --git a/app/components/sidebars/main/channels_list/unread_indicator/index.js b/app/components/sidebars/main/channels_list/unread_indicator/index.js
index 1e761f704..787ab9bf5 100644
--- a/app/components/sidebars/main/channels_list/unread_indicator/index.js
+++ b/app/components/sidebars/main/channels_list/unread_indicator/index.js
@@ -19,6 +19,7 @@ export default class UnreadIndicator extends PureComponent {
         style: ViewPropTypes.style,
         onPress: PropTypes.func,
         theme: PropTypes.object.isRequired,
+        textStyle: ViewPropTypes.style,
     };
 
     static defaultProps = {
@@ -40,7 +41,7 @@ export default class UnreadIndicator extends PureComponent {
                     style={[style.container, this.props.style]}
                 >
                     <FormattedText
-                        style={style.indicatorText}
+                        style={[style.indicatorText, this.props.textStyle]}
                         id='sidebar.unreads'
                         defaultMessage='More unreads'
                     />
@@ -64,7 +65,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             flexDirection: 'row',
             position: 'absolute',
             borderRadius: 15,
-            marginHorizontal: 15,
+            marginHorizontal: 25,
             height: 25,
         },
         indicatorText: {
diff --git a/app/components/sidebars/main/teams_list/teams_list_item/index.js b/app/components/sidebars/main/teams_list/teams_list_item/index.js
index 961f0fbdd..611d4a533 100644
--- a/app/components/sidebars/main/teams_list/teams_list_item/index.js
+++ b/app/components/sidebars/main/teams_list/teams_list_item/index.js
@@ -6,6 +6,8 @@ import {connect} from 'react-redux';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getCurrentTeamId, getTeam, makeGetBadgeCountForTeamId} from 'mattermost-redux/selectors/entities/teams';
 
+import {isLandscape} from 'app/selectors/device';
+
 import TeamsListItem from './teams_list_item.js';
 
 function makeMapStateToProps() {
@@ -20,6 +22,7 @@ function makeMapStateToProps() {
             mentionCount: getMentionCount(state, ownProps.teamId),
             name: team.name,
             theme: getTheme(state),
+            isLandscape: isLandscape(state),
         };
     };
 }
diff --git a/app/components/sidebars/main/teams_list/teams_list_item/teams_list_item.js b/app/components/sidebars/main/teams_list/teams_list_item/teams_list_item.js
index 7978cfd76..e8e04c015 100644
--- a/app/components/sidebars/main/teams_list/teams_list_item/teams_list_item.js
+++ b/app/components/sidebars/main/teams_list/teams_list_item/teams_list_item.js
@@ -12,7 +12,7 @@ import IonIcon from 'react-native-vector-icons/Ionicons';
 
 import Badge from 'app/components/badge';
 import TeamIcon from 'app/components/team_icon';
-
+import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
@@ -26,6 +26,7 @@ export default class TeamsListItem extends React.PureComponent {
         selectTeam: PropTypes.func.isRequired,
         teamId: PropTypes.string.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     selectTeam = preventDoubleTap(() => {
@@ -41,6 +42,7 @@ export default class TeamsListItem extends React.PureComponent {
             name,
             teamId,
             theme,
+            isLandscape,
         } = this.props;
         const styles = getStyleSheet(theme);
 
@@ -70,7 +72,7 @@ export default class TeamsListItem extends React.PureComponent {
                     underlayColor={changeOpacity(theme.sidebarTextHoverBg, 0.5)}
                     onPress={this.selectTeam}
                 >
-                    <View style={styles.teamContainer}>
+                    <View style={[styles.teamContainer, padding(isLandscape)]}>
                         <TeamIcon
                             teamId={teamId}
                             styleContainer={styles.teamIconContainer}
diff --git a/app/components/swiper.js b/app/components/swiper.js
index d35d93747..903cc9def 100644
--- a/app/components/swiper.js
+++ b/app/components/swiper.js
@@ -12,7 +12,7 @@ import {
     View,
 } from 'react-native';
 
-import {DeviceTypes} from 'app/constants';
+import {DeviceTypes, ViewTypes} from 'app/constants';
 import mattermostManaged from 'app/mattermost_managed';
 
 export default class Swiper extends PureComponent {
@@ -169,11 +169,12 @@ export default class Swiper extends PureComponent {
 
         const {width, height} = Dimensions.get('window');
         const bottom = this.paginationBottom(width, height);
+        const drawerWidth = (width > height) ? width - ViewTypes.IOS_HORIZONTAL_LANDSCAPE : width;
         let style;
         if (DeviceTypes.IS_IPHONE_X) {
             style = {
                 bottom,
-                width,
+                drawerWidth,
             };
         } else {
             style = {
diff --git a/app/components/widgets/settings/text_setting.js b/app/components/widgets/settings/text_setting.js
index 772382083..10df31e04 100644
--- a/app/components/widgets/settings/text_setting.js
+++ b/app/components/widgets/settings/text_setting.js
@@ -12,6 +12,7 @@ import {
 
 import FormattedText from 'app/components/formatted_text';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 export default class TextSetting extends PureComponent {
     static propTypes = {
@@ -35,6 +36,7 @@ export default class TextSetting extends PureComponent {
         value: PropTypes.string.isRequired,
         multiline: PropTypes.bool,
         showRequiredAsterisk: PropTypes.bool,
+        isLandscape: PropTypes.bool.isRequired,
         keyboardType: PropTypes.oneOf([
             'default',
             'number-pad',
@@ -53,6 +55,7 @@ export default class TextSetting extends PureComponent {
         multiline: false,
         showRequiredAsterisk: false,
         keyboardType: 'default',
+        isLandscape: false,
         secureTextEntry: false,
     };
 
@@ -74,6 +77,7 @@ export default class TextSetting extends PureComponent {
             value,
             multiline,
             showRequiredAsterisk,
+            isLandscape,
             secureTextEntry,
         } = this.props;
         const style = getStyleSheet(theme);
@@ -142,15 +146,17 @@ export default class TextSetting extends PureComponent {
             );
         }
 
+        const noediting = disabled ? style.disabled : null;
+
         return (
             <View>
-                <View style={style.titleContainer}>
+                <View style={[style.titleContainer, padding(isLandscape)]}>
                     {labelContent}
                     {asterisk}
                     {optionalContent}
                 </View>
-                <View style={style.inputContainer}>
-                    <View style={disabled ? style.disabled : null}>
+                <View style={[style.inputContainer, padding(isLandscape), noediting]}>
+                    <View>
                         <TextInput
                             value={value}
                             placeholder={placeholder}
@@ -169,9 +175,11 @@ export default class TextSetting extends PureComponent {
                         />
                     </View>
                 </View>
-                {disabledTextContent}
-                {helpTextContent}
-                {errorTextContent}
+                <View style={padding(isLandscape)}>
+                    {disabledTextContent}
+                    {helpTextContent}
+                    {errorTextContent}
+                </View>
             </View>
         );
     }
diff --git a/app/constants/view.js b/app/constants/view.js
index 0f50aa7f9..730d69923 100644
--- a/app/constants/view.js
+++ b/app/constants/view.js
@@ -107,7 +107,7 @@ export default {
     MAX_CHANNELNAME_LENGTH: 22,
     ANDROID_TOP_LANDSCAPE: 46,
     ANDROID_TOP_PORTRAIT: 56,
-    IOS_TOP_LANDSCAPE: 32,
+    IOS_TOP_LANDSCAPE: 40,
     IOS_TOP_PORTRAIT: 64,
     IOSX_TOP_PORTRAIT: 88,
     STATUS_BAR_HEIGHT: 20,
@@ -117,4 +117,5 @@ export default {
     DATA_SOURCE_CHANNELS: 'channels',
     NotificationLevels,
     SidebarSectionTypes,
+    IOS_HORIZONTAL_LANDSCAPE: 44,
 };
diff --git a/app/screens/about/about.js b/app/screens/about/about.js
index 2417768c1..dc5f96efa 100644
--- a/app/screens/about/about.js
+++ b/app/screens/about/about.js
@@ -15,7 +15,7 @@ import DeviceInfo from 'react-native-device-info';
 import FormattedText from 'app/components/formatted_text';
 import StatusBar from 'app/components/status_bar';
 import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import AppIcon from 'app/components/app_icon';
 import Config from 'assets/config';
 
@@ -27,6 +27,7 @@ export default class About extends PureComponent {
         config: PropTypes.object.isRequired,
         license: PropTypes.object.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     componentWillReceiveProps(nextProps) {
@@ -60,7 +61,7 @@ export default class About extends PureComponent {
     }
 
     render() {
-        const {theme, config, license} = this.props;
+        const {theme, config, license, isLandscape} = this.props;
         const style = getStyleSheet(theme);
 
         let title = (
@@ -218,7 +219,7 @@ export default class About extends PureComponent {
             <View style={style.wrapper}>
                 <StatusBar/>
                 <ScrollView
-                    style={style.scrollView}
+                    style={[style.scrollView, padding(isLandscape)]}
                     contentContainerStyle={style.scrollViewContent}
                 >
                     <View style={style.logoContainer}>
diff --git a/app/screens/about/index.js b/app/screens/about/index.js
index 7a35177d9..f2a3b69ff 100644
--- a/app/screens/about/index.js
+++ b/app/screens/about/index.js
@@ -5,6 +5,7 @@ import {connect} from 'react-redux';
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
+import {isLandscape} from 'app/selectors/device';
 
 import About from './about';
 
@@ -16,6 +17,7 @@ function mapStateToProps(state) {
         config,
         license,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/channel/channel.ios.js b/app/screens/channel/channel.ios.js
index 5e9189102..9d1c87543 100644
--- a/app/screens/channel/channel.ios.js
+++ b/app/screens/channel/channel.ios.js
@@ -38,6 +38,7 @@ export default class ChannelIOS extends ChannelBase {
         const {height} = Dimensions.get('window');
         const {
             currentChannelId,
+            isLandscape,
         } = this.props;
 
         const channelLoaderStyle = [style.channelLoader, {height}];
@@ -45,8 +46,40 @@ export default class ChannelIOS extends ChannelBase {
             channelLoaderStyle.push(style.iOSHomeIndicator);
         }
 
-        const drawerContent = (
-            <React.Fragment>
+        let safeViewContent;
+        if (DeviceTypes.IS_IPHONE_X && isLandscape) {
+            safeViewContent = (
+                <React.Fragment>
+                    <StatusBar/>
+                    <NetworkIndicator/>
+                    <ChannelNavBar
+                        openChannelDrawer={this.openChannelSidebar}
+                        openSettingsDrawer={this.openSettingsSidebar}
+                        onPress={this.goToChannelInfo}
+                    />
+                    <SafeAreaView>
+                        <ChannelPostList
+                            updateNativeScrollView={this.updateNativeScrollView}
+                        />
+                        <View nativeID={ACCESSORIES_CONTAINER_NATIVE_ID}>
+                            <FileUploadPreview/>
+                            <Autocomplete
+                                maxHeight={AUTOCOMPLETE_MAX_HEIGHT}
+                                onChangeText={this.handleAutoComplete}
+                                cursorPositionEvent={CHANNEL_POST_TEXTBOX_CURSOR_CHANGE}
+                                valueEvent={CHANNEL_POST_TEXTBOX_VALUE_CHANGE}
+                            />
+                        </View>
+                        <ChannelLoader
+                            height={height}
+                            style={channelLoaderStyle}
+                        />
+                        {LocalConfig.EnableMobileClientUpgrade && <ClientUpgradeListener/>}
+                    </SafeAreaView>
+                </React.Fragment>
+            );
+        } else {
+            safeViewContent = (
                 <SafeAreaView>
                     <StatusBar/>
                     <NetworkIndicator/>
@@ -73,6 +106,12 @@ export default class ChannelIOS extends ChannelBase {
                     />
                     {LocalConfig.EnableMobileClientUpgrade && <ClientUpgradeListener/>}
                 </SafeAreaView>
+            );
+        }
+
+        const drawerContent = (
+            <React.Fragment>
+                {safeViewContent}
                 <KeyboardTrackingView
                     ref={this.keyboardTracker}
                     scrollViewNativeID={currentChannelId}
diff --git a/app/screens/channel/channel_nav_bar/__snapshots__/channel_nav_bar.test.js.snap b/app/screens/channel/channel_nav_bar/__snapshots__/channel_nav_bar.test.js.snap
index 65f503959..7db69c304 100644
--- a/app/screens/channel/channel_nav_bar/__snapshots__/channel_nav_bar.test.js.snap
+++ b/app/screens/channel/channel_nav_bar/__snapshots__/channel_nav_bar.test.js.snap
@@ -11,9 +11,7 @@ exports[`ChannelNavBar should match, full snapshot 1`] = `
         "width": "100%",
         "zIndex": 10,
       },
-      Object {
-        "paddingHorizontal": 0,
-      },
+      null,
       Object {
         "height": 44,
       },
diff --git a/app/screens/channel/channel_nav_bar/channel_nav_bar.js b/app/screens/channel/channel_nav_bar/channel_nav_bar.js
index a8db7f6b7..9949e6573 100644
--- a/app/screens/channel/channel_nav_bar/channel_nav_bar.js
+++ b/app/screens/channel/channel_nav_bar/channel_nav_bar.js
@@ -16,6 +16,7 @@ import ChannelDrawerButton from './channel_drawer_button';
 import ChannelSearchButton from './channel_search_button';
 import ChannelTitle from './channel_title';
 import SettingDrawerButton from './settings_drawer_button';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 const {
     ANDROID_TOP_LANDSCAPE,
@@ -73,7 +74,6 @@ export default class ChannelNavBar extends PureComponent {
         const {isLandscape, onPress, theme} = this.props;
         const {openChannelDrawer, openSettingsDrawer} = this.props;
         const style = getStyleFromTheme(theme);
-        const padding = {paddingHorizontal: 0};
 
         let height;
         let canHaveSubtitle = true;
@@ -94,7 +94,6 @@ export default class ChannelNavBar extends PureComponent {
             }
 
             if (DeviceTypes.IS_IPHONE_X && isLandscape) {
-                padding.paddingHorizontal = 10;
                 canHaveSubtitle = false;
             }
             break;
@@ -106,7 +105,7 @@ export default class ChannelNavBar extends PureComponent {
         }
 
         return (
-            <View style={[style.header, padding, {height}]}>
+            <View style={[style.header, padding(isLandscape), {height}]}>
                 <ChannelDrawerButton
                     openDrawer={openChannelDrawer}
                     visible={drawerButtonVisible}
diff --git a/app/screens/channel/channel_post_list/index.js b/app/screens/channel/channel_post_list/index.js
index dd5cd8368..1f1d27ceb 100644
--- a/app/screens/channel/channel_post_list/index.js
+++ b/app/screens/channel/channel_post_list/index.js
@@ -13,6 +13,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {goToScreen} from 'app/actions/navigation';
 import {loadPostsIfNecessaryWithRetry, loadThreadIfNecessary, increasePostVisibility, refreshChannelWithRetry} from 'app/actions/views/channel';
 import {recordLoadTime} from 'app/actions/views/root';
+import {isLandscape} from 'app/selectors/device';
 
 import ChannelPostList from './channel_post_list';
 
@@ -31,6 +32,7 @@ function mapStateToProps(state) {
         loadMorePostsVisible: state.views.channel.loadMorePostsVisible,
         refreshing: state.views.channel.refreshing,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/channel_add_members/channel_add_members.js b/app/screens/channel_add_members/channel_add_members.js
index 95eb6010a..322b8d455 100644
--- a/app/screens/channel_add_members/channel_add_members.js
+++ b/app/screens/channel_add_members/channel_add_members.js
@@ -14,7 +14,7 @@ import {Navigation} from 'react-native-navigation';
 import {debounce} from 'mattermost-redux/actions/helpers';
 import {General} from 'mattermost-redux/constants';
 import {filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import Loading from 'app/components/loading';
 import CustomList, {FLATLIST, SECTIONLIST} from 'app/components/custom_list';
 import UserListRow from 'app/components/custom_list/user_list_row';
@@ -43,6 +43,7 @@ export default class ChannelAddMembers extends PureComponent {
         currentUserId: PropTypes.string.isRequired,
         profilesNotInChannel: PropTypes.array.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -278,7 +279,7 @@ export default class ChannelAddMembers extends PureComponent {
 
     render() {
         const {formatMessage} = this.context.intl;
-        const {currentUserId, profilesNotInChannel, theme} = this.props;
+        const {currentUserId, profilesNotInChannel, theme, isLandscape} = this.props;
         const {
             adding,
             loading,
@@ -334,7 +335,7 @@ export default class ChannelAddMembers extends PureComponent {
         return (
             <KeyboardLayout>
                 <StatusBar/>
-                <View style={style.searchBar}>
+                <View style={[style.searchBar, padding(isLandscape)]}>
                     <SearchBar
                         ref='search_bar'
                         placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
@@ -365,6 +366,7 @@ export default class ChannelAddMembers extends PureComponent {
                     onRowPress={this.handleSelectProfile}
                     renderItem={this.renderItem}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
             </KeyboardLayout>
         );
diff --git a/app/screens/channel_add_members/channel_add_members.test.js b/app/screens/channel_add_members/channel_add_members.test.js
index 0684d5685..c5df7b106 100644
--- a/app/screens/channel_add_members/channel_add_members.test.js
+++ b/app/screens/channel_add_members/channel_add_members.test.js
@@ -25,6 +25,7 @@ describe('ChannelAddMembers', () => {
         profilesNotInChannel: [],
         theme: Preferences.THEMES.default,
         componentId: 'component-id',
+        isLandscape: false,
     };
 
     test('should render without error and call functions on mount', () => {
diff --git a/app/screens/channel_add_members/index.js b/app/screens/channel_add_members/index.js
index c2efa8625..431db3cea 100644
--- a/app/screens/channel_add_members/index.js
+++ b/app/screens/channel_add_members/index.js
@@ -13,7 +13,7 @@ import {getCurrentUserId, getProfilesNotInCurrentChannel} from 'mattermost-redux
 
 import {setButtons, popTopScreen} from 'app/actions/navigation';
 import {handleAddChannelMembers} from 'app/actions/views/channel_add_members';
-
+import {isLandscape} from 'app/selectors/device';
 import ChannelAddMembers from './channel_add_members';
 
 function mapStateToProps(state) {
@@ -26,6 +26,7 @@ function mapStateToProps(state) {
         currentUserId: getCurrentUserId(state),
         profilesNotInChannel: getProfilesNotInCurrentChannel(state),
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/channel_info/channel_info.js b/app/screens/channel_info/channel_info.js
index 027661a2c..d023aa688 100644
--- a/app/screens/channel_info/channel_info.js
+++ b/app/screens/channel_info/channel_info.js
@@ -65,6 +65,7 @@ export default class ChannelInfo extends PureComponent {
         canEditChannel: PropTypes.bool.isRequired,
         ignoreChannelMentions: PropTypes.bool.isRequired,
         isBot: PropTypes.bool.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -362,6 +363,7 @@ export default class ChannelInfo extends PureComponent {
             canEditChannel,
             theme,
             currentChannel,
+            isLandscape,
         } = this.props;
 
         if (channelIsArchived) {
@@ -374,6 +376,7 @@ export default class ChannelInfo extends PureComponent {
                         icon='users'
                         textId={canManageUsers ? t('channel_header.manageMembers') : t('channel_header.viewMembers')}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     <View style={style.separator}/>
                 </View>);
@@ -389,6 +392,7 @@ export default class ChannelInfo extends PureComponent {
                     textId={t('mobile.routes.channelInfo.favorite')}
                     togglable={true}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 <View style={style.separator}/>
                 <ChannelInfoRow
@@ -399,6 +403,7 @@ export default class ChannelInfo extends PureComponent {
                     textId={t('channel_notifications.muteChannel.settings')}
                     togglable={true}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 <View style={style.separator}/>
                 <ChannelInfoRow
@@ -409,6 +414,7 @@ export default class ChannelInfo extends PureComponent {
                     textId={t('channel_notifications.ignoreChannelMentions.settings')}
                     togglable={true}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 <View style={style.separator}/>
                 <ChannelInfoRow
@@ -417,6 +423,7 @@ export default class ChannelInfo extends PureComponent {
                     image={pinIcon}
                     textId={t('channel_header.pinnedPosts')}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 {
 
@@ -441,6 +448,7 @@ export default class ChannelInfo extends PureComponent {
                         icon='users'
                         textId={canManageUsers ? t('channel_header.manageMembers') : t('channel_header.viewMembers')}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                 </React.Fragment>
                 }
@@ -453,6 +461,7 @@ export default class ChannelInfo extends PureComponent {
                         icon='user-plus'
                         textId={t('channel_header.addMembers')}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                 </React.Fragment>
                 }
@@ -465,6 +474,7 @@ export default class ChannelInfo extends PureComponent {
                             icon='edit'
                             textId={t('mobile.channel_info.edit')}
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
                     </React.Fragment>
                 )}
@@ -482,6 +492,7 @@ export default class ChannelInfo extends PureComponent {
             status,
             theme,
             isBot,
+            isLandscape,
         } = this.props;
 
         const style = getStyleSheet(theme);
@@ -535,12 +546,13 @@ export default class ChannelInfo extends PureComponent {
                                 icon='sign-out'
                                 textId={t('navbar.leave')}
                                 theme={theme}
+                                isLandscape={isLandscape}
                             />
                         </React.Fragment>
                         }
                     </View>
                     {this.renderLeaveOrDeleteChannelRow() && canDeleteChannel && !channelIsArchived &&
-                    <View style={style.footer}>
+                    <View style={[style.rowsContainer, style.footer]}>
                         <ChannelInfoRow
                             action={this.handleDelete}
                             defaultMessage='Archive Channel'
@@ -549,11 +561,12 @@ export default class ChannelInfo extends PureComponent {
                             textId={t('mobile.routes.channelInfo.delete_channel')}
                             textColor='#CA3B27'
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
                     </View>
                     }
                     {this.renderCloseDirect() &&
-                    <View style={style.footer}>
+                    <View style={[style.rowsContainer, style.footer]}>
                         <ChannelInfoRow
                             action={this.handleClose}
                             defaultMessage={defaultMessage}
@@ -562,6 +575,7 @@ export default class ChannelInfo extends PureComponent {
                             textId={i18nId}
                             textColor='#CA3B27'
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
                     </View>
                     }
diff --git a/app/screens/channel_info/channel_info_header.js b/app/screens/channel_info/channel_info_header.js
index d24921c9f..44831040c 100644
--- a/app/screens/channel_info/channel_info_header.js
+++ b/app/screens/channel_info/channel_info_header.js
@@ -9,6 +9,7 @@ import {
     Text,
     TouchableHighlight,
     View,
+    SafeAreaView,
 } from 'react-native';
 import {intlShape} from 'react-intl';
 
@@ -142,99 +143,101 @@ export default class ChannelInfoHeader extends React.PureComponent {
             style.detail;
 
         return (
-            <View style={style.container}>
-                <View style={[style.channelNameContainer, style.row]}>
-                    <ChannelIcon
-                        isInfo={true}
-                        membersCount={memberCount - 1}
-                        size={16}
-                        status={status}
-                        theme={theme}
-                        type={type}
-                        isArchived={isArchived}
-                        isBot={isBot}
-                    />
-                    <Text
-                        ellipsizeMode='tail'
-                        numberOfLines={1}
-                        style={style.channelName}
-                    >
-                        {displayName}
-                    </Text>
+            <SafeAreaView style={style.safeAreaView}>
+                <View style={style.container}>
+                    <View style={[style.channelNameContainer, style.row]}>
+                        <ChannelIcon
+                            isInfo={true}
+                            membersCount={memberCount - 1}
+                            size={16}
+                            status={status}
+                            theme={theme}
+                            type={type}
+                            isArchived={isArchived}
+                            isBot={isBot}
+                        />
+                        <Text
+                            ellipsizeMode='tail'
+                            numberOfLines={1}
+                            style={style.channelName}
+                        >
+                            {displayName}
+                        </Text>
+                    </View>
+                    {this.renderHasGuestText(style)}
+                    {purpose.length > 0 &&
+                        <View style={style.section}>
+                            <TouchableHighlight
+                                underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}
+                                onLongPress={this.handlePurposeLongPress}
+                            >
+                                <View style={style.row}>
+                                    <FormattedText
+                                        style={style.header}
+                                        id='channel_info.purpose'
+                                        defaultMessage='Purpose'
+                                    />
+                                    <Markdown
+                                        onPermalinkPress={onPermalinkPress}
+                                        baseTextStyle={baseTextStyle}
+                                        textStyles={textStyles}
+                                        blockStyles={blockStyles}
+                                        value={purpose}
+                                    />
+                                </View>
+                            </TouchableHighlight>
+                        </View>
+                    }
+                    {header.length > 0 &&
+                        <View style={style.section}>
+                            <TouchableHighlight
+                                underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}
+                                onLongPress={this.handleHeaderLongPress}
+                            >
+                                <View style={style.row}>
+                                    <FormattedText
+                                        style={style.header}
+                                        id='channel_info.header'
+                                        defaultMessage='Header'
+                                    />
+                                    <Markdown
+                                        onPermalinkPress={onPermalinkPress}
+                                        baseTextStyle={baseTextStyle}
+                                        textStyles={textStyles}
+                                        blockStyles={blockStyles}
+                                        value={header}
+                                    />
+                                </View>
+                            </TouchableHighlight>
+                        </View>
+                    }
+                    {isGroupConstrained &&
+                        <Text style={[style.createdBy, style.row]}>
+                            <FormattedText
+                                id='mobile.routes.channelInfo.groupManaged'
+                                defaultMessage='Members are managed by linked groups'
+                            />
+                        </Text>
+                    }
+                    {creator &&
+                        <Text style={[style.createdBy, style.row]}>
+                            <FormattedText
+                                id='mobile.routes.channelInfo.createdBy'
+                                defaultMessage='Created by {creator} on '
+                                values={{
+                                    creator,
+                                }}
+                            />
+                            <FormattedDate
+                                value={new Date(createAt)}
+                                year='numeric'
+                                month='long'
+                                day='2-digit'
+                            />
+                        </Text>
+                    }
                 </View>
-                {this.renderHasGuestText(style)}
-                {purpose.length > 0 &&
-                    <View style={style.section}>
-                        <TouchableHighlight
-                            underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}
-                            onLongPress={this.handlePurposeLongPress}
-                        >
-                            <View style={style.row}>
-                                <FormattedText
-                                    style={style.header}
-                                    id='channel_info.purpose'
-                                    defaultMessage='Purpose'
-                                />
-                                <Markdown
-                                    onPermalinkPress={onPermalinkPress}
-                                    baseTextStyle={baseTextStyle}
-                                    textStyles={textStyles}
-                                    blockStyles={blockStyles}
-                                    value={purpose}
-                                />
-                            </View>
-                        </TouchableHighlight>
-                    </View>
-                }
-                {header.length > 0 &&
-                    <View style={style.section}>
-                        <TouchableHighlight
-                            underlayColor={changeOpacity(theme.centerChannelColor, 0.1)}
-                            onLongPress={this.handleHeaderLongPress}
-                        >
-                            <View style={style.row}>
-                                <FormattedText
-                                    style={style.header}
-                                    id='channel_info.header'
-                                    defaultMessage='Header'
-                                />
-                                <Markdown
-                                    onPermalinkPress={onPermalinkPress}
-                                    baseTextStyle={baseTextStyle}
-                                    textStyles={textStyles}
-                                    blockStyles={blockStyles}
-                                    value={header}
-                                />
-                            </View>
-                        </TouchableHighlight>
-                    </View>
-                }
-                {isGroupConstrained &&
-                    <Text style={[style.createdBy, style.row]}>
-                        <FormattedText
-                            id='mobile.routes.channelInfo.groupManaged'
-                            defaultMessage='Members are managed by linked groups'
-                        />
-                    </Text>
-                }
-                {creator &&
-                    <Text style={[style.createdBy, style.row]}>
-                        <FormattedText
-                            id='mobile.routes.channelInfo.createdBy'
-                            defaultMessage='Created by {creator} on '
-                            values={{
-                                creator,
-                            }}
-                        />
-                        <FormattedDate
-                            value={new Date(createAt)}
-                            year='numeric'
-                            month='long'
-                            day='2-digit'
-                        />
-                    </Text>
-                }
-            </View>
+            </SafeAreaView>
         );
     }
 }
@@ -282,5 +285,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         row: {
             paddingHorizontal: 15,
         },
+        safeAreaView: {
+            backgroundColor: 'white',
+        },
     };
 });
diff --git a/app/screens/channel_info/channel_info_row.js b/app/screens/channel_info/channel_info_row.js
index a8c59fc23..06657859f 100644
--- a/app/screens/channel_info/channel_info_row.js
+++ b/app/screens/channel_info/channel_info_row.js
@@ -14,6 +14,7 @@ import Icon from 'react-native-vector-icons/FontAwesome';
 
 import FormattedText from 'app/components/formatted_text';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 function createTouchableComponent(children, action) {
     return (
@@ -24,7 +25,7 @@ function createTouchableComponent(children, action) {
 }
 
 function channelInfoRow(props) {
-    const {action, defaultMessage, detail, icon, iconColor, image, imageTintColor, textColor, textId, togglable, theme, shouldRender} = props;
+    const {action, defaultMessage, detail, icon, iconColor, image, imageTintColor, textColor, textId, togglable, theme, shouldRender, isLandscape} = props;
 
     if (!shouldRender) {
         return null;
@@ -52,7 +53,7 @@ function channelInfoRow(props) {
     }
 
     const RowComponent = (
-        <View style={style.container}>
+        <View style={[style.container, padding(isLandscape)]}>
             {iconElement}
             <FormattedText
                 style={[style.label, {color: textColor || theme.centerChannelColor}]}
diff --git a/app/screens/channel_info/index.js b/app/screens/channel_info/index.js
index 3b87f5a42..f849083b6 100644
--- a/app/screens/channel_info/index.js
+++ b/app/screens/channel_info/index.js
@@ -46,7 +46,7 @@ import {
     selectPenultimateChannel,
     setChannelDisplayName,
 } from 'app/actions/views/channel';
-
+import {isLandscape} from 'app/selectors/device';
 import ChannelInfo from './channel_info';
 
 function mapStateToProps(state) {
@@ -111,6 +111,7 @@ function mapStateToProps(state) {
         theme: getTheme(state),
         canManageUsers,
         isBot,
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/channel_members/__snapshots__/channel_members.test.js.snap b/app/screens/channel_members/__snapshots__/channel_members.test.js.snap
index 638fd1a58..da88b8c49 100644
--- a/app/screens/channel_members/__snapshots__/channel_members.test.js.snap
+++ b/app/screens/channel_members/__snapshots__/channel_members.test.js.snap
@@ -5,9 +5,12 @@ exports[`ChannelMembers should match snapshot 1`] = `
   <Connect(StatusBar) />
   <View
     style={
-      Object {
-        "marginVertical": 5,
-      }
+      Array [
+        Object {
+          "marginVertical": 5,
+        },
+        null,
+      ]
     }
   >
     <SearchBarIos
@@ -43,6 +46,7 @@ exports[`ChannelMembers should match snapshot 1`] = `
   <CustomList
     data={Array []}
     extraData={Object {}}
+    isLandscape={false}
     listType="section"
     loading={false}
     loadingComponent={null}
diff --git a/app/screens/channel_members/channel_members.js b/app/screens/channel_members/channel_members.js
index 9bb29b8da..5bab21a1c 100644
--- a/app/screens/channel_members/channel_members.js
+++ b/app/screens/channel_members/channel_members.js
@@ -14,7 +14,7 @@ import {Navigation} from 'react-native-navigation';
 import {debounce} from 'mattermost-redux/actions/helpers';
 import {General} from 'mattermost-redux/constants';
 import {filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import Loading from 'app/components/loading';
 import CustomList, {FLATLIST, SECTIONLIST} from 'app/components/custom_list';
 import UserListRow from 'app/components/custom_list/user_list_row';
@@ -41,6 +41,7 @@ export default class ChannelMembers extends PureComponent {
         currentChannelMembers: PropTypes.array,
         currentUserId: PropTypes.string.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -279,7 +280,7 @@ export default class ChannelMembers extends PureComponent {
 
     renderNoResults = () => {
         const {loading} = this.state;
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
         const style = getStyleFromTheme(theme);
 
         if (loading || this.page === -1) {
@@ -287,7 +288,7 @@ export default class ChannelMembers extends PureComponent {
         }
 
         return (
-            <View style={style.noResultContainer}>
+            <View style={[style.noResultContainer, padding(isLandscape)]}>
                 <FormattedText
                     id='mobile.custom_list.no_results'
                     defaultMessage='No Results'
@@ -309,7 +310,7 @@ export default class ChannelMembers extends PureComponent {
 
     render() {
         const {formatMessage} = this.context.intl;
-        const {theme, canManageUsers} = this.props;
+        const {theme, canManageUsers, isLandscape} = this.props;
         const {
             removing,
             loading,
@@ -362,7 +363,7 @@ export default class ChannelMembers extends PureComponent {
         return (
             <KeyboardLayout>
                 <StatusBar/>
-                <View style={style.searchBar}>
+                <View style={[style.searchBar, padding(isLandscape)]}>
                     <SearchBar
                         ref='search_bar'
                         placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
@@ -393,6 +394,7 @@ export default class ChannelMembers extends PureComponent {
                     onRowPress={this.handleSelectProfile}
                     renderItem={canManageUsers ? this.renderSelectableItem : this.renderUnselectableItem}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
             </KeyboardLayout>
         );
diff --git a/app/screens/channel_members/channel_members.test.js b/app/screens/channel_members/channel_members.test.js
index 4ad691310..1c4aa2e29 100644
--- a/app/screens/channel_members/channel_members.test.js
+++ b/app/screens/channel_members/channel_members.test.js
@@ -23,6 +23,7 @@ describe('ChannelMembers', () => {
             popTopScreen: jest.fn(),
         },
         componentId: 'component-id',
+        isLandscape: false,
     };
 
     test('should match snapshot', () => {
diff --git a/app/screens/channel_members/index.js b/app/screens/channel_members/index.js
index 5c6b54f50..06d383feb 100644
--- a/app/screens/channel_members/index.js
+++ b/app/screens/channel_members/index.js
@@ -11,7 +11,7 @@ import {getProfilesInChannel, searchProfiles} from 'mattermost-redux/actions/use
 
 import {setButtons, popTopScreen} from 'app/actions/navigation';
 import {handleRemoveChannelMembers} from 'app/actions/views/channel_members';
-
+import {isLandscape} from 'app/selectors/device';
 import ChannelMembers from './channel_members';
 
 function makeMapStateToProps() {
@@ -32,6 +32,7 @@ function makeMapStateToProps() {
             currentChannelMembers,
             currentUserId: state.entities.users.currentUserId,
             theme: getTheme(state),
+            isLandscape: isLandscape(state),
         };
     };
 }
diff --git a/app/screens/edit_channel/edit_channel.js b/app/screens/edit_channel/edit_channel.js
index d3f70a24a..a38b0090a 100644
--- a/app/screens/edit_channel/edit_channel.js
+++ b/app/screens/edit_channel/edit_channel.js
@@ -9,7 +9,7 @@ import {
     InteractionManager,
 } from 'react-native';
 import {Navigation} from 'react-native-navigation';
-
+import SafeAreaView from 'app/components/safe_area_view';
 import {General, RequestStatus} from 'mattermost-redux/constants';
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
 
@@ -295,29 +295,31 @@ export default class EditChannel extends PureComponent {
         } = this.state;
 
         return (
-            <EditChannelInfo
-                theme={theme}
-                enableRightButton={this.emitCanUpdateChannel}
-                error={error}
-                saving={updating}
-                channelType={type}
-                currentTeamUrl={currentTeamUrl}
-                onDisplayNameChange={this.onDisplayNameChange}
-                onChannelURLChange={this.onChannelURLChange}
-                onPurposeChange={this.onPurposeChange}
-                onHeaderChange={this.onHeaderChange}
-                displayName={displayName}
-                channelURL={channelURL}
-                header={header}
-                purpose={purpose}
-                editing={true}
-                oldDisplayName={oldDisplayName}
-                oldChannelURL={oldChannelURL}
-                oldPurpose={oldPurpose}
-                oldHeader={oldHeader}
-                deviceWidth={deviceWidth}
-                deviceHeight={deviceHeight}
-            />
+            <SafeAreaView>
+                <EditChannelInfo
+                    theme={theme}
+                    enableRightButton={this.emitCanUpdateChannel}
+                    error={error}
+                    saving={updating}
+                    channelType={type}
+                    currentTeamUrl={currentTeamUrl}
+                    onDisplayNameChange={this.onDisplayNameChange}
+                    onChannelURLChange={this.onChannelURLChange}
+                    onPurposeChange={this.onPurposeChange}
+                    onHeaderChange={this.onHeaderChange}
+                    displayName={displayName}
+                    channelURL={channelURL}
+                    header={header}
+                    purpose={purpose}
+                    editing={true}
+                    oldDisplayName={oldDisplayName}
+                    oldChannelURL={oldChannelURL}
+                    oldPurpose={oldPurpose}
+                    oldHeader={oldHeader}
+                    deviceWidth={deviceWidth}
+                    deviceHeight={deviceHeight}
+                />
+            </SafeAreaView>
         );
     }
 }
diff --git a/app/screens/edit_post/edit_post.js b/app/screens/edit_post/edit_post.js
index 741a94776..871814904 100644
--- a/app/screens/edit_post/edit_post.js
+++ b/app/screens/edit_post/edit_post.js
@@ -15,6 +15,7 @@ import StatusBar from 'app/components/status_bar';
 import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder';
 import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
 import {t} from 'app/utils/i18n';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 import {RequestStatus} from 'mattermost-redux/constants';
 
@@ -32,6 +33,7 @@ export default class EditPost extends PureComponent {
         editPostRequest: PropTypes.object.isRequired,
         post: PropTypes.object.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -146,7 +148,7 @@ export default class EditPost extends PureComponent {
     };
 
     render() {
-        const {deviceHeight, deviceWidth, theme} = this.props;
+        const {deviceHeight, deviceWidth, theme, isLandscape} = this.props;
         const {editing, message, error} = this.state;
 
         const style = getStyleSheet(theme);
@@ -178,7 +180,7 @@ export default class EditPost extends PureComponent {
                 <StatusBar/>
                 <View style={style.scrollView}>
                     {displayError}
-                    <View style={[style.inputContainer, {height}]}>
+                    <View style={[style.inputContainer, padding(isLandscape), {height}]}>
                         <TextInputWithLocalizedPlaceholder
                             ref={this.messageRef}
                             value={message}
diff --git a/app/screens/edit_post/index.js b/app/screens/edit_post/index.js
index 435fb3741..7a14d69e0 100644
--- a/app/screens/edit_post/index.js
+++ b/app/screens/edit_post/index.js
@@ -9,7 +9,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 import {setButtons, dismissModal} from 'app/actions/navigation';
 
-import {getDimensions} from 'app/selectors/device';
+import {getDimensions, isLandscape} from 'app/selectors/device';
 
 import EditPost from './edit_post';
 
@@ -21,6 +21,7 @@ function mapStateToProps(state, ownProps) {
         editPostRequest,
         post: ownProps.post,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/edit_profile/edit_profile.js b/app/screens/edit_profile/edit_profile.js
index 0d975b44f..e55b514b1 100644
--- a/app/screens/edit_profile/edit_profile.js
+++ b/app/screens/edit_profile/edit_profile.js
@@ -9,7 +9,6 @@ import RNFetchBlob from 'rn-fetch-blob';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 import {DocumentPickerUtil} from 'react-native-document-picker';
 import {Navigation} from 'react-native-navigation';
-
 import {Client4} from 'mattermost-redux/client';
 
 import {buildFileUploadData, encodeHeaderURIStringToUTF8} from 'app/utils/file';
@@ -100,6 +99,7 @@ export default class EditProfile extends PureComponent {
         positionDisabled: PropTypes.bool.isRequired,
         theme: PropTypes.object.isRequired,
         commandType: PropTypes.string.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -322,7 +322,7 @@ export default class EditProfile extends PureComponent {
 
     renderFirstNameSettings = () => {
         const {formatMessage} = this.context.intl;
-        const {firstNameDisabled, theme} = this.props;
+        const {firstNameDisabled, theme, isLandscape} = this.props;
         const {firstName} = this.state;
 
         return (
@@ -337,13 +337,14 @@ export default class EditProfile extends PureComponent {
                 onChange={this.updateField}
                 theme={theme}
                 value={firstName}
+                isLandscape={isLandscape}
             />
         );
     };
 
     renderLastNameSettings = () => {
         const {formatMessage} = this.context.intl;
-        const {lastNameDisabled, theme} = this.props;
+        const {lastNameDisabled, theme, isLandscape} = this.props;
         const {lastName} = this.state;
 
         return (
@@ -359,6 +360,7 @@ export default class EditProfile extends PureComponent {
                     onChange={this.updateField}
                     theme={theme}
                     value={lastName}
+                    isLandscape={isLandscape}
                 />
             </View>
         );
@@ -366,7 +368,7 @@ export default class EditProfile extends PureComponent {
 
     renderUsernameSettings = () => {
         const {formatMessage} = this.context.intl;
-        const {currentUser, theme} = this.props;
+        const {currentUser, theme, isLandscape} = this.props;
         const {username} = this.state;
         const disabled = currentUser.auth_service !== '';
 
@@ -383,13 +385,14 @@ export default class EditProfile extends PureComponent {
                 onChange={this.updateField}
                 theme={theme}
                 value={username}
+                isLandscape={isLandscape}
             />
         );
     };
 
     renderEmailSettings = () => {
         const {formatMessage} = this.context.intl;
-        const {currentUser, theme} = this.props;
+        const {currentUser, theme, isLandscape} = this.props;
         const {email} = this.state;
 
         let helpText;
@@ -444,6 +447,7 @@ export default class EditProfile extends PureComponent {
                     onChange={this.updateField}
                     theme={theme}
                     value={email}
+                    isLandscape={isLandscape}
                 />
             </View>
         );
@@ -451,7 +455,7 @@ export default class EditProfile extends PureComponent {
 
     renderNicknameSettings = () => {
         const {formatMessage} = this.context.intl;
-        const {nicknameDisabled, theme} = this.props;
+        const {nicknameDisabled, theme, isLandscape} = this.props;
         const {nickname} = this.state;
 
         return (
@@ -467,13 +471,14 @@ export default class EditProfile extends PureComponent {
                 onChange={this.updateField}
                 theme={theme}
                 value={nickname}
+                isLandscape={isLandscape}
             />
         );
     };
 
     renderPositionSettings = () => {
         const {formatMessage} = this.context.intl;
-        const {positionDisabled, theme} = this.props;
+        const {positionDisabled, theme, isLandscape} = this.props;
         const {position} = this.state;
 
         return (
@@ -489,6 +494,7 @@ export default class EditProfile extends PureComponent {
                 onChange={this.updateField}
                 theme={theme}
                 value={position}
+                isLandscape={isLandscape}
             />
         );
     };
diff --git a/app/screens/edit_profile/edit_profile.test.js b/app/screens/edit_profile/edit_profile.test.js
index 71bd67850..f84dcb230 100644
--- a/app/screens/edit_profile/edit_profile.test.js
+++ b/app/screens/edit_profile/edit_profile.test.js
@@ -43,6 +43,7 @@ describe('edit_profile', () => {
         },
         commandType: 'ShowModal',
         componentId: 'component-id',
+        isLandscape: false,
     };
 
     test('should match snapshot', async () => {
diff --git a/app/screens/edit_profile/index.js b/app/screens/edit_profile/index.js
index 21eb519c7..70f3db182 100644
--- a/app/screens/edit_profile/index.js
+++ b/app/screens/edit_profile/index.js
@@ -7,7 +7,7 @@ import {bindActionCreators} from 'redux';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {isMinimumServerVersion} from 'mattermost-redux/utils/helpers';
-
+import {isLandscape} from 'app/selectors/device';
 import {popTopScreen, dismissModal, setButtons} from 'app/actions/navigation';
 import {setProfileImageUri, removeProfileImage, updateUser} from 'app/actions/views/edit_profile';
 
@@ -41,6 +41,7 @@ function mapStateToProps(state, ownProps) {
         nicknameDisabled,
         positionDisabled,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/expanded_announcement_banner/expanded_announcement_banner.js b/app/screens/expanded_announcement_banner/expanded_announcement_banner.js
index 3fb7a31ae..0b10ea863 100644
--- a/app/screens/expanded_announcement_banner/expanded_announcement_banner.js
+++ b/app/screens/expanded_announcement_banner/expanded_announcement_banner.js
@@ -5,10 +5,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {ScrollView, View} from 'react-native';
 import Button from 'react-native-button';
-
 import FormattedText from 'app/components/formatted_text';
 import Markdown from 'app/components/markdown';
-
+import SafeAreaView from 'app/components/safe_area_view';
 import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
@@ -59,21 +58,23 @@ export default class ExpandedAnnouncementBanner extends React.PureComponent {
         }
 
         return (
-            <View style={style.container}>
-                <ScrollView
-                    style={style.scrollContainer}
-                    contentContainerStyle={style.textContainer}
-                >
-                    <Markdown
-                        baseTextStyle={style.baseTextStyle}
-                        blockStyles={getMarkdownBlockStyles(this.props.theme)}
-                        onChannelLinkPress={this.handleChannelLinkPress}
-                        textStyles={getMarkdownTextStyles(this.props.theme)}
-                        value={this.props.bannerText}
-                    />
-                </ScrollView>
-                {dismissButton}
-            </View>
+            <SafeAreaView useLandscapeMargin={true}>
+                <View style={style.container}>
+                    <ScrollView
+                        style={style.scrollContainer}
+                        contentContainerStyle={style.textContainer}
+                    >
+                        <Markdown
+                            baseTextStyle={style.baseTextStyle}
+                            blockStyles={getMarkdownBlockStyles(this.props.theme)}
+                            onChannelLinkPress={this.handleChannelLinkPress}
+                            textStyles={getMarkdownTextStyles(this.props.theme)}
+                            value={this.props.bannerText}
+                        />
+                    </ScrollView>
+                    {dismissButton}
+                </View>
+            </SafeAreaView>
         );
     }
 }
diff --git a/app/screens/flagged_posts/flagged_posts.js b/app/screens/flagged_posts/flagged_posts.js
index bb8a03e52..e5d757006 100644
--- a/app/screens/flagged_posts/flagged_posts.js
+++ b/app/screens/flagged_posts/flagged_posts.js
@@ -8,7 +8,6 @@ import {
     Keyboard,
     FlatList,
     StyleSheet,
-    SafeAreaView,
     View,
 } from 'react-native';
 import {Navigation} from 'react-native-navigation';
@@ -227,12 +226,10 @@ export default class FlaggedPosts extends PureComponent {
         }
 
         return (
-            <SafeAreaView style={style.container}>
-                <View style={style.container}>
-                    <StatusBar/>
-                    {component}
-                </View>
-            </SafeAreaView>
+            <View style={style.container}>
+                <StatusBar/>
+                {component}
+            </View>
         );
     }
 }
diff --git a/app/screens/login/index.js b/app/screens/login/index.js
index 5ec265094..077d7744b 100644
--- a/app/screens/login/index.js
+++ b/app/screens/login/index.js
@@ -7,7 +7,7 @@ import {connect} from 'react-redux';
 import {login} from 'mattermost-redux/actions/users';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
-
+import {isLandscape} from 'app/selectors/device';
 import {resetToChannel, goToScreen} from 'app/actions/navigation';
 import LoginActions from 'app/actions/views/login';
 
@@ -23,6 +23,7 @@ function mapStateToProps(state) {
         config,
         license,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/login/login.js b/app/screens/login/login.js
index 3fcd0e81d..0ab5e4386 100644
--- a/app/screens/login/login.js
+++ b/app/screens/login/login.js
@@ -20,7 +20,7 @@ import Button from 'react-native-button';
 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 
 import {RequestStatus} from 'mattermost-redux/constants';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import ErrorText from 'app/components/error_text';
 import FormattedText from 'app/components/formatted_text';
 import StatusBar from 'app/components/status_bar';
@@ -52,6 +52,7 @@ export default class Login extends PureComponent {
         loginId: PropTypes.string.isRequired,
         password: PropTypes.string.isRequired,
         loginRequest: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -357,7 +358,7 @@ export default class Login extends PureComponent {
                     <KeyboardAwareScrollView
                         ref={this.scrollRef}
                         style={style.container}
-                        contentContainerStyle={style.innerContainer}
+                        contentContainerStyle={[style.innerContainer, padding(this.props.isLandscape)]}
                         keyboardShouldPersistTaps='handled'
                         enableOnAndroid={true}
                     >
diff --git a/app/screens/login/login.test.js b/app/screens/login/login.test.js
index 3a3998d4f..fda355286 100644
--- a/app/screens/login/login.test.js
+++ b/app/screens/login/login.test.js
@@ -33,6 +33,7 @@ describe('Login', () => {
             resetToChannel: jest.fn(),
             goToScreen: jest.fn(),
         },
+        isLandscape: false,
     };
 
     test('should show "I forgot my password" with only email login enabled', () => {
diff --git a/app/screens/login_options/index.js b/app/screens/login_options/index.js
index e29cd446a..d7ac6975b 100644
--- a/app/screens/login_options/index.js
+++ b/app/screens/login_options/index.js
@@ -8,7 +8,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
 
 import {goToScreen} from 'app/actions/navigation';
-
+import {isLandscape} from 'app/selectors/device';
 import LoginOptions from './login_options';
 
 function mapStateToProps(state) {
@@ -18,6 +18,7 @@ function mapStateToProps(state) {
         config,
         license,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/login_options/login_options.js b/app/screens/login_options/login_options.js
index 9df26aa0f..ca078eb43 100644
--- a/app/screens/login_options/login_options.js
+++ b/app/screens/login_options/login_options.js
@@ -22,6 +22,7 @@ import {preventDoubleTap} from 'app/utils/tap';
 import LocalConfig from 'assets/config';
 import gitlab from 'assets/images/gitlab.png';
 import logo from 'assets/images/logo.png';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 export default class LoginOptions extends PureComponent {
     static propTypes = {
@@ -30,6 +31,7 @@ export default class LoginOptions extends PureComponent {
         }).isRequired,
         config: PropTypes.object.isRequired,
         license: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -253,7 +255,7 @@ export default class LoginOptions extends PureComponent {
         return (
             <ScrollView
                 style={style.container}
-                contentContainerStyle={style.innerContainer}
+                contentContainerStyle={[style.innerContainer, padding(this.props.isLandscape)]}
                 ref={this.scrollRef}
             >
                 <StatusBar/>
diff --git a/app/screens/long_post/index.js b/app/screens/long_post/index.js
index eb3a3b58f..03ea3f150 100644
--- a/app/screens/long_post/index.js
+++ b/app/screens/long_post/index.js
@@ -11,7 +11,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 import {dismissModal, goToScreen} from 'app/actions/navigation';
 import {loadThreadIfNecessary} from 'app/actions/views/channel';
-
+import {isLandscape} from 'app/selectors/device';
 import LongPost from './long_post';
 
 function makeMapStateToProps() {
@@ -29,6 +29,7 @@ function makeMapStateToProps() {
             inThreadView: Boolean(state.entities.posts.selectedPostId),
             fileIds: post ? post.file_ids : false,
             theme: getTheme(state),
+            isLandscape: isLandscape(state),
         };
     };
 }
diff --git a/app/screens/long_post/long_post.js b/app/screens/long_post/long_post.js
index d05937850..9ef136f1c 100644
--- a/app/screens/long_post/long_post.js
+++ b/app/screens/long_post/long_post.js
@@ -21,6 +21,7 @@ import SafeAreaView from 'app/components/safe_area_view';
 import {emptyFunction} from 'app/utils/general';
 import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {marginHorizontal as margin} from 'app/components/safe_area_view/iphone_x_spacing';
 
 Animatable.initializeRegistryWithDefinitions({
     growOut: {
@@ -57,6 +58,7 @@ export default class LongPost extends PureComponent {
         onPermalinkPress: PropTypes.func,
         postId: PropTypes.string.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -163,6 +165,7 @@ export default class LongPost extends PureComponent {
             onPermalinkPress,
             postId,
             theme,
+            isLandscape,
         } = this.props;
         const style = getStyleSheet(theme);
 
@@ -183,7 +186,7 @@ export default class LongPost extends PureComponent {
                 footerColor='transparent'
                 forceTop={44}
             >
-                <View style={style.container}>
+                <View style={[style.container, margin(isLandscape)]}>
                     <Animatable.View
                         ref='view'
                         animation='zoomIn'
diff --git a/app/screens/more_channels/__snapshots__/more_channels.test.js.snap b/app/screens/more_channels/__snapshots__/more_channels.test.js.snap
index 46670ab16..8913a1d8a 100644
--- a/app/screens/more_channels/__snapshots__/more_channels.test.js.snap
+++ b/app/screens/more_channels/__snapshots__/more_channels.test.js.snap
@@ -6,9 +6,12 @@ exports[`MoreChannels should match snapshot 1`] = `
   <React.Fragment>
     <View
       style={
-        Object {
-          "marginVertical": 5,
-        }
+        Array [
+          Object {
+            "marginVertical": 5,
+          },
+          null,
+        ]
       }
     >
       <SearchBarIos
@@ -50,6 +53,7 @@ exports[`MoreChannels should match snapshot 1`] = `
         ]
       }
       extraData={true}
+      isLandscape={false}
       listType="flat"
       loading={true}
       loadingComponent={
diff --git a/app/screens/more_channels/index.js b/app/screens/more_channels/index.js
index fa8617a0b..2edac7278 100644
--- a/app/screens/more_channels/index.js
+++ b/app/screens/more_channels/index.js
@@ -4,7 +4,7 @@
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 import {createSelector} from 'reselect';
-
+import {isLandscape} from 'app/selectors/device';
 import {General} from 'mattermost-redux/constants';
 import {getChannels, joinChannel, searchChannels} from 'mattermost-redux/actions/channels';
 import {getChannelsInCurrentTeam, getMyChannelMemberships} from 'mattermost-redux/selectors/entities/channels';
@@ -43,6 +43,7 @@ function mapStateToProps(state) {
         currentTeamId,
         channels,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/more_channels/more_channels.js b/app/screens/more_channels/more_channels.js
index 416a0bf53..04b2305cc 100644
--- a/app/screens/more_channels/more_channels.js
+++ b/app/screens/more_channels/more_channels.js
@@ -10,7 +10,7 @@ import {Navigation} from 'react-native-navigation';
 import {debounce} from 'mattermost-redux/actions/helpers';
 import {General} from 'mattermost-redux/constants';
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import CustomList from 'app/components/custom_list';
 import ChannelListRow from 'app/components/custom_list/channel_list_row';
 import FormattedText from 'app/components/formatted_text';
@@ -40,6 +40,7 @@ export default class MoreChannels extends PureComponent {
         currentUserId: PropTypes.string.isRequired,
         currentTeamId: PropTypes.string.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -320,7 +321,7 @@ export default class MoreChannels extends PureComponent {
 
     render() {
         const {formatMessage} = this.context.intl;
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
         const {adding, channels, loading, term} = this.state;
         const more = term ? () => true : this.getChannels;
         const style = getStyleFromTheme(theme);
@@ -342,7 +343,7 @@ export default class MoreChannels extends PureComponent {
 
             content = (
                 <React.Fragment>
-                    <View style={style.searchBar}>
+                    <View style={[style.searchBar, padding(isLandscape)]}>
                         <SearchBar
                             ref='search_bar'
                             placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
diff --git a/app/screens/more_channels/more_channels.test.js b/app/screens/more_channels/more_channels.test.js
index 7fe062b9f..13eb05621 100644
--- a/app/screens/more_channels/more_channels.test.js
+++ b/app/screens/more_channels/more_channels.test.js
@@ -31,6 +31,7 @@ describe('MoreChannels', () => {
         currentTeamId: 'current_team_id',
         theme: Preferences.THEMES.default,
         componentId: 'component-id',
+        isLandscape: false,
     };
 
     test('should match snapshot', () => {
diff --git a/app/screens/more_dms/index.js b/app/screens/more_dms/index.js
index 0f92b9b0a..dc0f17866 100644
--- a/app/screens/more_dms/index.js
+++ b/app/screens/more_dms/index.js
@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 
 import {setChannelDisplayName} from 'app/actions/views/channel';
 import {makeDirectChannel, makeGroupChannel} from 'app/actions/views/more_dms';
-
+import {isLandscape} from 'app/selectors/device';
 import {getProfiles, getProfilesInTeam, searchProfiles} from 'mattermost-redux/actions/users';
 import {General} from 'mattermost-redux/constants';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
@@ -30,6 +30,7 @@ function mapStateToProps(state) {
         currentDisplayName: state.views.channel.displayName,
         currentUserId: getCurrentUserId(state),
         currentTeamId: getCurrentTeamId(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/more_dms/more_dms.js b/app/screens/more_dms/more_dms.js
index 3f1640020..15dcfc2d7 100644
--- a/app/screens/more_dms/more_dms.js
+++ b/app/screens/more_dms/more_dms.js
@@ -12,6 +12,7 @@ import {General} from 'mattermost-redux/constants';
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
 import {getGroupDisplayNameFromUserIds} from 'mattermost-redux/utils/channel_utils';
 import {displayUsername, filterProfilesMatchingTerm} from 'mattermost-redux/utils/user_utils';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 import CustomList, {FLATLIST, SECTIONLIST} from 'app/components/custom_list';
 import UserListRow from 'app/components/custom_list/user_list_row';
@@ -50,6 +51,7 @@ export default class MoreDirectMessages extends PureComponent {
         restrictDirectMessage: PropTypes.bool.isRequired,
         teammateNameDisplay: PropTypes.string,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -394,7 +396,7 @@ export default class MoreDirectMessages extends PureComponent {
 
     render() {
         const {formatMessage} = this.context.intl;
-        const {currentUserId, theme} = this.props;
+        const {currentUserId, theme, isLandscape} = this.props;
         const {
             loading,
             profiles,
@@ -452,7 +454,7 @@ export default class MoreDirectMessages extends PureComponent {
         return (
             <KeyboardLayout>
                 <StatusBar/>
-                <View style={style.searchBar}>
+                <View style={[style.searchBar, padding(isLandscape)]}>
                     <SearchBar
                         ref='search_bar'
                         placeholder={formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
diff --git a/app/screens/options_modal/__snapshots__/option_modal_list.test.js.snap b/app/screens/options_modal/__snapshots__/option_modal_list.test.js.snap
index d867a7552..513de2676 100644
--- a/app/screens/options_modal/__snapshots__/option_modal_list.test.js.snap
+++ b/app/screens/options_modal/__snapshots__/option_modal_list.test.js.snap
@@ -146,11 +146,14 @@ exports[`OptionModalList should match snapshot for Android 1`] = `
 exports[`OptionModalList should match snapshot for iOS 1`] = `
 <View
   style={
-    Object {
-      "alignItems": "center",
-      "flex": 1,
-      "justifyContent": "flex-end",
-    }
+    Array [
+      Object {
+        "alignItems": "center",
+        "flex": 1,
+        "justifyContent": "flex-end",
+      },
+      null,
+    ]
   }
 >
   <View
diff --git a/app/screens/options_modal/index.js b/app/screens/options_modal/index.js
index 75216f0f6..5ba6a8b79 100644
--- a/app/screens/options_modal/index.js
+++ b/app/screens/options_modal/index.js
@@ -6,13 +6,14 @@ import {connect} from 'react-redux';
 
 import {dismissModal} from 'app/actions/navigation';
 
-import {getDimensions} from 'app/selectors/device';
+import {getDimensions, isLandscape} from 'app/selectors/device';
 
 import OptionsModal from './options_modal';
 
 function mapStateToProps(state) {
     return {
         ...getDimensions(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/options_modal/option_modal_list.test.js b/app/screens/options_modal/option_modal_list.test.js
index 703558226..6add24151 100644
--- a/app/screens/options_modal/option_modal_list.test.js
+++ b/app/screens/options_modal/option_modal_list.test.js
@@ -25,6 +25,7 @@ describe('OptionModalList', () => {
         }],
         onCancelPress: jest.fn(),
         title: 'test',
+        isLandscape: false,
     };
 
     test('should match snapshot for iOS', async () => {
diff --git a/app/screens/options_modal/options_modal.js b/app/screens/options_modal/options_modal.js
index dd3ff952d..b1935b768 100644
--- a/app/screens/options_modal/options_modal.js
+++ b/app/screens/options_modal/options_modal.js
@@ -34,6 +34,7 @@ export default class OptionsModal extends PureComponent {
             PropTypes.string,
             PropTypes.object,
         ]),
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -86,6 +87,7 @@ export default class OptionsModal extends PureComponent {
         const {
             items,
             title,
+            isLandscape,
         } = this.props;
 
         return (
@@ -97,6 +99,7 @@ export default class OptionsModal extends PureComponent {
                             onCancelPress={this.handleCancel}
                             onItemPress={this.onItemPress}
                             title={title}
+                            isLandscape={isLandscape}
                         />
                     </AnimatedView>
                 </View>
diff --git a/app/screens/options_modal/options_modal_list.ios.js b/app/screens/options_modal/options_modal_list.ios.js
index e80a69cc7..67a9bbf08 100644
--- a/app/screens/options_modal/options_modal_list.ios.js
+++ b/app/screens/options_modal/options_modal_list.ios.js
@@ -10,7 +10,7 @@ import {
     View,
 } from 'react-native';
 import IconFont from 'react-native-vector-icons/FontAwesome';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import FormattedText from 'app/components/formatted_text';
 import {preventDoubleTap} from 'app/utils/tap';
 
@@ -23,6 +23,7 @@ export default class OptionsModalList extends PureComponent {
             PropTypes.string,
             PropTypes.object,
         ]),
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -119,7 +120,7 @@ export default class OptionsModalList extends PureComponent {
 
     render() {
         return (
-            <View style={style.wrapper}>
+            <View style={[style.wrapper, padding(this.props.isLandscape)]}>
                 <View style={style.optionContainer}>
                     {this.renderOptions()}
                 </View>
diff --git a/app/screens/permalink/__snapshots__/permalink.test.js.snap b/app/screens/permalink/__snapshots__/permalink.test.js.snap
index e1bf1fd77..2569bba47 100644
--- a/app/screens/permalink/__snapshots__/permalink.test.js.snap
+++ b/app/screens/permalink/__snapshots__/permalink.test.js.snap
@@ -9,10 +9,13 @@ exports[`Permalink should match snapshot 1`] = `
 >
   <View
     style={
-      Object {
-        "flex": 1,
-        "marginTop": 20,
-      }
+      Array [
+        Object {
+          "flex": 1,
+          "marginTop": 20,
+        },
+        null,
+      ]
     }
   >
     <withAnimatable(View)
diff --git a/app/screens/permalink/index.js b/app/screens/permalink/index.js
index ef5f06525..df9453faf 100644
--- a/app/screens/permalink/index.js
+++ b/app/screens/permalink/index.js
@@ -15,6 +15,7 @@ import {makeGetPostIdsAroundPost, getPost} from 'mattermost-redux/selectors/enti
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
+import {isLandscape} from 'app/selectors/device';
 
 import {
     goToScreen,
@@ -62,6 +63,7 @@ function makeMapStateToProps() {
             myMembers: getMyChannelMemberships(state),
             postIds,
             theme: getTheme(state),
+            isLandscape: isLandscape(state),
         };
     };
 }
diff --git a/app/screens/permalink/permalink.js b/app/screens/permalink/permalink.js
index 2f76d2500..3520f67eb 100644
--- a/app/screens/permalink/permalink.js
+++ b/app/screens/permalink/permalink.js
@@ -26,6 +26,7 @@ import PostListRetry from 'app/components/post_list_retry';
 import SafeAreaView from 'app/components/safe_area_view';
 import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {marginHorizontal as margin} from 'app/components/safe_area_view/iphone_x_spacing';
 
 Animatable.initializeRegistryWithDefinitions({
     growOut: {
@@ -75,6 +76,7 @@ export default class Permalink extends PureComponent {
         onPress: PropTypes.func,
         postIds: PropTypes.array,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -336,6 +338,7 @@ export default class Permalink extends PureComponent {
             currentUserId,
             focusedPostId,
             theme,
+            isLandscape,
         } = this.props;
         const {
             error,
@@ -392,7 +395,7 @@ export default class Permalink extends PureComponent {
                 forceTop={44}
             >
                 <View
-                    style={style.container}
+                    style={[style.container, margin(isLandscape)]}
                 >
                     <Animatable.View
                         ref='view'
diff --git a/app/screens/permalink/permalink.test.js b/app/screens/permalink/permalink.test.js
index bd1147c5a..ff7654cbc 100644
--- a/app/screens/permalink/permalink.test.js
+++ b/app/screens/permalink/permalink.test.js
@@ -44,6 +44,7 @@ describe('Permalink', () => {
         postIds: ['post_id_1', 'focused_post_id', 'post_id_3'],
         theme: Preferences.THEMES.default,
         componentId: 'component-id',
+        isLandscape: false,
     };
 
     test('should match snapshot', () => {
diff --git a/app/screens/pinned_posts/pinned_posts.js b/app/screens/pinned_posts/pinned_posts.js
index b76c18b93..8197e1a6e 100644
--- a/app/screens/pinned_posts/pinned_posts.js
+++ b/app/screens/pinned_posts/pinned_posts.js
@@ -8,7 +8,6 @@ import {
     Keyboard,
     FlatList,
     StyleSheet,
-    SafeAreaView,
     View,
 } from 'react-native';
 import {Navigation} from 'react-native-navigation';
@@ -224,12 +223,10 @@ export default class PinnedPosts extends PureComponent {
         }
 
         return (
-            <SafeAreaView style={style.container}>
-                <View style={style.container}>
-                    <StatusBar/>
-                    {component}
-                </View>
-            </SafeAreaView>
+            <View style={style.container}>
+                <StatusBar/>
+                {component}
+            </View>
         );
     }
 }
diff --git a/app/screens/post_options/__snapshots__/post_options.test.js.snap b/app/screens/post_options/__snapshots__/post_options.test.js.snap
index 991f11d36..dfc9b7257 100644
--- a/app/screens/post_options/__snapshots__/post_options.test.js.snap
+++ b/app/screens/post_options/__snapshots__/post_options.test.js.snap
@@ -16,21 +16,25 @@ exports[`PostOptions should match snapshot, no option for system message to user
   >
     <PostOption
       icon="edit"
+      isLandscape={false}
       onPress={[Function]}
       text="Edit"
     />
     <PostOption
       icon="reply"
+      isLandscape={false}
       onPress={[Function]}
       text="Reply"
     />
     <PostOption
       icon="pin"
+      isLandscape={false}
       onPress={[Function]}
       text="Pin to Channel"
     />
     <PostOption
       icon="emoji"
+      isLandscape={false}
       onPress={[Function]}
       text="Add Reaction"
     />
@@ -54,27 +58,32 @@ exports[`PostOptions should match snapshot, showing Delete option only for syste
   >
     <PostOption
       icon="edit"
+      isLandscape={false}
       onPress={[Function]}
       text="Edit"
     />
     <PostOption
       icon="reply"
+      isLandscape={false}
       onPress={[Function]}
       text="Reply"
     />
     <PostOption
       icon="pin"
+      isLandscape={false}
       onPress={[Function]}
       text="Pin to Channel"
     />
     <PostOption
       icon="emoji"
+      isLandscape={false}
       onPress={[Function]}
       text="Add Reaction"
     />
     <PostOption
       destructive={true}
       icon="trash"
+      isLandscape={false}
       onPress={[Function]}
       text="Delete"
     />
@@ -98,27 +107,32 @@ exports[`PostOptions should match snapshot, showing all possible options 1`] = `
   >
     <PostOption
       icon="edit"
+      isLandscape={false}
       onPress={[Function]}
       text="Edit"
     />
     <PostOption
       icon="reply"
+      isLandscape={false}
       onPress={[Function]}
       text="Reply"
     />
     <PostOption
       icon="pin"
+      isLandscape={false}
       onPress={[Function]}
       text="Pin to Channel"
     />
     <PostOption
       icon="emoji"
+      isLandscape={false}
       onPress={[Function]}
       text="Add Reaction"
     />
     <PostOption
       destructive={true}
       icon="trash"
+      isLandscape={false}
       onPress={[Function]}
       text="Delete"
     />
diff --git a/app/screens/post_options/index.js b/app/screens/post_options/index.js
index e6120ef8e..cbfa74ec5 100644
--- a/app/screens/post_options/index.js
+++ b/app/screens/post_options/index.js
@@ -24,7 +24,7 @@ import {canEditPost} from 'mattermost-redux/utils/post_utils';
 import {THREAD} from 'app/constants/screen';
 import {dismissModal, showModal} from 'app/actions/navigation';
 import {addReaction} from 'app/actions/views/emoji';
-import {getDimensions} from 'app/selectors/device';
+import {getDimensions, isLandscape} from 'app/selectors/device';
 
 import PostOptions from './post_options';
 
@@ -109,6 +109,7 @@ export function mapStateToProps(state, ownProps) {
         currentTeamUrl: getCurrentTeamUrl(state),
         isMyPost: currentUserId === post.user_id,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/post_options/index.test.js b/app/screens/post_options/index.test.js
index 6ae7de39c..b3b8cff04 100644
--- a/app/screens/post_options/index.test.js
+++ b/app/screens/post_options/index.test.js
@@ -21,6 +21,7 @@ commonSelectors.getCurrentChannelId = jest.fn();
 teamSelectors.getCurrentTeamId = jest.fn();
 teamSelectors.getCurrentTeamUrl = jest.fn();
 deviceSelectors.getDimensions = jest.fn();
+deviceSelectors.isLandscape = jest.fn();
 preferencesSelectors.getTheme = jest.fn();
 
 describe('mapStateToProps', () => {
diff --git a/app/screens/post_options/post_option.js b/app/screens/post_options/post_option.js
index b3bf422bd..a095db0e9 100644
--- a/app/screens/post_options/post_option.js
+++ b/app/screens/post_options/post_option.js
@@ -12,7 +12,7 @@ import {
     TouchableNativeFeedback,
     View,
 } from 'react-native';
-
+import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import copy from 'assets/images/post_menu/copy.png';
 import edit from 'assets/images/post_menu/edit.png';
 import emoji from 'assets/images/post_menu/emoji.png';
@@ -39,6 +39,7 @@ export default class PostOption extends PureComponent {
         icon: PropTypes.string.isRequired,
         onPress: PropTypes.func.isRequired,
         text: PropTypes.string.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     handleOnPress = () => {
@@ -49,7 +50,7 @@ export default class PostOption extends PureComponent {
     };
 
     render() {
-        const {destructive, icon, text} = this.props;
+        const {destructive, icon, text, isLandscape} = this.props;
         const image = icons[icon];
 
         const Touchable = Platform.select({
@@ -74,7 +75,7 @@ export default class PostOption extends PureComponent {
                 <Touchable
                     onPress={this.handleOnPress}
                     {...touchableProps}
-                    style={style.row}
+                    style={[style.row, padding(isLandscape)]}
                 >
                     <View style={style.row}>
                         <View style={style.icon}>
diff --git a/app/screens/post_options/post_options.js b/app/screens/post_options/post_options.js
index 64c934ebd..732c6e885 100644
--- a/app/screens/post_options/post_options.js
+++ b/app/screens/post_options/post_options.js
@@ -43,6 +43,7 @@ export default class PostOptions extends PureComponent {
         isMyPost: PropTypes.bool,
         post: PropTypes.object.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -63,7 +64,7 @@ export default class PostOptions extends PureComponent {
 
     getAddReactionOption = () => {
         const {formatMessage} = this.context.intl;
-        const {canAddReaction} = this.props;
+        const {canAddReaction, isLandscape} = this.props;
 
         if (canAddReaction) {
             return (
@@ -72,6 +73,7 @@ export default class PostOptions extends PureComponent {
                     icon='emoji'
                     text={formatMessage({id: 'mobile.post_info.add_reaction', defaultMessage: 'Add Reaction'})}
                     onPress={this.handleAddReaction}
+                    isLandscape={isLandscape}
                 />
             );
         }
@@ -81,7 +83,7 @@ export default class PostOptions extends PureComponent {
 
     getReplyOption = () => {
         const {formatMessage} = this.context.intl;
-        const {canReply} = this.props;
+        const {canReply, isLandscape} = this.props;
 
         if (canReply) {
             return (
@@ -90,6 +92,7 @@ export default class PostOptions extends PureComponent {
                     icon='reply'
                     text={formatMessage({id: 'mobile.post_info.reply', defaultMessage: 'Reply'})}
                     onPress={this.handleReply}
+                    isLandscape={isLandscape}
                 />
             );
         }
@@ -99,7 +102,7 @@ export default class PostOptions extends PureComponent {
 
     getCopyPermalink = () => {
         const {formatMessage} = this.context.intl;
-        const {canCopyPermalink} = this.props;
+        const {canCopyPermalink, isLandscape} = this.props;
 
         if (canCopyPermalink) {
             return (
@@ -108,6 +111,7 @@ export default class PostOptions extends PureComponent {
                     icon='link'
                     text={formatMessage({id: 'get_post_link_modal.title', defaultMessage: 'Copy Permalink'})}
                     onPress={this.handleCopyPermalink}
+                    isLandscape={isLandscape}
                 />
             );
         }
@@ -117,7 +121,7 @@ export default class PostOptions extends PureComponent {
 
     getCopyText = () => {
         const {formatMessage} = this.context.intl;
-        const {canCopyText} = this.props;
+        const {canCopyText, isLandscape} = this.props;
 
         if (canCopyText) {
             return (
@@ -126,6 +130,7 @@ export default class PostOptions extends PureComponent {
                     icon='copy'
                     text={formatMessage({id: 'mobile.post_info.copy_text', defaultMessage: 'Copy Text'})}
                     onPress={this.handleCopyText}
+                    isLandscape={isLandscape}
                 />
             );
         }
@@ -135,7 +140,7 @@ export default class PostOptions extends PureComponent {
 
     getDeleteOption = () => {
         const {formatMessage} = this.context.intl;
-        const {canDelete} = this.props;
+        const {canDelete, isLandscape} = this.props;
 
         if (canDelete) {
             return (
@@ -145,6 +150,7 @@ export default class PostOptions extends PureComponent {
                     icon='trash'
                     text={formatMessage({id: 'post_info.del', defaultMessage: 'Delete'})}
                     onPress={this.handlePostDelete}
+                    isLandscape={isLandscape}
                 />
             );
         }
@@ -154,7 +160,7 @@ export default class PostOptions extends PureComponent {
 
     getEditOption = () => {
         const {formatMessage} = this.context.intl;
-        const {canEdit, canEditUntil} = this.props;
+        const {canEdit, canEditUntil, isLandscape} = this.props;
 
         if (canEdit && (canEditUntil === -1 || canEditUntil > Date.now())) {
             return (
@@ -163,6 +169,7 @@ export default class PostOptions extends PureComponent {
                     icon='edit'
                     text={formatMessage({id: 'post_info.edit', defaultMessage: 'Edit'})}
                     onPress={this.handlePostEdit}
+                    isLandscape={isLandscape}
                 />
             );
         }
@@ -172,7 +179,7 @@ export default class PostOptions extends PureComponent {
 
     getFlagOption = () => {
         const {formatMessage} = this.context.intl;
-        const {canFlag, isFlagged} = this.props;
+        const {canFlag, isFlagged, isLandscape} = this.props;
 
         if (!canFlag) {
             return null;
@@ -185,6 +192,7 @@ export default class PostOptions extends PureComponent {
                     icon='flag'
                     text={formatMessage({id: 'mobile.post_info.unflag', defaultMessage: 'Unflag'})}
                     onPress={this.handleUnflagPost}
+                    isLandscape={isLandscape}
                 />
             );
         }
@@ -195,13 +203,14 @@ export default class PostOptions extends PureComponent {
                 icon='flag'
                 text={formatMessage({id: 'mobile.post_info.flag', defaultMessage: 'Flag'})}
                 onPress={this.handleFlagPost}
+                isLandscape={isLandscape}
             />
         );
     };
 
     getPinOption = () => {
         const {formatMessage} = this.context.intl;
-        const {canPin, post} = this.props;
+        const {canPin, post, isLandscape} = this.props;
 
         if (!canPin) {
             return null;
@@ -214,6 +223,7 @@ export default class PostOptions extends PureComponent {
                     icon='pin'
                     text={formatMessage({id: 'mobile.post_info.unpin', defaultMessage: 'Unpin from Channel'})}
                     onPress={this.handleUnpinPost}
+                    isLandscape={isLandscape}
                 />
             );
         }
@@ -224,6 +234,7 @@ export default class PostOptions extends PureComponent {
                 icon='pin'
                 text={formatMessage({id: 'mobile.post_info.pin', defaultMessage: 'Pin to Channel'})}
                 onPress={this.handlePinPost}
+                isLandscape={isLandscape}
             />
         );
     };
diff --git a/app/screens/post_options/post_options.test.js b/app/screens/post_options/post_options.test.js
index cd742c97f..277bddda9 100644
--- a/app/screens/post_options/post_options.test.js
+++ b/app/screens/post_options/post_options.test.js
@@ -57,6 +57,7 @@ describe('PostOptions', () => {
         post,
         showAddReaction: true,
         theme: Preferences.THEMES.default,
+        isLandscape: false,
     };
 
     function getWrapper(props = {}) {
diff --git a/app/screens/reaction_list/__snapshots__/reaction_header.test.js.snap b/app/screens/reaction_list/__snapshots__/reaction_header.test.js.snap
index 506d03653..a668c3c3f 100644
--- a/app/screens/reaction_list/__snapshots__/reaction_header.test.js.snap
+++ b/app/screens/reaction_list/__snapshots__/reaction_header.test.js.snap
@@ -17,6 +17,7 @@ exports[`ReactionHeader should match snapshot 1`] = `
       alwaysBounceHorizontal={false}
       horizontal={true}
       overScrollMode="never"
+      style={null}
     >
       <ReactionHeaderItem
         count={2}
diff --git a/app/screens/reaction_list/index.js b/app/screens/reaction_list/index.js
index 56d5e6d1d..70fc1b742 100644
--- a/app/screens/reaction_list/index.js
+++ b/app/screens/reaction_list/index.js
@@ -10,7 +10,7 @@ import {getCurrentUserId, makeGetProfilesByIdsAndUsernames} from 'mattermost-red
 import {getTeammateNameDisplaySetting, getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 import {dismissModal} from 'app/actions/navigation';
-
+import {isLandscape} from 'app/selectors/device';
 import {getUniqueUserIds} from 'app/utils/reaction';
 
 import ReactionList from './reaction_list';
@@ -29,6 +29,7 @@ function makeMapStateToProps() {
             teammateNameDisplay: getTeammateNameDisplaySetting(state),
             theme: getTheme(state),
             userProfiles: getProfilesByIdsAndUsernames(state, {allUserIds}) || [],
+            isLandscape: isLandscape(state),
         };
     };
 }
diff --git a/app/screens/reaction_list/reaction_header.js b/app/screens/reaction_list/reaction_header.js
index af25802a4..176a3966f 100644
--- a/app/screens/reaction_list/reaction_header.js
+++ b/app/screens/reaction_list/reaction_header.js
@@ -10,7 +10,7 @@ import {
     StyleSheet,
 } from 'react-native';
 import {NativeViewGestureHandler} from 'react-native-gesture-handler';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import ReactionHeaderItem from './reaction_header_item';
 
 export default class ReactionHeader extends PureComponent {
@@ -20,6 +20,7 @@ export default class ReactionHeader extends PureComponent {
         onSelectReaction: PropTypes.func.isRequired,
         reactions: PropTypes.array.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     handleOnPress = (emoji) => {
@@ -51,6 +52,7 @@ export default class ReactionHeader extends PureComponent {
                         alwaysBounceHorizontal={false}
                         horizontal={true}
                         overScrollMode='never'
+                        style={padding(this.props.isLandscape, -10)}
                     >
                         {this.renderReactionHeaderItems()}
                     </ScrollView>
diff --git a/app/screens/reaction_list/reaction_header.test.js b/app/screens/reaction_list/reaction_header.test.js
index e965faecb..f59d42659 100644
--- a/app/screens/reaction_list/reaction_header.test.js
+++ b/app/screens/reaction_list/reaction_header.test.js
@@ -14,6 +14,7 @@ describe('ReactionHeader', () => {
         onSelectReaction: jest.fn(),
         reactions: [{name: 'smile', count: 2}, {name: '+1', count: 1}],
         theme: Preferences.THEMES.default,
+        isLandscape: false,
     };
 
     test('should match snapshot', () => {
diff --git a/app/screens/reaction_list/reaction_list.js b/app/screens/reaction_list/reaction_list.js
index c409104c5..338797090 100644
--- a/app/screens/reaction_list/reaction_list.js
+++ b/app/screens/reaction_list/reaction_list.js
@@ -34,6 +34,7 @@ export default class ReactionList extends PureComponent {
         theme: PropTypes.object.isRequired,
         teammateNameDisplay: PropTypes.string,
         userProfiles: PropTypes.array,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -164,7 +165,7 @@ export default class ReactionList extends PureComponent {
     };
 
     renderHeader = (forwardedRef) => {
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
         const {selected, sortedReactionsForHeader} = this.state;
 
         return (
@@ -174,6 +175,7 @@ export default class ReactionList extends PureComponent {
                 reactions={sortedReactionsForHeader}
                 theme={theme}
                 forwardedRef={forwardedRef}
+                isLandscape={isLandscape}
             />
         );
     };
diff --git a/app/screens/reaction_list/reaction_list.test.js b/app/screens/reaction_list/reaction_list.test.js
index 86f5646d9..12626a479 100644
--- a/app/screens/reaction_list/reaction_list.test.js
+++ b/app/screens/reaction_list/reaction_list.test.js
@@ -23,6 +23,7 @@ describe('ReactionList', () => {
         teammateNameDisplay: 'username',
         userProfiles: [{id: 'user_id_1', username: 'username_1'}, {id: 'user_id_2', username: 'username_2'}],
         componentId: 'component-id',
+        isLandscape: false,
     };
 
     test('should match snapshot', () => {
diff --git a/app/screens/reaction_list/reaction_row/__snapshots__/reaction_row.test.js.snap b/app/screens/reaction_list/reaction_row/__snapshots__/reaction_row.test.js.snap
index 04056f9e6..6b15ce349 100644
--- a/app/screens/reaction_list/reaction_row/__snapshots__/reaction_row.test.js.snap
+++ b/app/screens/reaction_list/reaction_row/__snapshots__/reaction_row.test.js.snap
@@ -14,10 +14,13 @@ exports[`ReactionRow should match snapshot, renderContent 1`] = `
 >
   <View
     style={
-      Object {
-        "alignItems": "center",
-        "width": "13%",
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "width": "13%",
+        },
+        null,
+      ]
     }
   >
     <TouchableOpacity
diff --git a/app/screens/reaction_list/reaction_row/index.js b/app/screens/reaction_list/reaction_row/index.js
index d91992b1f..9da44288b 100644
--- a/app/screens/reaction_list/reaction_row/index.js
+++ b/app/screens/reaction_list/reaction_row/index.js
@@ -5,9 +5,15 @@ import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 
 import {goToScreen} from 'app/actions/navigation';
-
+import {isLandscape} from 'app/selectors/device';
 import ReactionRow from './reaction_row';
 
+function mapStateToProps(state) {
+    return {
+        isLandscape: isLandscape(state),
+    };
+}
+
 function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
@@ -16,4 +22,4 @@ function mapDispatchToProps(dispatch) {
     };
 }
 
-export default connect(null, mapDispatchToProps)(ReactionRow);
+export default connect(mapStateToProps, mapDispatchToProps)(ReactionRow);
diff --git a/app/screens/reaction_list/reaction_row/reaction_row.js b/app/screens/reaction_list/reaction_row/reaction_row.js
index 8ad6e2e56..bcf00abaa 100644
--- a/app/screens/reaction_list/reaction_row/reaction_row.js
+++ b/app/screens/reaction_list/reaction_row/reaction_row.js
@@ -16,6 +16,7 @@ import {displayUsername} from 'mattermost-redux/utils/user_utils';
 import ProfilePicture from 'app/components/profile_picture';
 import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 import Emoji from 'app/components/emoji';
 
@@ -28,6 +29,7 @@ export default class ReactionRow extends React.PureComponent {
         teammateNameDisplay: PropTypes.string.isRequired,
         theme: PropTypes.object.isRequired,
         user: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -55,6 +57,7 @@ export default class ReactionRow extends React.PureComponent {
             emojiName,
             teammateNameDisplay,
             user,
+            isLandscape,
         } = this.props;
 
         if (!user.id) {
@@ -66,7 +69,7 @@ export default class ReactionRow extends React.PureComponent {
 
         return (
             <View style={style.container}>
-                <View style={style.profileContainer}>
+                <View style={[style.profileContainer, padding(isLandscape)]}>
                     <TouchableOpacity
                         key={user.id}
                         onPress={preventDoubleTap(this.goToUserProfile)}
diff --git a/app/screens/reaction_list/reaction_row/reaction_row.test.js b/app/screens/reaction_list/reaction_row/reaction_row.test.js
index 21e7fcd10..9f65bf3bb 100644
--- a/app/screens/reaction_list/reaction_row/reaction_row.test.js
+++ b/app/screens/reaction_list/reaction_row/reaction_row.test.js
@@ -16,6 +16,7 @@ describe('ReactionRow', () => {
         teammateNameDisplay: 'username',
         theme: Preferences.THEMES.default,
         user: {id: 'user_id', username: 'username'},
+        isLandscape: false,
     };
 
     test('should match snapshot, renderContent', () => {
diff --git a/app/screens/recent_mentions/recent_mentions.js b/app/screens/recent_mentions/recent_mentions.js
index 9fd2ba7a1..226d95c64 100644
--- a/app/screens/recent_mentions/recent_mentions.js
+++ b/app/screens/recent_mentions/recent_mentions.js
@@ -7,7 +7,6 @@ import {intlShape} from 'react-intl';
 import {
     Keyboard,
     FlatList,
-    SafeAreaView,
     StyleSheet,
     View,
 } from 'react-native';
@@ -225,12 +224,10 @@ export default class RecentMentions extends PureComponent {
         }
 
         return (
-            <SafeAreaView style={style.container}>
-                <View style={style.container}>
-                    <StatusBar/>
-                    {component}
-                </View>
-            </SafeAreaView>
+            <View style={style.container}>
+                <StatusBar/>
+                {component}
+            </View>
         );
     }
 }
diff --git a/app/screens/search/__snapshots__/modifier.test.js.snap b/app/screens/search/__snapshots__/modifier.test.js.snap
index f55b3a0a2..7b3b9076b 100644
--- a/app/screens/search/__snapshots__/modifier.test.js.snap
+++ b/app/screens/search/__snapshots__/modifier.test.js.snap
@@ -19,11 +19,14 @@ exports[`Search RecentItem should match snapshot and respond to events 1`] = `
   >
     <View
       style={
-        Object {
-          "flex": 1,
-          "flexDirection": "column",
-          "paddingHorizontal": 16,
-        }
+        Array [
+          Object {
+            "flex": 1,
+            "flexDirection": "column",
+            "paddingHorizontal": 16,
+          },
+          null,
+        ]
       }
     >
       <View
diff --git a/app/screens/search/__snapshots__/recent_item.test.js.snap b/app/screens/search/__snapshots__/recent_item.test.js.snap
index 9a36f8b52..ef99dae8f 100644
--- a/app/screens/search/__snapshots__/recent_item.test.js.snap
+++ b/app/screens/search/__snapshots__/recent_item.test.js.snap
@@ -9,12 +9,15 @@ exports[`Search RecentItem should match snapshot and respond to events 1`] = `
 >
   <View
     style={
-      Object {
-        "alignItems": "center",
-        "flex": 1,
-        "flexDirection": "row",
-        "height": 42,
-      }
+      Array [
+        Object {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "height": 42,
+        },
+        null,
+      ]
     }
   >
     <Text
diff --git a/app/screens/search/channel_display_name/channel_display_name.js b/app/screens/search/channel_display_name/channel_display_name.js
index 1fb3bae55..bffe72a8e 100644
--- a/app/screens/search/channel_display_name/channel_display_name.js
+++ b/app/screens/search/channel_display_name/channel_display_name.js
@@ -4,21 +4,22 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {Text} from 'react-native';
-
+import {paddingLeft as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
 export default class ChannelDisplayName extends PureComponent {
     static propTypes = {
         displayName: PropTypes.string,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     render() {
-        const {displayName, theme} = this.props;
+        const {displayName, theme, isLandscape} = this.props;
         const styles = getStyleFromTheme(theme);
 
         return (
-            <Text style={styles.channelName}>{displayName}</Text>
+            <Text style={[styles.channelName, padding(isLandscape, +16)]}>{displayName}</Text>
         );
     }
 }
diff --git a/app/screens/search/channel_display_name/index.js b/app/screens/search/channel_display_name/index.js
index 9a08008f9..d62660a79 100644
--- a/app/screens/search/channel_display_name/index.js
+++ b/app/screens/search/channel_display_name/index.js
@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 import {makeGetChannel} from 'mattermost-redux/selectors/entities/channels';
 import {getPost} from 'mattermost-redux/selectors/entities/posts';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
-
+import {isLandscape} from 'app/selectors/device';
 import ChannelDisplayName from './channel_display_name';
 
 function makeMapStateToProps() {
@@ -18,6 +18,7 @@ function makeMapStateToProps() {
         return {
             displayName: channel ? channel.display_name : '',
             theme: getTheme(state),
+            isLandscape: isLandscape(state),
         };
     };
 }
diff --git a/app/screens/search/modifier.js b/app/screens/search/modifier.js
index bd7a58501..822deaab8 100644
--- a/app/screens/search/modifier.js
+++ b/app/screens/search/modifier.js
@@ -7,6 +7,7 @@ import {Text, TouchableHighlight, View} from 'react-native';
 import AwesomeIcon from 'react-native-vector-icons/FontAwesome';
 
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 export const MODIFIER_LABEL_HEIGHT = 58;
 
@@ -15,6 +16,11 @@ export default class Modifier extends PureComponent {
         item: PropTypes.object.isRequired,
         setModifierValue: PropTypes.func.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
+    };
+
+    static defaultProps = {
+        isLandscape: false,
     };
 
     handlePress = () => {
@@ -24,7 +30,7 @@ export default class Modifier extends PureComponent {
     };
 
     render() {
-        const {item, theme} = this.props;
+        const {item, theme, isLandscape} = this.props;
         const style = getStyleFromTheme(theme);
 
         return (
@@ -34,7 +40,7 @@ export default class Modifier extends PureComponent {
                 onPress={this.handlePress}
             >
                 <View style={style.modifierItemContainer}>
-                    <View style={style.modifierItemWrapper}>
+                    <View style={[style.modifierItemWrapper, padding(isLandscape)]}>
                         <View style={style.modifierItemLabelContainer}>
                             <View style={style.modifierLabelIconContainer}>
                                 <AwesomeIcon
diff --git a/app/screens/search/recent_item.js b/app/screens/search/recent_item.js
index 7e0574842..17e3bd575 100644
--- a/app/screens/search/recent_item.js
+++ b/app/screens/search/recent_item.js
@@ -7,6 +7,7 @@ import {Text, TouchableHighlight, TouchableOpacity, View} from 'react-native';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 export const RECENT_LABEL_HEIGHT = 42;
 
@@ -16,6 +17,11 @@ export default class RecentItem extends PureComponent {
         removeSearchTerms: PropTypes.func.isRequired,
         setRecentValue: PropTypes.func.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
+    };
+
+    static defaultProps = {
+        isLandscape: false,
     };
 
     handlePress = () => {
@@ -30,7 +36,7 @@ export default class RecentItem extends PureComponent {
     };
 
     render() {
-        const {item, theme} = this.props;
+        const {item, theme, isLandscape} = this.props;
         const style = getStyleFromTheme(theme);
 
         return (
@@ -40,7 +46,7 @@ export default class RecentItem extends PureComponent {
                 onPress={this.handlePress}
             >
                 <View
-                    style={style.recentItemContainer}
+                    style={[style.recentItemContainer, padding(isLandscape)]}
                 >
                     <Text
                         style={style.recentItemLabel}
diff --git a/app/screens/search/search.js b/app/screens/search/search.js
index d8d32a2f7..6d0c6b387 100644
--- a/app/screens/search/search.js
+++ b/app/screens/search/search.js
@@ -32,6 +32,7 @@ import {DeviceTypes, ListTypes} from 'app/constants';
 import mattermostManaged from 'app/mattermost_managed';
 import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 import ChannelDisplayName from './channel_display_name';
 import Modifier, {MODIFIER_LABEL_HEIGHT} from './modifier';
@@ -335,19 +336,20 @@ export default class Search extends PureComponent {
     };
 
     renderModifiers = ({item}) => {
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
 
         return (
             <Modifier
                 item={item}
                 setModifierValue={this.setModifierValue}
                 theme={theme}
+                isLandscape={isLandscape}
             />
         );
     };
 
     renderPost = ({item, index}) => {
-        const {postIds, theme} = this.props;
+        const {postIds, theme, isLandscape} = this.props;
         const style = getStyleFromTheme(theme);
 
         if (item.id) {
@@ -374,7 +376,7 @@ export default class Search extends PureComponent {
         }
 
         return (
-            <View style={style.postResult}>
+            <View style={[style.postResult, padding(isLandscape)]}>
                 <ChannelDisplayName postId={item}/>
                 {this.archivedIndicator(postIds[index], style)}
                 <SearchResultPost
@@ -403,7 +405,7 @@ export default class Search extends PureComponent {
     };
 
     renderSectionHeader = ({section}) => {
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
         const {title} = section;
         const style = getStyleFromTheme(theme);
 
@@ -411,7 +413,7 @@ export default class Search extends PureComponent {
             return (
                 <View style={style.sectionWrapper}>
                     <View style={style.sectionContainer}>
-                        <Text style={style.sectionLabel}>
+                        <Text style={[style.sectionLabel, padding(isLandscape, -16)]}>
                             {title}
                         </Text>
                     </View>
@@ -423,7 +425,7 @@ export default class Search extends PureComponent {
     };
 
     renderRecentItem = ({item}) => {
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
 
         return (
             <RecentItem
@@ -431,6 +433,7 @@ export default class Search extends PureComponent {
                 removeSearchTerms={this.removeSearchTerms}
                 setRecentValue={this.setRecentValue}
                 theme={theme}
+                isLandscape={isLandscape}
             />
         );
     };
@@ -685,7 +688,7 @@ export default class Search extends PureComponent {
             >
                 <KeyboardLayout>
                     <StatusBar/>
-                    <View style={style.header}>
+                    <View style={[style.header, padding(isLandscape)]}>
                         <SearchBar
                             ref='searchBar'
                             placeholder={intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
diff --git a/app/screens/select_server/select_server.js b/app/screens/select_server/select_server.js
index 0c102e73d..34025218a 100644
--- a/app/screens/select_server/select_server.js
+++ b/app/screens/select_server/select_server.js
@@ -21,6 +21,7 @@ import {
 } from 'react-native';
 import Button from 'react-native-button';
 import RNFetchBlob from 'rn-fetch-blob';
+import SafeAreaView from 'app/components/safe_area_view';
 
 import merge from 'deepmerge';
 
@@ -415,58 +416,60 @@ export default class SelectServer extends PureComponent {
         }
 
         return (
-            <KeyboardAvoidingView
-                behavior='padding'
-                style={style.container}
-                keyboardVerticalOffset={0}
-                enabled={Platform.OS === 'ios'}
-            >
-                <StatusBar barStyle={statusStyle}/>
-                <TouchableWithoutFeedback onPress={this.blur}>
-                    <View style={[GlobalStyles.container, GlobalStyles.signupContainer]}>
-                        <Image
-                            source={require('assets/images/logo.png')}
-                        />
-
-                        <View>
-                            <FormattedText
-                                style={[GlobalStyles.header, GlobalStyles.label]}
-                                id='mobile.components.select_server_view.enterServerUrl'
-                                defaultMessage='Enter Server URL'
+            <SafeAreaView useLandscapeMargin={true}>
+                <KeyboardAvoidingView
+                    behavior='padding'
+                    style={style.container}
+                    keyboardVerticalOffset={0}
+                    enabled={Platform.OS === 'ios'}
+                >
+                    <StatusBar barStyle={statusStyle}/>
+                    <TouchableWithoutFeedback onPress={this.blur}>
+                        <View style={[GlobalStyles.container, GlobalStyles.signupContainer]}>
+                            <Image
+                                source={require('assets/images/logo.png')}
                             />
+
+                            <View>
+                                <FormattedText
+                                    style={[GlobalStyles.header, GlobalStyles.label]}
+                                    id='mobile.components.select_server_view.enterServerUrl'
+                                    defaultMessage='Enter Server URL'
+                                />
+                            </View>
+                            <TextInput
+                                ref={this.inputRef}
+                                value={url}
+                                editable={!inputDisabled}
+                                onChangeText={this.handleTextChanged}
+                                onSubmitEditing={this.handleConnect}
+                                style={inputStyle}
+                                autoCapitalize='none'
+                                autoCorrect={false}
+                                keyboardType='url'
+                                placeholder={formatMessage({
+                                    id: 'mobile.components.select_server_view.siteUrlPlaceholder',
+                                    defaultMessage: 'https://mattermost.example.com',
+                                })}
+                                placeholderTextColor={changeOpacity('#000', 0.5)}
+                                returnKeyType='go'
+                                underlineColorAndroid='transparent'
+                                disableFullscreenUI={true}
+                            />
+                            <Button
+                                onPress={this.handleConnect}
+                                containerStyle={[GlobalStyles.signupButton, style.connectButton]}
+                            >
+                                {buttonIcon}
+                                <Text style={GlobalStyles.signupButtonText}>
+                                    {buttonText}
+                                </Text>
+                            </Button>
+                            <ErrorText error={error}/>
                         </View>
-                        <TextInput
-                            ref={this.inputRef}
-                            value={url}
-                            editable={!inputDisabled}
-                            onChangeText={this.handleTextChanged}
-                            onSubmitEditing={this.handleConnect}
-                            style={inputStyle}
-                            autoCapitalize='none'
-                            autoCorrect={false}
-                            keyboardType='url'
-                            placeholder={formatMessage({
-                                id: 'mobile.components.select_server_view.siteUrlPlaceholder',
-                                defaultMessage: 'https://mattermost.example.com',
-                            })}
-                            placeholderTextColor={changeOpacity('#000', 0.5)}
-                            returnKeyType='go'
-                            underlineColorAndroid='transparent'
-                            disableFullscreenUI={true}
-                        />
-                        <Button
-                            onPress={this.handleConnect}
-                            containerStyle={[GlobalStyles.signupButton, style.connectButton]}
-                        >
-                            {buttonIcon}
-                            <Text style={GlobalStyles.signupButtonText}>
-                                {buttonText}
-                            </Text>
-                        </Button>
-                        <ErrorText error={error}/>
-                    </View>
-                </TouchableWithoutFeedback>
-            </KeyboardAvoidingView>
+                    </TouchableWithoutFeedback>
+                </KeyboardAvoidingView>
+            </SafeAreaView>
         );
     }
 }
diff --git a/app/screens/select_team/__snapshots__/select_team.test.js.snap b/app/screens/select_team/__snapshots__/select_team.test.js.snap
index bae4affb8..9efe63707 100644
--- a/app/screens/select_team/__snapshots__/select_team.test.js.snap
+++ b/app/screens/select_team/__snapshots__/select_team.test.js.snap
@@ -60,9 +60,12 @@ exports[`SelectTeam should match snapshot for teams 1`] = `
   >
     <View
       style={
-        Object {
-          "marginRight": 15,
-        }
+        Array [
+          Object {
+            "marginRight": 15,
+          },
+          null,
+        ]
       }
     >
       <FormattedText
@@ -89,6 +92,7 @@ exports[`SelectTeam should match snapshot for teams 1`] = `
   <CustomList
     data={Array []}
     extraData={false}
+    isLandscape={false}
     listType="flat"
     loading={false}
     loadingComponent={
diff --git a/app/screens/select_team/index.js b/app/screens/select_team/index.js
index 7ff9a7eca..beb5b8c9f 100644
--- a/app/screens/select_team/index.js
+++ b/app/screens/select_team/index.js
@@ -11,6 +11,7 @@ import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
 
 import {resetToChannel, dismissModal} from 'app/actions/navigation';
 import {handleTeamChange} from 'app/actions/views/select_team';
+import {isLandscape} from 'app/selectors/device';
 import {isGuest} from 'app/utils/users';
 
 import SelectTeam from './select_team.js';
@@ -21,6 +22,7 @@ function mapStateToProps(state) {
     return {
         teamsRequest: state.requests.teams.getTeams,
         teams: getJoinableTeams(state),
+        isLandscape: isLandscape(state),
         currentUserIsGuest,
     };
 }
diff --git a/app/screens/select_team/select_team.js b/app/screens/select_team/select_team.js
index 8c8affb40..b4b1be8e9 100644
--- a/app/screens/select_team/select_team.js
+++ b/app/screens/select_team/select_team.js
@@ -22,7 +22,7 @@ import {preventDoubleTap} from 'app/utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme, setNavigatorStyles} from 'app/utils/theme';
 import {t} from 'app/utils/i18n';
 import CustomList from 'app/components/custom_list';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import TeamIcon from 'app/components/team_icon';
 
 const TEAMS_PER_PAGE = 50;
@@ -44,6 +44,7 @@ export default class SelectTeam extends PureComponent {
         teams: PropTypes.array.isRequired,
         theme: PropTypes.object,
         teamsRequest: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -160,7 +161,7 @@ export default class SelectTeam extends PureComponent {
     }
 
     renderItem = ({item}) => {
-        const {currentUrl, theme} = this.props;
+        const {currentUrl, theme, isLandscape} = this.props;
         const style = getStyleFromTheme(theme);
 
         if (item.id === 'mobile.select_team.no_teams') {
@@ -178,7 +179,7 @@ export default class SelectTeam extends PureComponent {
         }
 
         return (
-            <View style={style.teamWrapper}>
+            <View style={[style.teamWrapper, padding(isLandscape)]}>
                 <TouchableOpacity
                     onPress={preventDoubleTap(() => this.onSelectTeam(item))}
                 >
@@ -212,7 +213,7 @@ export default class SelectTeam extends PureComponent {
     };
 
     render() {
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
         const {teams} = this.state;
         const style = getStyleFromTheme(theme);
 
@@ -250,7 +251,7 @@ export default class SelectTeam extends PureComponent {
             <View style={style.container}>
                 <StatusBar/>
                 <View style={style.headingContainer}>
-                    <View style={style.headingWrapper}>
+                    <View style={[style.headingWrapper, padding(isLandscape)]}>
                         <FormattedText
                             id='mobile.select_team.join_open'
                             defaultMessage='Open teams you can join'
diff --git a/app/screens/select_team/select_team.test.js b/app/screens/select_team/select_team.test.js
index 1a2ddac7a..550093919 100644
--- a/app/screens/select_team/select_team.test.js
+++ b/app/screens/select_team/select_team.test.js
@@ -45,6 +45,7 @@ describe('SelectTeam', () => {
             status: RequestStatus.FAILURE,
         },
         componentId: 'component-id',
+        isLandscape: false,
     };
 
     test('should match snapshot for fail of teams', async () => {
diff --git a/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap b/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap
index 653605baa..9b3065cff 100644
--- a/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap
+++ b/app/screens/selector_screen/__snapshots__/selector_screen.test.js.snap
@@ -49,6 +49,7 @@ exports[`SelectorScreen should match snapshot for channels 1`] = `
   </View>
   <CustomList
     data={Array []}
+    isLandscape={false}
     listType="flat"
     loading={false}
     loadingComponent={null}
@@ -139,6 +140,7 @@ exports[`SelectorScreen should match snapshot for channels 2`] = `
   </View>
   <CustomList
     data={Array []}
+    isLandscape={false}
     listType="flat"
     loading={false}
     loadingComponent={null}
@@ -236,6 +238,7 @@ exports[`SelectorScreen should match snapshot for explicit options 1`] = `
         },
       ]
     }
+    isLandscape={false}
     listType="flat"
     loading={false}
     loadingComponent={null}
@@ -326,6 +329,7 @@ exports[`SelectorScreen should match snapshot for searching 1`] = `
   </View>
   <CustomList
     data={Array []}
+    isLandscape={false}
     listType="flat"
     loading={false}
     loadingComponent={null}
@@ -416,6 +420,7 @@ exports[`SelectorScreen should match snapshot for users 1`] = `
   </View>
   <CustomList
     data={Array []}
+    isLandscape={false}
     listType="section"
     loading={false}
     loadingComponent={null}
@@ -506,6 +511,7 @@ exports[`SelectorScreen should match snapshot for users 2`] = `
   </View>
   <CustomList
     data={Array []}
+    isLandscape={false}
     listType="section"
     loading={false}
     loadingComponent={null}
diff --git a/app/screens/settings/advanced_settings/advanced_settings.js b/app/screens/settings/advanced_settings/advanced_settings.js
index b53839b64..4da5576e3 100644
--- a/app/screens/settings/advanced_settings/advanced_settings.js
+++ b/app/screens/settings/advanced_settings/advanced_settings.js
@@ -32,6 +32,7 @@ class AdvancedSettings extends PureComponent {
         }).isRequired,
         intl: intlShape.isRequired,
         theme: PropTypes.object,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     state = {
@@ -104,7 +105,7 @@ class AdvancedSettings extends PureComponent {
             return null;
         }
 
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
         const style = getStyleSheet(theme);
 
         return (
@@ -117,6 +118,7 @@ class AdvancedSettings extends PureComponent {
                     separator={false}
                     showArrow={false}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 <View style={style.divider}/>
                 <SettingsItem
@@ -127,6 +129,7 @@ class AdvancedSettings extends PureComponent {
                     separator={false}
                     showArrow={false}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 <View style={style.divider}/>
             </View>
@@ -134,7 +137,7 @@ class AdvancedSettings extends PureComponent {
     };
 
     render() {
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
         const style = getStyleSheet(theme);
 
         return (
@@ -156,6 +159,7 @@ class AdvancedSettings extends PureComponent {
                         showArrow={false}
                         rightComponent={this.renderCacheFileSize()}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     <View style={style.divider}/>
                     {this.renderSentryDebugOptions()}
diff --git a/app/screens/settings/advanced_settings/index.js b/app/screens/settings/advanced_settings/index.js
index d02580632..0655ea903 100644
--- a/app/screens/settings/advanced_settings/index.js
+++ b/app/screens/settings/advanced_settings/index.js
@@ -6,12 +6,13 @@ import {connect} from 'react-redux';
 
 import {purgeOfflineStore} from 'app/actions/views/root';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
-
+import {isLandscape} from 'app/selectors/device';
 import AdvancedSettings from './advanced_settings';
 
 function mapStateToProps(state) {
     return {
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/clock_display/clock_display.ios.js b/app/screens/settings/clock_display/clock_display.ios.js
index b209ed259..02846c992 100644
--- a/app/screens/settings/clock_display/clock_display.ios.js
+++ b/app/screens/settings/clock_display/clock_display.ios.js
@@ -17,7 +17,7 @@ import ClockDisplayBase from './clock_display_base';
 
 export default class ClockDisplay extends ClockDisplayBase {
     render() {
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
         const {newMilitaryTime} = this.state;
         const style = getStyleSheet(theme);
 
@@ -30,6 +30,7 @@ export default class ClockDisplay extends ClockDisplayBase {
                         footerId={t('user.settings.display.preferTime')}
                         footerDefaultMessage='Select how you prefer time displayed.'
                         theme={theme}
+                        isLandscape={isLandscape}
                     >
                         <SectionItem
                             label={(
@@ -43,8 +44,9 @@ export default class ClockDisplay extends ClockDisplayBase {
                             actionValue='false'
                             selected={newMilitaryTime === 'false'}
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
-                        <View style={style.separator}/>
+                        <View style={style.divider}/>
                         <SectionItem
                             label={(
                                 <FormattedText
@@ -57,6 +59,7 @@ export default class ClockDisplay extends ClockDisplayBase {
                             actionValue='true'
                             selected={newMilitaryTime === 'true'}
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
                     </Section>
                 </View>
@@ -76,5 +79,9 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             flex: 1,
             paddingTop: 35,
         },
+        divider: {
+            backgroundColor: changeOpacity(theme.centerChannelColor, 0.1),
+            height: 1,
+        },
     };
 });
diff --git a/app/screens/settings/clock_display/index.js b/app/screens/settings/clock_display/index.js
index f9a5e0534..0ff012eac 100644
--- a/app/screens/settings/clock_display/index.js
+++ b/app/screens/settings/clock_display/index.js
@@ -8,7 +8,7 @@ import {getTheme, get as getPreference} from 'mattermost-redux/selectors/entitie
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
 import {savePreferences} from 'mattermost-redux/actions/preferences';
 import Preferences from 'mattermost-redux/constants/preferences';
-
+import {isLandscape} from 'app/selectors/device';
 import ClockDisplay from './clock_display';
 
 function mapStateToProps(state) {
@@ -19,6 +19,7 @@ function mapStateToProps(state) {
         userId: currentUserId,
         theme: getTheme(state),
         militaryTime,
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/display_settings/__snapshots__/display_settings.test.js.snap b/app/screens/settings/display_settings/__snapshots__/display_settings.test.js.snap
index 5ad51bbf2..763e89815 100644
--- a/app/screens/settings/display_settings/__snapshots__/display_settings.test.js.snap
+++ b/app/screens/settings/display_settings/__snapshots__/display_settings.test.js.snap
@@ -33,6 +33,7 @@ exports[`DisplaySettings should match snapshot 1`] = `
       iconName="ios-time"
       iconType="ion"
       isDestructor={false}
+      isLandscape={false}
       onPress={[Function]}
       separator={false}
       showArrow={false}
@@ -110,6 +111,7 @@ exports[`DisplaySettings should match snapshot on Tablet devices 1`] = `
       iconName="columns"
       iconType="fontawesome"
       isDestructor={false}
+      isLandscape={false}
       onPress={[Function]}
       separator={true}
       showArrow={false}
@@ -148,6 +150,7 @@ exports[`DisplaySettings should match snapshot on Tablet devices 1`] = `
       iconName="ios-time"
       iconType="ion"
       isDestructor={false}
+      isLandscape={false}
       onPress={[Function]}
       separator={false}
       showArrow={false}
diff --git a/app/screens/settings/display_settings/display_settings.js b/app/screens/settings/display_settings/display_settings.js
index c134f7997..85b77760e 100644
--- a/app/screens/settings/display_settings/display_settings.js
+++ b/app/screens/settings/display_settings/display_settings.js
@@ -27,6 +27,7 @@ export default class DisplaySettings extends PureComponent {
         theme: PropTypes.object.isRequired,
         enableTheme: PropTypes.bool.isRequired,
         enableTimezone: PropTypes.bool.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -92,7 +93,7 @@ export default class DisplaySettings extends PureComponent {
     });
 
     render() {
-        const {theme, enableTimezone, enableTheme} = this.props;
+        const {theme, enableTimezone, enableTheme, isLandscape} = this.props;
         const {showClockDisplaySettings} = this.state;
         const style = getStyleSheet(theme);
 
@@ -120,6 +121,7 @@ export default class DisplaySettings extends PureComponent {
                     separator={false}
                     showArrow={false}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
             );
         }
@@ -136,6 +138,7 @@ export default class DisplaySettings extends PureComponent {
                     separator={true}
                     showArrow={false}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
             );
         }
@@ -156,6 +159,7 @@ export default class DisplaySettings extends PureComponent {
                             separator={true}
                             showArrow={false}
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
                     )}
                     <SettingsItem
@@ -167,6 +171,7 @@ export default class DisplaySettings extends PureComponent {
                         separator={disableClockDisplaySeparator}
                         showArrow={false}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     {timezoneOption}
                     <View style={style.divider}/>
diff --git a/app/screens/settings/display_settings/display_settings.test.js b/app/screens/settings/display_settings/display_settings.test.js
index 8f485108d..aaff3296f 100644
--- a/app/screens/settings/display_settings/display_settings.test.js
+++ b/app/screens/settings/display_settings/display_settings.test.js
@@ -23,6 +23,7 @@ describe('DisplaySettings', () => {
         enableTheme: false,
         enableTimezone: false,
         componentId: 'component-id',
+        isLandscape: false,
     };
 
     test('should match snapshot', () => {
diff --git a/app/screens/settings/display_settings/index.js b/app/screens/settings/display_settings/index.js
index ab325072a..3eb65215e 100644
--- a/app/screens/settings/display_settings/index.js
+++ b/app/screens/settings/display_settings/index.js
@@ -10,7 +10,7 @@ import {isTimezoneEnabled} from 'mattermost-redux/selectors/entities/timezone';
 import {applyTheme, goToScreen} from 'app/actions/navigation';
 import {getAllowedThemes} from 'app/selectors/theme';
 import {isThemeSwitchingEnabled} from 'app/utils/theme';
-
+import {isLandscape} from 'app/selectors/device';
 import DisplaySettings from './display_settings';
 
 function mapStateToProps(state) {
@@ -21,6 +21,7 @@ function mapStateToProps(state) {
         enableTheme,
         enableTimezone,
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/general/index.js b/app/screens/settings/general/index.js
index 146d2b866..1aa52bbb8 100644
--- a/app/screens/settings/general/index.js
+++ b/app/screens/settings/general/index.js
@@ -11,6 +11,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
 import {applyTheme, goToScreen, dismissModal} from 'app/actions/navigation';
 import {purgeOfflineStore} from 'app/actions/views/root';
+import {isLandscape} from 'app/selectors/device';
 import {removeProtocol} from 'app/utils/url';
 
 import Settings from './settings';
@@ -26,6 +27,7 @@ function mapStateToProps(state) {
         currentTeamId: state.entities.teams.currentTeamId,
         currentUrl: removeProtocol(getCurrentUrl(state)),
         joinableTeams: getJoinableTeams(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/general/settings.js b/app/screens/settings/general/settings.js
index 65f18e67b..3377d0754 100644
--- a/app/screens/settings/general/settings.js
+++ b/app/screens/settings/general/settings.js
@@ -40,6 +40,7 @@ class Settings extends PureComponent {
         intl: intlShape.isRequired,
         joinableTeams: PropTypes.array.isRequired,
         theme: PropTypes.object,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -169,7 +170,7 @@ class Settings extends PureComponent {
     });
 
     render() {
-        const {config, joinableTeams, theme} = this.props;
+        const {config, joinableTeams, theme, isLandscape} = this.props;
         const style = getStyleSheet(theme);
         const showTeams = joinableTeams.length > 0;
         const showHelp = isValidUrl(config.HelpLink);
@@ -191,6 +192,8 @@ class Settings extends PureComponent {
                         onPress={this.goToNotifications}
                         showArrow={showArrow}
                         theme={theme}
+                        separator={true}
+                        isLandscape={isLandscape}
                     />
                     <SettingsItem
                         defaultMessage='Display'
@@ -200,28 +203,38 @@ class Settings extends PureComponent {
                         onPress={this.goToDisplaySettings}
                         showArrow={showArrow}
                         theme={theme}
+                        separator={true}
+                        isLandscape={isLandscape}
                     />
                     {showTeams &&
-                    <SettingsItem
-                        defaultMessage='Open teams you can join'
-                        i18nId={t('mobile.select_team.join_open')}
-                        iconName='list'
-                        iconType='foundation'
-                        onPress={this.goToSelectTeam}
-                        showArrow={showArrow}
-                        theme={theme}
-                    />
+                    <React.Fragment>
+                        <SettingsItem
+                            defaultMessage='Open teams you can join'
+                            i18nId={t('mobile.select_team.join_open')}
+                            iconName='list'
+                            iconType='foundation'
+                            onPress={this.goToSelectTeam}
+                            showArrow={showArrow}
+                            theme={theme}
+                            separator={true}
+                            isLandscape={isLandscape}
+                        />
+                    </React.Fragment>
                     }
                     {showHelp &&
-                    <SettingsItem
-                        defaultMessage='Help'
-                        i18nId={t('mobile.help.title')}
-                        iconName='md-help'
-                        iconType='ion'
-                        onPress={this.openHelp}
-                        showArrow={showArrow}
-                        theme={theme}
-                    />
+                    <React.Fragment>
+                        <SettingsItem
+                            defaultMessage='Help'
+                            i18nId={t('mobile.help.title')}
+                            iconName='md-help'
+                            iconType='ion'
+                            onPress={this.openHelp}
+                            showArrow={showArrow}
+                            theme={theme}
+                            separator={true}
+                            isLandscape={isLandscape}
+                        />
+                    </React.Fragment>
                     }
                     <SettingsItem
                         defaultMessage='Report a Problem'
@@ -231,6 +244,8 @@ class Settings extends PureComponent {
                         onPress={this.openErrorEmail}
                         showArrow={showArrow}
                         theme={theme}
+                        separator={true}
+                        isLandscape={isLandscape}
                     />
                     <SettingsItem
                         defaultMessage='Advanced Settings'
@@ -240,17 +255,23 @@ class Settings extends PureComponent {
                         onPress={this.goToAdvancedSettings}
                         showArrow={showArrow}
                         theme={theme}
+                        separator={true}
+                        isLandscape={isLandscape}
                     />
                     {LocalConfig.EnableMobileClientUpgrade && LocalConfig.EnableMobileClientUpgradeUserSetting &&
-                    <SettingsItem
-                        defaultMessage='Check for Upgrade'
-                        i18nId={t('mobile.settings.modal.check_for_upgrade')}
-                        iconName='update'
-                        iconType='material'
-                        onPress={this.goToClientUpgrade}
-                        showArrow={showArrow}
-                        theme={theme}
-                    />
+                    <React.Fragment>
+                        <SettingsItem
+                            defaultMessage='Check for Upgrade'
+                            i18nId={t('mobile.settings.modal.check_for_upgrade')}
+                            iconName='update'
+                            iconType='material'
+                            onPress={this.goToClientUpgrade}
+                            showArrow={showArrow}
+                            theme={theme}
+                            separator={true}
+                            isLandscape={isLandscape}
+                        />
+                    </React.Fragment>
                     }
                     <SettingsItem
                         defaultMessage='About {appTitle}'
@@ -262,6 +283,7 @@ class Settings extends PureComponent {
                         separator={false}
                         showArrow={showArrow}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     <View style={style.divider}/>
                 </ScrollView>
diff --git a/app/screens/settings/notification_settings/index.js b/app/screens/settings/notification_settings/index.js
index 0196b84d1..4c98954eb 100644
--- a/app/screens/settings/notification_settings/index.js
+++ b/app/screens/settings/notification_settings/index.js
@@ -8,7 +8,7 @@ import {getCurrentUser, getStatusForUserId} from 'mattermost-redux/selectors/ent
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getMyPreferences, getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {isMinimumServerVersion} from 'mattermost-redux/utils/helpers';
-
+import {isLandscape} from 'app/selectors/device';
 import {updateMe} from 'mattermost-redux/actions/users';
 
 import {goToScreen} from 'app/actions/navigation';
@@ -30,6 +30,7 @@ function mapStateToProps(state) {
         updateMeRequest: state.requests.users.updateMe,
         theme: getTheme(state),
         enableAutoResponder,
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/notification_settings/notification_settings.js b/app/screens/settings/notification_settings/notification_settings.js
index 47bd57e12..c15a1bef7 100644
--- a/app/screens/settings/notification_settings/notification_settings.js
+++ b/app/screens/settings/notification_settings/notification_settings.js
@@ -35,6 +35,7 @@ class NotificationSettings extends PureComponent {
         updateMeRequest: PropTypes.object.isRequired,
         currentUserStatus: PropTypes.string.isRequired,
         enableAutoResponder: PropTypes.bool.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     componentWillReceiveProps(nextProps) {
@@ -175,7 +176,7 @@ class NotificationSettings extends PureComponent {
     };
 
     render() {
-        const {theme, enableAutoResponder} = this.props;
+        const {theme, enableAutoResponder, isLandscape} = this.props;
         const style = getStyleSheet(theme);
         const showArrow = Platform.OS === 'ios';
 
@@ -192,6 +193,7 @@ class NotificationSettings extends PureComponent {
                     separator={false}
                     showArrow={showArrow}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
             );
         }
@@ -213,6 +215,7 @@ class NotificationSettings extends PureComponent {
                         separator={true}
                         showArrow={showArrow}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     <SettingsItem
                         defaultMessage='Mobile'
@@ -223,6 +226,7 @@ class NotificationSettings extends PureComponent {
                         separator={true}
                         showArrow={showArrow}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     <SettingsItem
                         defaultMessage='Email'
@@ -233,6 +237,7 @@ class NotificationSettings extends PureComponent {
                         separator={showEmailSeparator}
                         showArrow={showArrow}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     {autoResponder}
                     <View style={style.divider}/>
diff --git a/app/screens/settings/notification_settings_auto_responder/index.js b/app/screens/settings/notification_settings_auto_responder/index.js
index 41258439d..e8a7105ea 100644
--- a/app/screens/settings/notification_settings_auto_responder/index.js
+++ b/app/screens/settings/notification_settings_auto_responder/index.js
@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getCurrentUserId, getStatusForUserId} from 'mattermost-redux/selectors/entities/users';
-
+import {isLandscape} from 'app/selectors/device';
 import NotificationSettingsAutoResponder from './notification_settings_auto_responder';
 
 function mapStateToProps(state) {
@@ -15,6 +15,7 @@ function mapStateToProps(state) {
     return {
         theme: getTheme(state),
         currentUserStatus,
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/notification_settings_auto_responder/notification_settings_auto_responder.js b/app/screens/settings/notification_settings_auto_responder/notification_settings_auto_responder.js
index 9bf28d12d..84c6c9e45 100644
--- a/app/screens/settings/notification_settings_auto_responder/notification_settings_auto_responder.js
+++ b/app/screens/settings/notification_settings_auto_responder/notification_settings_auto_responder.js
@@ -10,7 +10,7 @@ import {
 import {intlShape} from 'react-intl';
 
 import {General} from 'mattermost-redux/constants';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import FormattedText from 'app/components/formatted_text';
 import StatusBar from 'app/components/status_bar';
 import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder';
@@ -27,6 +27,7 @@ export default class NotificationSettingsAutoResponder extends PureComponent {
         onBack: PropTypes.func.isRequired,
         theme: PropTypes.object.isRequired,
         currentUserStatus: PropTypes.string.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -80,7 +81,7 @@ export default class NotificationSettingsAutoResponder extends PureComponent {
     };
 
     render() {
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
         const {
             auto_responder_active: autoResponderActive,
             auto_responder_message: autoResponderMessage,
@@ -101,6 +102,7 @@ export default class NotificationSettingsAutoResponder extends PureComponent {
                     <Section
                         disableHeader={true}
                         theme={theme}
+                        isLandscape={isLandscape}
                     >
                         <SectionItem
                             label={autoResponderActiveLabel}
@@ -108,6 +110,7 @@ export default class NotificationSettingsAutoResponder extends PureComponent {
                             actionType='toggle'
                             selected={autoResponderActive === 'true'}
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
                     </Section>
                     {autoResponderActive === 'true' && (
@@ -115,6 +118,7 @@ export default class NotificationSettingsAutoResponder extends PureComponent {
                             headerId={t('mobile.notification_settings.auto_responder.message_title')}
                             headerDefaultMessage='CUSTOM MESSAGE'
                             theme={theme}
+                            isLandscape={isLandscape}
                         >
                             <View style={style.inputContainer}>
                                 <TextInputWithLocalizedPlaceholder
@@ -139,7 +143,7 @@ export default class NotificationSettingsAutoResponder extends PureComponent {
                     <FormattedText
                         id={'mobile.notification_settings.auto_responder.footer_message'}
                         defaultMessage={'Set a custom message that will be automatically sent in response to Direct Messages. Mentions in Public and Private Channels will not trigger the automated reply. Enabling Automatic Replies sets your status to Out of Office and disables email and push notifications.'}
-                        style={style.footer}
+                        style={[style.footer, padding(isLandscape)]}
                     />
                 </View>
             </View>
diff --git a/app/screens/settings/notification_settings_email/__snapshots__/notification_settings_email.ios.test.js.snap b/app/screens/settings/notification_settings_email/__snapshots__/notification_settings_email.ios.test.js.snap
index d7c64d230..6b4777560 100644
--- a/app/screens/settings/notification_settings_email/__snapshots__/notification_settings_email.ios.test.js.snap
+++ b/app/screens/settings/notification_settings_email/__snapshots__/notification_settings_email.ios.test.js.snap
@@ -12,6 +12,7 @@ exports[`NotificationSettingsEmailIos should match snapshot, renderEmailSection
   }
   headerDefaultMessage="SEND EMAIL NOTIFICATIONS"
   headerId="mobile.notification_settings.email.send"
+  isLandscape={false}
   theme={
     Object {
       "awayIndicator": "#ffbc42",
@@ -46,6 +47,7 @@ exports[`NotificationSettingsEmailIos should match snapshot, renderEmailSection
       action={[Function]}
       actionType="select"
       actionValue="30"
+      isLandscape={false}
       label={
         <FormattedText
           defaultMessage="Immediately"
@@ -96,6 +98,7 @@ exports[`NotificationSettingsEmailIos should match snapshot, renderEmailSection
       action={[Function]}
       actionType="select"
       actionValue="0"
+      isLandscape={false}
       label={
         <FormattedText
           defaultMessage="Never"
diff --git a/app/screens/settings/notification_settings_email/index.js b/app/screens/settings/notification_settings_email/index.js
index bb32301c4..2debe732c 100644
--- a/app/screens/settings/notification_settings_email/index.js
+++ b/app/screens/settings/notification_settings_email/index.js
@@ -14,7 +14,7 @@ import {
     get as getPreference,
     getTheme,
 } from 'mattermost-redux/selectors/entities/preferences';
-
+import {isLandscape} from 'app/selectors/device';
 import NotificationSettingsEmail from './notification_settings_email';
 
 function mapStateToProps(state) {
@@ -34,6 +34,7 @@ function mapStateToProps(state) {
         sendEmailNotifications,
         siteName: config.siteName || '',
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/notification_settings_email/notification_settings_email.ios.js b/app/screens/settings/notification_settings_email/notification_settings_email.ios.js
index 70d71c6bb..d426fa9df 100644
--- a/app/screens/settings/notification_settings_email/notification_settings_email.ios.js
+++ b/app/screens/settings/notification_settings_email/notification_settings_email.ios.js
@@ -7,14 +7,13 @@ import {
     ScrollView,
     View,
 } from 'react-native';
-
 import {Preferences} from 'mattermost-redux/constants';
 
 import FormattedText from 'app/components/formatted_text';
 import StatusBar from 'app/components/status_bar';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 import {t} from 'app/utils/i18n';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import Section from 'app/screens/settings/section';
 import SectionItem from 'app/screens/settings/section_item';
 
@@ -27,6 +26,7 @@ class NotificationSettingsEmailIos extends NotificationSettingsEmailBase {
             sendEmailNotifications,
             siteName,
             theme,
+            isLandscape,
         } = this.props;
         const {newInterval} = this.state;
         const style = getStyleSheet(theme);
@@ -40,6 +40,7 @@ class NotificationSettingsEmailIos extends NotificationSettingsEmailBase {
                 footerValues={{siteName}}
                 disableFooter={!sendEmailNotifications}
                 theme={theme}
+                isLandscape={isLandscape}
             >
                 {sendEmailNotifications &&
                 <View>
@@ -55,6 +56,7 @@ class NotificationSettingsEmailIos extends NotificationSettingsEmailBase {
                         actionValue={Preferences.INTERVAL_IMMEDIATE.toString()}
                         selected={newInterval === Preferences.INTERVAL_IMMEDIATE.toString()}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     <View style={style.separator}/>
                     {enableEmailBatching &&
@@ -71,6 +73,7 @@ class NotificationSettingsEmailIos extends NotificationSettingsEmailBase {
                             actionValue={Preferences.INTERVAL_FIFTEEN_MINUTES.toString()}
                             selected={newInterval === Preferences.INTERVAL_FIFTEEN_MINUTES.toString()}
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
                         <View style={style.separator}/>
                         <SectionItem
@@ -85,6 +88,7 @@ class NotificationSettingsEmailIos extends NotificationSettingsEmailBase {
                             actionValue={Preferences.INTERVAL_HOUR.toString()}
                             selected={newInterval === Preferences.INTERVAL_HOUR.toString()}
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
                         <View style={style.separator}/>
                     </View>
@@ -101,6 +105,7 @@ class NotificationSettingsEmailIos extends NotificationSettingsEmailBase {
                         actionValue={Preferences.INTERVAL_NEVER.toString()}
                         selected={newInterval === Preferences.INTERVAL_NEVER.toString()}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                 </View>
                 }
@@ -108,7 +113,7 @@ class NotificationSettingsEmailIos extends NotificationSettingsEmailBase {
                 <FormattedText
                     id='user.settings.general.emailHelp2'
                     defaultMessage='Email has been disabled by your System Administrator. No notification emails will be sent until it is enabled.'
-                    style={style.disabled}
+                    style={[style.disabled, padding(isLandscape)]}
                 />
                 }
             </Section>
diff --git a/app/screens/settings/notification_settings_email/notification_settings_email.ios.test.js b/app/screens/settings/notification_settings_email/notification_settings_email.ios.test.js
index 5c5cee410..1fd757a61 100644
--- a/app/screens/settings/notification_settings_email/notification_settings_email.ios.test.js
+++ b/app/screens/settings/notification_settings_email/notification_settings_email.ios.test.js
@@ -37,6 +37,7 @@ describe('NotificationSettingsEmailIos', () => {
         siteName: 'Mattermost',
         theme: Preferences.THEMES.default,
         componentId: 'component-id',
+        isLandscape: false,
     };
 
     test('should match snapshot, renderEmailSection', () => {
diff --git a/app/screens/settings/notification_settings_mentions/index.js b/app/screens/settings/notification_settings_mentions/index.js
index 5a4083b5f..c0fbfb402 100644
--- a/app/screens/settings/notification_settings_mentions/index.js
+++ b/app/screens/settings/notification_settings_mentions/index.js
@@ -5,7 +5,7 @@ import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
-
+import {isLandscape} from 'app/selectors/device';
 import {goToScreen} from 'app/actions/navigation';
 
 import NotificationSettingsMentions from './notification_settings_mentions';
@@ -13,6 +13,7 @@ import NotificationSettingsMentions from './notification_settings_mentions';
 function mapStateToProps(state) {
     return {
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/notification_settings_mentions/notification_settings_mentions.ios.js b/app/screens/settings/notification_settings_mentions/notification_settings_mentions.ios.js
index 681996552..39a8cd97a 100644
--- a/app/screens/settings/notification_settings_mentions/notification_settings_mentions.ios.js
+++ b/app/screens/settings/notification_settings_mentions/notification_settings_mentions.ios.js
@@ -8,7 +8,6 @@ import {
     View,
 } from 'react-native';
 import {injectIntl} from 'react-intl';
-
 import FormattedText from 'app/components/formatted_text';
 import StatusBar from 'app/components/status_bar';
 import Section from 'app/screens/settings/section';
@@ -34,7 +33,7 @@ class NotificationSettingsMentionsIos extends NotificationSettingsMentionsBase {
     };
 
     renderMentionSection(style) {
-        const {currentUser, theme} = this.props;
+        const {currentUser, theme, isLandscape} = this.props;
 
         let mentionKeysComponent;
         if (this.state.mention_keys) {
@@ -53,6 +52,7 @@ class NotificationSettingsMentionsIos extends NotificationSettingsMentionsBase {
                 headerId={t('mobile.notification_settings_mentions.wordsTrigger')}
                 headerDefaultMessage='WORDS THAT TRIGGER MENTIONS'
                 theme={theme}
+                isLandscape={isLandscape}
             >
                 {currentUser.first_name?.length > 0 &&
                 <View>
@@ -72,6 +72,7 @@ class NotificationSettingsMentionsIos extends NotificationSettingsMentionsBase {
                         actionType='toggle'
                         selected={this.state.first_name === 'true'}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     <View style={style.separator}/>
                 </View>
@@ -92,6 +93,7 @@ class NotificationSettingsMentionsIos extends NotificationSettingsMentionsBase {
                     action={this.toggleUsernameMention}
                     actionType='toggle'
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 <View style={style.separator}/>
                 <SectionItem
@@ -110,6 +112,7 @@ class NotificationSettingsMentionsIos extends NotificationSettingsMentionsBase {
                     actionType='toggle'
                     selected={this.state.channel === 'true'}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 <View style={style.separator}/>
                 <SectionItem
@@ -123,19 +126,21 @@ class NotificationSettingsMentionsIos extends NotificationSettingsMentionsBase {
                     action={this.goToNotificationSettingsMentionKeywords}
                     actionType='arrow'
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
             </Section>
         );
     }
 
     renderReplySection(style) {
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
 
         return (
             <Section
                 headerId={t('mobile.account_notifications.reply.header')}
                 headerDefaultMessage='SEND REPLY NOTIFICATIONS FOR'
                 theme={theme}
+                isLandscape={isLandscape}
             >
                 <SectionItem
                     label={(
@@ -149,6 +154,7 @@ class NotificationSettingsMentionsIos extends NotificationSettingsMentionsBase {
                     actionValue='any'
                     selected={this.state.comments === 'any'}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 <View style={style.separator}/>
                 <SectionItem
@@ -163,6 +169,7 @@ class NotificationSettingsMentionsIos extends NotificationSettingsMentionsBase {
                     actionValue='root'
                     selected={this.state.comments === 'root'}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 <View style={style.separator}/>
                 <SectionItem
@@ -177,6 +184,7 @@ class NotificationSettingsMentionsIos extends NotificationSettingsMentionsBase {
                     actionValue='never'
                     selected={this.state.comments === 'never'}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
             </Section>
         );
diff --git a/app/screens/settings/notification_settings_mentions_keywords/index.js b/app/screens/settings/notification_settings_mentions_keywords/index.js
index f3a886bb0..767384d74 100644
--- a/app/screens/settings/notification_settings_mentions_keywords/index.js
+++ b/app/screens/settings/notification_settings_mentions_keywords/index.js
@@ -5,7 +5,7 @@ import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
-
+import {isLandscape} from 'app/selectors/device';
 import {popTopScreen} from 'app/actions/navigation';
 
 import NotificationSettingsMentionsKeywords from './notification_settings_mentions_keywords';
@@ -13,6 +13,7 @@ import NotificationSettingsMentionsKeywords from './notification_settings_mentio
 function mapStateToProps(state) {
     return {
         theme: getTheme(state),
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js
index f6ab36b92..9173336ce 100644
--- a/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js
+++ b/app/screens/settings/notification_settings_mentions_keywords/notification_settings_mentions_keywords.js
@@ -4,7 +4,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {ScrollView, View} from 'react-native';
 import {Navigation} from 'react-native-navigation';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import FormattedText from 'app/components/formatted_text';
 import StatusBar from 'app/components/status_bar';
 import TextInputWithLocalizedPlaceholder from 'app/components/text_input_with_localized_placeholder';
@@ -19,6 +19,7 @@ export default class NotificationSettingsMentionsKeywords extends PureComponent
         keywords: PropTypes.string,
         onBack: PropTypes.func.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     constructor(props) {
@@ -56,11 +57,10 @@ export default class NotificationSettingsMentionsKeywords extends PureComponent
     }
 
     render() {
-        const {theme} = this.props;
+        const {theme, isLandscape} = this.props;
         const {keywords} = this.state;
 
         const style = getStyleSheet(theme);
-
         return (
             <View style={style.container}>
                 <StatusBar/>
@@ -78,7 +78,7 @@ export default class NotificationSettingsMentionsKeywords extends PureComponent
                             onSubmitEditing={this.handleSubmit}
                             multiline={true}
                             numberOfLines={1}
-                            style={style.input}
+                            style={[style.input, padding(isLandscape)]}
                             autoCapitalize='none'
                             autoCorrect={false}
                             placeholder={{id: 'mobile.notification_settings_mentions.keywordsDescription', defaultMessage: 'Other words that trigger a mention'}}
@@ -86,7 +86,7 @@ export default class NotificationSettingsMentionsKeywords extends PureComponent
                             returnKeyType='done'
                         />
                     </View>
-                    <View style={style.helpContainer}>
+                    <View style={[style.helpContainer, padding(isLandscape)]}>
                         <FormattedText
                             id='mobile.notification_settings_mentions.keywordsHelp'
                             defaultMessage='Keywords are non-case sensitive and should be separated by a comma.'
@@ -120,7 +120,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             color: theme.centerChannelColor,
             fontSize: 15,
             height: 150,
-            paddingHorizontal: 15,
             paddingVertical: 10,
         },
         helpContainer: {
diff --git a/app/screens/settings/notification_settings_mobile/index.js b/app/screens/settings/notification_settings_mobile/index.js
index f7087364e..a3b0603fa 100644
--- a/app/screens/settings/notification_settings_mobile/index.js
+++ b/app/screens/settings/notification_settings_mobile/index.js
@@ -7,7 +7,7 @@ import {connect} from 'react-redux';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
-
+import {isLandscape} from 'app/selectors/device';
 import {updateMe} from 'mattermost-redux/actions/users';
 
 import NotificationSettingsMobile from './notification_settings_mobile';
@@ -23,6 +23,7 @@ function mapStateToProps(state) {
         theme,
         updateMeRequest,
         currentUser,
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/notification_settings_mobile/notification_settings_mobile.ios.js b/app/screens/settings/notification_settings_mobile/notification_settings_mobile.ios.js
index 2c897b2c8..9825058db 100644
--- a/app/screens/settings/notification_settings_mobile/notification_settings_mobile.ios.js
+++ b/app/screens/settings/notification_settings_mobile/notification_settings_mobile.ios.js
@@ -7,12 +7,12 @@ import {
     ScrollView,
     View,
 } from 'react-native';
-
+import SafeAreaView from 'app/components/safe_area_view';
 import FormattedText from 'app/components/formatted_text';
 import StatusBar from 'app/components/status_bar';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 import {t} from 'app/utils/i18n';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import Section from 'app/screens/settings/section';
 import SectionItem from 'app/screens/settings/section_item';
 
@@ -20,7 +20,7 @@ import NotificationSettingsMobileBase from './notification_settings_mobile_base'
 
 class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
     renderMobilePushSection(style) {
-        const {config, theme} = this.props;
+        const {config, theme, isLandscape} = this.props;
 
         const pushNotificationsEnabled = config.SendPushNotifications === 'true';
         return (
@@ -28,6 +28,7 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
                 headerId={t('mobile.notification_settings_mobile.push_activity')}
                 headerDefaultMessage='SEND NOTIFICATIONS'
                 theme={theme}
+                isLandscape={isLandscape}
             >
                 {pushNotificationsEnabled &&
                 <View>
@@ -43,6 +44,7 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
                         actionValue='all'
                         selected={this.state.push === 'all'}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     <View style={style.separator}/>
                     <SectionItem
@@ -57,6 +59,7 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
                         actionValue='mention'
                         selected={this.state.push === 'mention'}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     <View style={style.separator}/>
                     <SectionItem
@@ -71,6 +74,7 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
                         actionValue='none'
                         selected={this.state.push === 'none'}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                 </View>
                 }
@@ -78,7 +82,7 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
                 <FormattedText
                     id='user.settings.push_notification.disabled_long'
                     defaultMessage='Push notifications for mobile devices have been disabled by your System Administrator.'
-                    style={style.disabled}
+                    style={[style.disabled, padding(isLandscape)]}
                 />
                 }
             </Section>
@@ -86,7 +90,7 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
     }
 
     renderMobilePushStatusSection(style) {
-        const {config, theme} = this.props;
+        const {config, theme, isLandscape} = this.props;
 
         const showSection = config.SendPushNotifications === 'true' && this.state.push !== 'none';
         if (!showSection) {
@@ -98,6 +102,7 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
                 headerId={t('mobile.notification_settings_mobile.push_status')}
                 headerDefaultMessage='TRIGGER PUSH NOTIFICATIONS WHEN'
                 theme={theme}
+                isLandscape={isLandscape}
             >
                 <SectionItem
                     label={(
@@ -111,6 +116,7 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
                     actionValue='online'
                     selected={this.state.push_status === 'online'}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 <View style={style.separator}/>
                 <SectionItem
@@ -125,6 +131,7 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
                     actionValue='away'
                     selected={this.state.push_status === 'away'}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
                 <View style={style.separator}/>
                 <SectionItem
@@ -139,6 +146,7 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
                     actionValue='offline'
                     selected={this.state.push_status === 'offline'}
                     theme={theme}
+                    isLandscape={isLandscape}
                 />
             </Section>
         );
@@ -149,17 +157,19 @@ class NotificationSettingsMobileIos extends NotificationSettingsMobileBase {
         const style = getStyleSheet(theme);
 
         return (
-            <View style={style.container}>
-                <StatusBar/>
-                <ScrollView
-                    style={style.scrollView}
-                    contentContainerStyle={style.scrollViewContent}
-                    alwaysBounceVertical={false}
-                >
-                    {this.renderMobilePushSection(style)}
-                    {this.renderMobilePushStatusSection(style)}
-                </ScrollView>
-            </View>
+            <SafeAreaView>
+                <View style={style.container}>
+                    <StatusBar/>
+                    <ScrollView
+                        style={style.scrollView}
+                        contentContainerStyle={style.scrollViewContent}
+                        alwaysBounceVertical={false}
+                    >
+                        {this.renderMobilePushSection(style)}
+                        {this.renderMobilePushStatusSection(style)}
+                    </ScrollView>
+                </View>
+            </SafeAreaView>
         );
     }
 }
diff --git a/app/screens/settings/section.js b/app/screens/settings/section.js
index bafbf5056..b132af8d4 100644
--- a/app/screens/settings/section.js
+++ b/app/screens/settings/section.js
@@ -9,6 +9,7 @@ import {
 
 import FormattedText from 'app/components/formatted_text';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {marginHorizontal as margin} from 'app/components/safe_area_view/iphone_x_spacing';
 
 function section(props) {
     const {
@@ -22,6 +23,7 @@ function section(props) {
         headerId,
         headerValues,
         theme,
+        isLandscape,
     } = props;
 
     const style = getStyleSheet(theme);
@@ -33,7 +35,7 @@ function section(props) {
                     id={headerId}
                     defaultMessage={headerDefaultMessage}
                     values={headerValues}
-                    style={style.header}
+                    style={[style.header, margin(isLandscape)]}
                 />
             }
             <View style={style.items}>
@@ -44,7 +46,7 @@ function section(props) {
                     id={footerId}
                     defaultMessage={footerDefaultMessage}
                     values={footerValues}
-                    style={style.footer}
+                    style={[style.footer, margin(isLandscape)]}
                 />
             }
         </View>
@@ -62,6 +64,7 @@ section.propTypes = {
     headerId: PropTypes.string,
     headerValues: PropTypes.object,
     theme: PropTypes.object.isRequired,
+    isLandscape: PropTypes.bool.isRequired,
 };
 
 const getStyleSheet = makeStyleSheetFromTheme((theme) => {
@@ -83,7 +86,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             borderBottomColor: changeOpacity(theme.centerChannelColor, 0.1),
         },
         footer: {
-            marginHorizontal: 15,
             marginTop: 10,
             fontSize: 12,
             color: changeOpacity(theme.centerChannelColor, 0.5),
diff --git a/app/screens/settings/section_item.js b/app/screens/settings/section_item.js
index 37707f785..2bb81037e 100644
--- a/app/screens/settings/section_item.js
+++ b/app/screens/settings/section_item.js
@@ -9,7 +9,7 @@ import {
     View,
 } from 'react-native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import CheckMark from 'app/components/checkmark';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 
@@ -29,6 +29,7 @@ function sectionItem(props) {
         theme,
         selected,
         description,
+        isLandscape,
     } = props;
 
     const style = getStyleSheet(theme);
@@ -72,7 +73,7 @@ function sectionItem(props) {
     }
 
     const component = (
-        <View style={style.container}>
+        <View style={[style.container, padding(isLandscape)]}>
             <View style={description ? style.doubleContainer : style.singleContainer}>
                 {labelComponent}
                 {descriptionComponent}
diff --git a/app/screens/settings/settings_item/index.js b/app/screens/settings/settings_item/index.js
index c5a952bd7..28d9ed73a 100644
--- a/app/screens/settings/settings_item/index.js
+++ b/app/screens/settings/settings_item/index.js
@@ -5,7 +5,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {Text, TouchableOpacity, View} from 'react-native';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
-
+import {paddingRight, paddingLeft} from 'app/components/safe_area_view/iphone_x_spacing';
 import FormattedText from 'app/components/formatted_text';
 import VectorIcon from 'app/components/vector_icon.js';
 
@@ -25,11 +25,13 @@ export default class SettingsItem extends PureComponent {
         separator: PropTypes.bool,
         showArrow: PropTypes.bool,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
         isDestructor: false,
         separator: true,
+        isLandscape: false,
     };
 
     renderText = () => {
@@ -76,6 +78,7 @@ export default class SettingsItem extends PureComponent {
             separator,
             showArrow,
             theme,
+            isLandscape,
         } = this.props;
         const style = getStyleSheet(theme);
 
@@ -112,14 +115,14 @@ export default class SettingsItem extends PureComponent {
             <TouchableOpacity
                 onPress={onPress}
             >
-                <View style={style.container}>
+                <View style={[style.container, paddingLeft(isLandscape)]}>
                     {icon &&
                     <View style={style.iconContainer}>
                         {icon}
                     </View>
                     }
                     <View style={style.wrapper}>
-                        <View style={style.labelContainer}>
+                        <View style={[style.labelContainer, paddingRight(isLandscape)]}>
                             {this.renderText()}
                             {Boolean(additionalComponent) &&
                             <View style={style.arrowContainer}>
diff --git a/app/screens/settings/settings_item/style.ios.js b/app/screens/settings/settings_item/style.ios.js
index bebbcfe96..65513be77 100644
--- a/app/screens/settings/settings_item/style.ios.js
+++ b/app/screens/settings/settings_item/style.ios.js
@@ -57,5 +57,8 @@ export default makeStyleSheetFromTheme((theme) => {
         destructor: {
             color: theme.errorTextColor,
         },
+        safeAreaView: {
+            backgroundColor: 'white',
+        },
     };
 });
diff --git a/app/screens/settings/sidebar/__snapshots__/sidebar.test.js.snap b/app/screens/settings/sidebar/__snapshots__/sidebar.test.js.snap
index 861ccb1f1..836af5ec8 100644
--- a/app/screens/settings/sidebar/__snapshots__/sidebar.test.js.snap
+++ b/app/screens/settings/sidebar/__snapshots__/sidebar.test.js.snap
@@ -23,6 +23,7 @@ exports[`SidebarSettings should match, full snapshot 2`] = `
   >
     <section
       disableHeader={true}
+      isLandscape={false}
       theme={
         Object {
           "awayIndicator": "#ffbc42",
@@ -69,6 +70,7 @@ exports[`SidebarSettings should match, full snapshot 2`] = `
             id="mobile.sidebar_settings.permanent_description"
           />
         }
+        isLandscape={false}
         label={
           <FormattedText
             defaultMessage="Permanent Sidebar"
diff --git a/app/screens/settings/sidebar/index.js b/app/screens/settings/sidebar/index.js
index 299d0d402..1455b103a 100644
--- a/app/screens/settings/sidebar/index.js
+++ b/app/screens/settings/sidebar/index.js
@@ -22,6 +22,7 @@ import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 export default class SidebarSettings extends PureComponent {
     static propTypes = {
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -52,6 +53,7 @@ export default class SidebarSettings extends PureComponent {
 
         const {
             theme,
+            isLandscape,
         } = this.props;
         const {enabled} = this.state;
         const style = getStyleSheet(theme);
@@ -63,6 +65,7 @@ export default class SidebarSettings extends PureComponent {
                     <Section
                         disableHeader={true}
                         theme={theme}
+                        isLandscape={isLandscape}
                     >
                         <View style={style.divider}/>
                         <SectionItem
@@ -82,6 +85,7 @@ export default class SidebarSettings extends PureComponent {
                             actionType='toggle'
                             selected={enabled}
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
                         <View style={style.divider}/>
                     </Section>
diff --git a/app/screens/settings/sidebar/sidebar.test.js b/app/screens/settings/sidebar/sidebar.test.js
index 96f85384d..2acf53742 100644
--- a/app/screens/settings/sidebar/sidebar.test.js
+++ b/app/screens/settings/sidebar/sidebar.test.js
@@ -18,6 +18,7 @@ jest.mock('app/mattermost_managed', () => ({
 describe('SidebarSettings', () => {
     const baseProps = {
         theme: Preferences.THEMES.default,
+        isLandscape: false,
     };
 
     test('should match, full snapshot', async () => {
diff --git a/app/screens/settings/timezone/index.js b/app/screens/settings/timezone/index.js
index 8b015bc5a..a27919eda 100644
--- a/app/screens/settings/timezone/index.js
+++ b/app/screens/settings/timezone/index.js
@@ -9,7 +9,7 @@ import {getSupportedTimezones as getTimezones} from 'mattermost-redux/selectors/
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getUserTimezone} from 'mattermost-redux/selectors/entities/timezone';
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
-
+import {isLandscape} from 'app/selectors/device';
 import {goToScreen} from 'app/actions/navigation';
 import {updateUser} from 'app/actions/views/edit_profile';
 
@@ -25,6 +25,7 @@ function mapStateToProps(state) {
         theme: getTheme(state),
         userTimezone,
         timezones,
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/timezone/select_timezone/index.js b/app/screens/settings/timezone/select_timezone/index.js
index 4def5ad3e..681f264c4 100644
--- a/app/screens/settings/timezone/select_timezone/index.js
+++ b/app/screens/settings/timezone/select_timezone/index.js
@@ -8,7 +8,7 @@ import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 import {getSupportedTimezones} from 'mattermost-redux/selectors/entities/general';
 
 import {popTopScreen} from 'app/actions/navigation';
-
+import {isLandscape} from 'app/selectors/device';
 import SelectTimezone from './select_timezone';
 
 function mapStateToProps(state, props) {
@@ -26,6 +26,7 @@ function mapStateToProps(state, props) {
         theme: getTheme(state),
         timezones: supportedTimezones,
         initialScrollIndex: index,
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/settings/timezone/select_timezone/select_timezone.js b/app/screens/settings/timezone/select_timezone/select_timezone.js
index 79f3a20ce..755ebd904 100644
--- a/app/screens/settings/timezone/select_timezone/select_timezone.js
+++ b/app/screens/settings/timezone/select_timezone/select_timezone.js
@@ -17,6 +17,7 @@ import SelectTimezoneRow from './select_timezone_row';
 
 import {ListTypes} from 'app/constants';
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 const ITEM_HEIGHT = 45;
 const VIEWABILITY_CONFIG = ListTypes.VISIBILITY_CONFIG_DEFAULTS;
@@ -31,6 +32,7 @@ export default class Timezone extends PureComponent {
         timezones: PropTypes.array.isRequired,
         onBack: PropTypes.func.isRequired,
         theme: PropTypes.object.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -83,12 +85,13 @@ export default class Timezone extends PureComponent {
                 timezone={timezone}
                 selectedTimezone={this.props.selectedTimezone}
                 onPress={this.timezoneSelected}
+                isLandscape={this.props.isLandscape}
             />
         );
     };
 
     render() {
-        const {theme, initialScrollIndex} = this.props;
+        const {theme, initialScrollIndex, isLandscape} = this.props;
         const {value} = this.state;
         const {intl} = this.context;
         const style = getStyleSheet(theme);
@@ -102,7 +105,7 @@ export default class Timezone extends PureComponent {
         return (
             <View style={style.container}>
                 <StatusBar/>
-                <View style={style.header}>
+                <View style={[style.header, padding(isLandscape)]}>
                     <SearchBar
                         ref='searchBar'
                         placeholder={intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
diff --git a/app/screens/settings/timezone/select_timezone/select_timezone_row.js b/app/screens/settings/timezone/select_timezone/select_timezone_row.js
index 11f62df94..7a99de5be 100644
--- a/app/screens/settings/timezone/select_timezone/select_timezone_row.js
+++ b/app/screens/settings/timezone/select_timezone/select_timezone_row.js
@@ -11,6 +11,7 @@ import {
 
 import CheckMark from 'app/components/checkmark';
 import {makeStyleSheetFromTheme} from 'app/utils/theme';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 const ITEM_HEIGHT = 45;
 
@@ -20,6 +21,7 @@ export default class SelectTimezoneRow extends PureComponent {
         timezone: PropTypes.string.isRequired,
         selectedTimezone: PropTypes.string,
         onPress: PropTypes.func.isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     timezoneSelected = () => {
@@ -28,7 +30,7 @@ export default class SelectTimezoneRow extends PureComponent {
     };
 
     render() {
-        const {theme, timezone, selectedTimezone} = this.props;
+        const {theme, timezone, selectedTimezone, isLandscape} = this.props;
         const styles = getStyleSheet(theme);
 
         const selected = timezone === selectedTimezone && (
@@ -41,7 +43,7 @@ export default class SelectTimezoneRow extends PureComponent {
 
         return (
             <TouchableOpacity
-                style={styles.itemContainer}
+                style={[styles.itemContainer, padding(isLandscape)]}
                 key={timezone}
                 onPress={this.timezoneSelected}
             >
diff --git a/app/screens/settings/timezone/timezone.js b/app/screens/settings/timezone/timezone.js
index 1badd938e..e04d35bbb 100644
--- a/app/screens/settings/timezone/timezone.js
+++ b/app/screens/settings/timezone/timezone.js
@@ -33,6 +33,7 @@ export default class Timezone extends PureComponent {
             getSupportedTimezones: PropTypes.func.isRequired,
             updateUser: PropTypes.func.isRequired,
         }).isRequired,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static defaultProps = {
@@ -138,6 +139,7 @@ export default class Timezone extends PureComponent {
                 automaticTimezone,
                 manualTimezone,
             },
+            isLandscape,
         } = this.props;
         const {useAutomaticTimezone} = this.state;
         const style = getStyleSheet(theme);
@@ -149,6 +151,7 @@ export default class Timezone extends PureComponent {
                     <Section
                         disableHeader={true}
                         theme={theme}
+                        isLandscape={isLandscape}
                     >
                         <View style={style.divider}/>
                         <SectionItem
@@ -167,6 +170,7 @@ export default class Timezone extends PureComponent {
                             actionType='toggle'
                             selected={useAutomaticTimezone}
                             theme={theme}
+                            isLandscape={isLandscape}
                         />
 
                         {!useAutomaticTimezone && (
@@ -187,6 +191,7 @@ export default class Timezone extends PureComponent {
                                     action={this.goToSelectTimezone}
                                     actionType='arrow'
                                     theme={theme}
+                                    isLandscape={isLandscape}
                                 />
                             </View>
                         )}
diff --git a/app/screens/user_profile/__snapshots__/user_profile.test.js.snap b/app/screens/user_profile/__snapshots__/user_profile.test.js.snap
index 15f733c44..fbbb22f04 100644
--- a/app/screens/user_profile/__snapshots__/user_profile.test.js.snap
+++ b/app/screens/user_profile/__snapshots__/user_profile.test.js.snap
@@ -137,23 +137,29 @@ exports[`user_profile should match snapshot 1`] = `
       <View>
         <Text
           style={
-            Object {
-              "color": undefined,
-              "fontSize": 13,
-              "fontWeight": "600",
-              "marginBottom": 10,
-              "marginTop": 25,
-            }
+            Array [
+              Object {
+                "color": undefined,
+                "fontSize": 13,
+                "fontWeight": "600",
+                "marginBottom": 10,
+                "marginTop": 25,
+              },
+              null,
+            ]
           }
         >
           USERNAME
         </Text>
         <Text
           style={
-            Object {
-              "color": "#3d3c40",
-              "fontSize": 15,
-            }
+            Array [
+              Object {
+                "color": "#3d3c40",
+                "fontSize": 15,
+              },
+              null,
+            ]
           }
         >
           fred
@@ -162,23 +168,29 @@ exports[`user_profile should match snapshot 1`] = `
       <View>
         <Text
           style={
-            Object {
-              "color": undefined,
-              "fontSize": 13,
-              "fontWeight": "600",
-              "marginBottom": 10,
-              "marginTop": 25,
-            }
+            Array [
+              Object {
+                "color": undefined,
+                "fontSize": 13,
+                "fontWeight": "600",
+                "marginBottom": 10,
+                "marginTop": 25,
+              },
+              null,
+            ]
           }
         >
           NICKNAME
         </Text>
         <Text
           style={
-            Object {
-              "color": "#3d3c40",
-              "fontSize": 15,
-            }
+            Array [
+              Object {
+                "color": "#3d3c40",
+                "fontSize": 15,
+              },
+              null,
+            ]
           }
         >
           nick
@@ -192,6 +204,7 @@ exports[`user_profile should match snapshot 1`] = `
       iconColor="rgba(0, 0, 0, 0.7)"
       iconSize={15}
       iconType="fontawesome"
+      isLandscape={false}
       textColor="#000"
       textId="mobile.routes.user_profile.send_message"
       theme={
diff --git a/app/screens/user_profile/index.js b/app/screens/user_profile/index.js
index 01c5c91e6..4010b31fb 100644
--- a/app/screens/user_profile/index.js
+++ b/app/screens/user_profile/index.js
@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 
 import {setChannelDisplayName} from 'app/actions/views/channel';
 import {makeDirectChannel} from 'app/actions/views/more_dms';
-
+import {isLandscape} from 'app/selectors/device';
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getTeammateNameDisplaySetting, getTheme, getBool} from 'mattermost-redux/selectors/entities/preferences';
 import {isTimezoneEnabled} from 'mattermost-redux/selectors/entities/timezone';
@@ -42,6 +42,7 @@ function mapStateToProps(state, ownProps) {
         militaryTime,
         theme: getTheme(state),
         isMyUser: getCurrentUserId(state) === ownProps.userId,
+        isLandscape: isLandscape(state),
     };
 }
 
diff --git a/app/screens/user_profile/user_profile.js b/app/screens/user_profile/user_profile.js
index 5bc47ee7d..067a7b927 100644
--- a/app/screens/user_profile/user_profile.js
+++ b/app/screens/user_profile/user_profile.js
@@ -11,10 +11,9 @@ import {
 } from 'react-native';
 import {intlShape} from 'react-intl';
 import {Navigation} from 'react-native-navigation';
-
 import {displayUsername} from 'mattermost-redux/utils/user_utils';
 import {getUserCurrentTimezone} from 'mattermost-redux/utils/timezone_utils';
-
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 import ProfilePicture from 'app/components/profile_picture';
 import FormattedText from 'app/components/formatted_text';
 import FormattedTime from 'app/components/formatted_time';
@@ -52,6 +51,7 @@ export default class UserProfile extends PureComponent {
         enableTimezone: PropTypes.bool.isRequired,
         isMyUser: PropTypes.bool.isRequired,
         fromSettings: PropTypes.bool,
+        isLandscape: PropTypes.bool.isRequired,
     };
 
     static contextTypes = {
@@ -142,14 +142,14 @@ export default class UserProfile extends PureComponent {
     };
 
     buildDisplayBlock = (property) => {
-        const {theme, user} = this.props;
+        const {theme, user, isLandscape} = this.props;
         const style = createStyleSheet(theme);
 
         if (user.hasOwnProperty(property) && user[property].length > 0) {
             return (
                 <View>
-                    <Text style={style.header}>{property.toUpperCase()}</Text>
-                    <Text style={style.text}>{user[property]}</Text>
+                    <Text style={[style.header, padding(isLandscape)]}>{property.toUpperCase()}</Text>
+                    <Text style={[style.text, padding(isLandscape)]}>{user[property]}</Text>
                 </View>
             );
         }
@@ -158,7 +158,7 @@ export default class UserProfile extends PureComponent {
     };
 
     buildTimezoneBlock = () => {
-        const {theme, user, militaryTime} = this.props;
+        const {theme, user, militaryTime, isLandscape} = this.props;
         const style = createStyleSheet(theme);
 
         const currentTimezone = getUserCurrentTimezone(user.timezone);
@@ -172,9 +172,9 @@ export default class UserProfile extends PureComponent {
                 <FormattedText
                     id='mobile.routes.user_profile.local_time'
                     defaultMessage='LOCAL TIME'
-                    style={style.header}
+                    style={[style.header, padding(isLandscape)]}
                 />
-                <Text style={style.text}>
+                <Text style={[style.text, padding(isLandscape)]}>
                     <FormattedTime
                         timeZone={currentTimezone}
                         hour12={!militaryTime}
@@ -273,8 +273,9 @@ export default class UserProfile extends PureComponent {
             if (!this.props.bot) {
                 return null;
             }
+
             return (
-                <View style={style.content}>
+                <View style={[style.content, padding(this.props.isLandscape)]}>
                     <View>
                         <Text style={style.header}>{'DESCRIPTION'}</Text>
                         <Text style={style.text}>{this.props.bot.description || ''}</Text>
@@ -295,7 +296,7 @@ export default class UserProfile extends PureComponent {
     }
 
     render() {
-        const {theme, user} = this.props;
+        const {theme, user, isLandscape} = this.props;
         const style = createStyleSheet(theme);
 
         if (!user) {
@@ -326,6 +327,7 @@ export default class UserProfile extends PureComponent {
                         iconType='fontawesome'
                         textId={t('mobile.routes.user_profile.send_message')}
                         theme={theme}
+                        isLandscape={isLandscape}
                     />
                     {this.renderAdditionalOptions()}
                 </ScrollView>
diff --git a/app/screens/user_profile/user_profile.test.js b/app/screens/user_profile/user_profile.test.js
index 4f8bc98d2..a3524e65a 100644
--- a/app/screens/user_profile/user_profile.test.js
+++ b/app/screens/user_profile/user_profile.test.js
@@ -41,6 +41,7 @@ describe('user_profile', () => {
         militaryTime: false,
         isMyUser: false,
         componentId: 'component-id',
+        isLandscape: false,
     };
 
     const user = {
diff --git a/app/screens/user_profile/user_profile_row.js b/app/screens/user_profile/user_profile_row.js
index 5efb7338a..e08628cbb 100644
--- a/app/screens/user_profile/user_profile_row.js
+++ b/app/screens/user_profile/user_profile_row.js
@@ -13,6 +13,7 @@ import {
 import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 import FormattedText from 'app/components/formatted_text';
 import VectorIcon from 'app/components/vector_icon.js';
+import {paddingHorizontal as padding} from 'app/components/safe_area_view/iphone_x_spacing';
 
 const createStyleSheet = makeStyleSheetFromTheme((theme) => {
     return {
@@ -61,7 +62,7 @@ function createTouchableComponent(children, action) {
 }
 
 function userProfileRow(props) {
-    const {action, defaultMessage, detail, icon, textId, togglable, theme, iconType, iconSize, shouldRender = true} = props;
+    const {action, defaultMessage, detail, icon, textId, togglable, theme, iconType, iconSize, shouldRender = true, isLandscape} = props;
 
     if (!shouldRender) {
         return null;
@@ -71,7 +72,7 @@ function userProfileRow(props) {
 
     const RowComponent = (
         <View style={style.wrapper}>
-            <View style={style.container}>
+            <View style={[style.container, padding(isLandscape, +15)]}>
                 <VectorIcon
                     name={icon}
                     size={iconSize}
@@ -123,6 +124,7 @@ userProfileRow.propTypes = {
     togglable: PropTypes.bool,
     textColor: PropTypes.string,
     theme: PropTypes.object.isRequired,
+    isLandscape: PropTypes.bool.isRequired,
 };
 
 userProfileRow.defaultProps = {
@@ -130,6 +132,7 @@ userProfileRow.defaultProps = {
     iconSize: 15,
     textColor: '#000',
     togglable: false,
+    isLandscape: false,
 };
 
 export default userProfileRow;
diff --git a/app/selectors/device.js b/app/selectors/device.js
index 523c0bde7..db728fa59 100644
--- a/app/selectors/device.js
+++ b/app/selectors/device.js
@@ -14,7 +14,7 @@ export function getStatusBarHeight(state) {
 }
 
 export function isLandscape(state) {
-    return state.device.orientation === 'LANDSCAPE';
+    return state.device.dimension.deviceWidth > state.device.dimension.deviceHeight;
 }
 
 export function isTablet(state) {