Stacking an SVG over a PNG, but it looks different in my local emulator

What shows up in my local emulator doesn’t match the screenshots I’m getting back from actual mobile devices. Not sure if I should be adjusting srcset or media queries or trying some combination of the 2. Most importantly what is my local emulator missing?
live Demo fccTemplate
gitHub repo


import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
          rel="noopener noreferrer"
          {/* fccTempLate */}
          <span className="App-hammer">
            <img src={logo} className="App-logo" alt="logo" />
        {/* <p>
          Edit <code>src/App.js</code> and save to reload.
        </p> */}
export default App;


/* default Creeat-React-App 4.0.1 */
/* scriptHammer logo */
.App-hammer {
  background-color: #282c34;
  /* min-height: 100vh; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
  max-width: 16em;
  margin: auto;
  overflow: hidden;
  background-image: url(./images/script-n-hammer.png);
  background-size: 100% auto;
  background-repeat: no-repeat;

.App-hammer img {
  display: block;
  width: 100%;
  /* height: auto; */
  animation: App-logo-spin infinite 20s linear;

Unless you are using the actual apple SDK simulator then all other iphone emulators can’t be trusted.

Using the live demo link you posted I see an overlapping hammer in both my iphone 5s and on my desktop when the window is resized smaller. You haven’t made the hammer fit properly within its container or set its background posiition.

I would add this.

.App-hammer {
background-position: center center;

That fixes it for me in both desktop and iphone.

Thank you very much, it seems to be working great! very much appreciated

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.