I'm new to front end development and currently working on a website project.
It has a simple layout and I'm using CSS Flexbox to execute it. Works well in for example Firefox, and very poorly in Safari. I've done quite a bit of research and found out that Flexbox is not fully supported in older versions of Safari, however I have the newest version. Sizing and positioning doesn't work properly, aligning the items horizontally works.

Below is the desired look of one of the pages, in Firefox: image

Below is the same page in Safari (it looks the same in Chrome): image

When zooming out in Safari it looks like this: image

.container4 {
  font-family: "Chakra Petch", sans-serif;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 50px;

.element4 {
  padding-left: 50px;
  padding-top: 50px;
  align-self: flex-start;
  flex: 1 1 50px;
}

.element4-2 {
  padding-right: 50px;
  padding-top: 50px;
  align-self: flex-start;
  flex: 1 1 50px;
}

<div class="container4">
  <p class="element4">
    Drummer and beat producer from Gothenburg, based in Oslo. The beats are
    built around Pers drumming, <br />
    using samples from a wide variety of genres <br />
    mixed with other sounds.
  </p>

  <img class="element4-2" src="../Images/galgeberg.png" alt="wall2" />
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Couple of problems:

1. if you want both columns to be 50% width on all screen sizes, you need to set flex:1 1 50% on both the p and the img tags.
2. if you want the img tag to scale up and down instead of always being it's full size, you need to set width:100%;height:auto on it.
3. if you want to center the two elements vertically all you need is align-items:center on their container (where display:flex is defined) and not use any vertical padding on them

As a matter of personal preference I would set display:block on both the p and img tags, or better yet wrap them in tags to prevent any weirdness from what styles some browsers could put on them.

Code:

<div class="container4">
  <p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
  <img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>

<style>
.container4 {
  font-size: 40px;
  display: flex;
  align-items: center;
  gap: 50px;
}
.element4 {
  padding-left: 50px;
  flex: 1 1 50%;
}

.element4-2 {
  padding-right: 50px;
  flex: 1 1 50%;
  width:100%;height:auto;
}
</style>

Codepen: https://codepen.io/nonsintetic/pen/poWygaY (tested on Safari and Chrome on a mac with latest everything)

CodePudding user response：

Few things, The align item stretch is causing the issue. also you need to make sure that you are diving the 50% gap for each element, third you have set the max-width of the image to maintain the sizing. here is the jsfiddle with responsiveness.

.container4 {
  font-family: "Chakra Petch", sans-serif;
  font-size: clamp(30px,20vw 1px,40px);
  display: flex;
  justify-content: space-between;
  padding:2em;
  }
  .element4{
  max-width:50%;
  margin:auto;
}
.element4-2{
  max-width:50%;
  margin:auto;
}
.container4 img{
  width:100%;
}

<div class="container4">
  <p class="element4">
    Drummer and beat producer from Gothenburg, based in Oslo. The beats are
    built around Pers drumming, <br />
    using samples from a wide variety of genres <br />
    mixed with other sounds.
  </p>

  <img class="element4-2" src="https://www.ejin.ru/wp-content/uploads/2017/09/2-2400-696x392.jpg" alt="wall2" />
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I never had problems using flexbox on modern browsers. I'm assuming there is some typo/error in your css.

Without the entire code, it's hard to know what will and will not work for your specific layout.

Anyways, my approach would be more like:

    .container {
       font-family: "Chakra Petch", sans-serif;
       font-size: 40px;
       display: flex;
       flex-direction: row; // makes sure it's treated as row
       width: 100vw; // 100 viewport width = fills entire viewport width
       height: 100%; // take 100% of available space (since you have a header)
       justify-content: center;
       align-items: center;
    }

    .page-paragraph {
      margin: 0;
      padding: 50px; // padding of 50px all around
    }
   
    .page-img {
      width: 50%; // image is always 50% of available width
      margin: 50px;
    }

Any reason you are exclusively using classes? If an element occurs only once, it's smart to give it an id instead. You can specify an ID with the '#' selector.

Also scratch the break tags if you are going for a fluid layout, in some cases you might only have the word 'drumming' in a single line.