Skip to content

Commit ff7bdd1

Browse files
authored
Edit Homepage to Not Display Images on Mobile (#940)
## Description ### Why Edit homepage to not display images when webpage is being viewed on mobile. 'Prettier' was run on the source code creating more changes. Only changes to `index.js` were to add the new HomePageImage class to the image's that should not be displayed on mobile. ### BEFORE <img width="391" alt="image" src="https://github.com/microsoft/react-native-windows-samples/assets/34109996/85f7fec4-ad2d-4e09-b660-e8dbd0457823"> ### AFTER <img width="389" alt="image" src="https://github.com/microsoft/react-native-windows-samples/assets/34109996/975c6d56-923a-46f4-9dda-a171a0f62b48"> ###### Microsoft Reviewers: [Open in CodeFlow](https://microsoft.github.io/open-pr/?codeflow=https://github.com/microsoft/react-native-windows-samples/pull/940)
1 parent cdffc13 commit ff7bdd1

File tree

3 files changed

+15
-0
lines changed

3 files changed

+15
-0
lines changed

website/pages/en/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,7 @@ class Index extends React.Component {
263263
<div className="row">
264264
<div className="column">
265265
<img
266+
className="HomePageImage"
266267
style={{
267268
maxWidth: "200%",
268269
marginLeft: -300,
@@ -306,6 +307,7 @@ class Index extends React.Component {
306307
</div>
307308
<div className="column">
308309
<img
310+
className="HomePageImage"
309311
style={{ maxWidth: "200%", marginTop: -70, marginBottom: -70 }}
310312
src="./img/homepage/native_and_js_mac_cropped.png"
311313
alt="rnw_cropped"

website/static/css/homepage/HeaderHero.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,14 @@
109109
padding: 10px;
110110
}
111111

112+
@media only screen and (max-width: 600px) {
113+
.column {
114+
float: left;
115+
width: 100%;
116+
padding: 10px;
117+
}
118+
}
119+
112120
/* Create two equal columns that floats next to each other */
113121
.resourcesSideNavLinkColumn {
114122
float: left;

website/static/css/homepage/HomePage.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,8 @@
33
width: 100%;
44
overflow-x: hidden;
55
}
6+
@media only screen and (max-width: 600px) {
7+
.HomePageImage {
8+
display: none;
9+
}
10+
}

0 commit comments

Comments
 (0)