Search code examples
htmlcsssafariresponsive-design

CSS: Container is not aligned correctly in Safari

I have designed a banner for a website but there is an issue in the container placement on Safari browser (All other browsers are working fine).

This is my intended style for the banner, the Prime Day text should be on the right as in the following image: enter image description here

However in Safari, it is displaying like this:

enter image description here

Can anyone please help me with this? What could possibly be causing this behavior?

Any sort of pointers will be very helpful.

element.style {
  background-image: url(https://cdn.shopify.com/s/files/1/0021/4889/2732/files/main_desk_2x_3_dc552044-0d7b-48c0-aaa1-491a018b88d4.jpg?v=1657052323);
  color: rgb(41, 41, 41);
  min-height: fit-content;
  height: 540px;
  background-size: cover;
  background-position: 100% center;
}

.styles_banner__2zleP {
  background-repeat: no-repeat;
  width: 100vw;
}

* {
  box-sizing: border-box;
}

section {
  display: block;
}

body {
  font-family: "AvenirNextLTPro";
}

.styles_layout--justifyRight__CDYKz {
  justify-content: right;
}

.styles_layout__QX3op {
  display: flex;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding: 15px;
  width: 1170px;
}

.styles_banner__link__nxcMI {
  color: inherit;
  text-decoration: none;
}

element.style {
  width: 480px;
}

.styles_justifyCenter__e_d5I,
.styles_justifyCenter__e_d5I .styles_content__fRIh1,
.styles_justifyCenter__e_d5I .styles_content__fRIh1>* {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.styles_content__fRIh1 {
  display: flex;
  flex-direction: column;
}
<section class="styles_banner__2zleP" data-testid="sale-banner" style="background-image: url(&quot;https://cdn.shopify.com/s/files/1/0021/4889/2732/files/main_desk_2x_3_dc552044-0d7b-48c0-aaa1-491a018b88d4.jpg?v=1657052323&quot;); color: rgb(41, 41, 41); min-height: fit-content; height: 540px; background-size: cover; background-position: 100% center;">
  <a class="styles_layout__QX3op styles_banner__link__nxcMI styles_layout--justifyRight__CDYKz styles_layout--alignCenter__XqCw6" href="/collections/prime-day-sale">
    <div class="styles_content__fRIh1 styles_justifyCenter__e_d5I" style="width: 480px;"><img alt="" decoding="async" class="" src="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto/https://f.shgcdn.com/2dacaf9b-2222-45de-a76f-f470df139754/" srcset="https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_180/https://f.shgcdn.com/2dacaf9b-2222-45de-a76f-f470df139754/ 180w,https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_360/https://f.shgcdn.com/2dacaf9b-2222-45de-a76f-f470df139754/ 360w,https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_720/https://f.shgcdn.com/2dacaf9b-2222-45de-a76f-f470df139754/ 720w,https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_900/https://f.shgcdn.com/2dacaf9b-2222-45de-a76f-f470df139754/ 900w,https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_1080/https://f.shgcdn.com/2dacaf9b-2222-45de-a76f-f470df139754/ 1080w,https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_1200/https://f.shgcdn.com/2dacaf9b-2222-45de-a76f-f470df139754/ 1200w,https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_1920/https://f.shgcdn.com/2dacaf9b-2222-45de-a76f-f470df139754/ 1920w,https://res.cloudinary.com/shogun-frontend/image/fetch/f_auto,q_auto,c_limit,w_2048/https://f.shgcdn.com/2dacaf9b-2222-45de-a76f-f470df139754/ 2048w"
        loading="lazy">
      <p>Get affordable <strong>SupportiveWear</strong></p>
      <p> essentials at Prime Day deals!</p><button class="css-1276jxf" type="button" data-testid="sale-banner-button">SHOP THE SALE</button>
    </div>
  </a>
</section>

Solution

  • Maybe try justify-content: flex-start; or justify-content: flex-end;.

    While left and right are part of the spec, some browser don't support those values for justify-content. See https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#browser_compatibility.