seeing different results ( screens ) on FF and Chrome for same code-CodePudding

FF 102, Chrome 103 ( Mac 11.5.2 )

FF screenshot

Chrome screenshot

GitHub Repo & URL

Code

Live URL

CodePudding user response：

I cannot tell you exactly, why Chrome and firefox scale that SVG differently, but you should be able to solve the problem by instead of resizing the image, simply resizing a container for it:

img{max-width: 100%;}

.grow-together-component__main{display:flex; flex-direction: row-reverse; align-items: center;}
.image-container{flex:0 1 50%}

<article >
  <figure >
    <img src="https://vikramvi.github.io/Huddle-landing-page-with-curved-sections/images/illustration-grow-together.svg">
  </figure>
  <section>
    <h2>Grow Together</h2>
    <p>
      Generate meaningful discussions with your audience and build a strong, loyal community.
      Think of the insightful conversations you miss out on with a feedback form.
    </p>
  </section>
</article>

This shoul lead to the exact same outcome in both browsers.