diff --git a/components/cycle-day/symptoms/symptom-view.js b/components/cycle-day/symptoms/symptom-view.js
index ec8a5c5d5e944d7d0efe488fcf292a501c6684c8..158b2e6daea636c0f7c217b94bc95cd9acb02f9f 100644
--- a/components/cycle-day/symptoms/symptom-view.js
+++ b/components/cycle-day/symptoms/symptom-view.js
@@ -83,8 +83,11 @@ export default class SymptomView extends Component {
           }}
         />
         <View flex={1}>
+          { this.renderContent() }
           <TouchableOpacity
-            onPress={() => this.setState({showInfo: true})}
+            onPress={() => {
+              this.setState({showInfo: true})
+            }}
             style={styles.infoButtonSymptomView}
           >
             <FeatherIcon
@@ -93,7 +96,6 @@ export default class SymptomView extends Component {
               style={iconStyles.symptomInfo}
             />
           </TouchableOpacity>
-          {this.renderContent()}
           { this.state.showInfo &&
               <InfoPopUp
                 symptom={this.symptomName}
diff --git a/styles/index.js b/styles/index.js
index 47f10707eee3c6a7838102315fbe1e344e590eca..df5948b3ecea8192efdd30f5ca911fb9058c6230 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -457,9 +457,8 @@ export default StyleSheet.create({
   },
   infoButtonSymptomView: {
     position: 'absolute',
-    paddingVertical: 10,
-    paddingHorizontal: 10,
-    right: -10
+    padding: 15,
+    right: 0
   },
   licensePage: {
     paddingVertical: 20,
@@ -493,7 +492,6 @@ export const iconStyles = {
   },
   symptomInfo: {
     color: secondaryColor,
-    marginHorizontal: 20,
     fontSize: 25
   },
   menuIcon: {