Overlapping background images of flex elements in Safari

This webpage is designed as a single-page layout using Gatsby:

<div className='mainContent'>                
  <section className='contentSection'>
    <h1 className='header'>Heading</h1>
    <div className='subHeader'>
       <h2 className='subheading'>Subheading</h2>
       <div className='logoContainer'>
          <img src={logo} alt='Logo'></img>
       </div>                        
     </div>
     <p className='textContent'>Lorem ipsum</p>
     <p className=‘textContent'>More lorem ipsum</p>
   </section>
    <section>
        … repeat of previous section
    </section>
</div>

CSS Styling:

@media only screen and (max-width: 719px) {

 .mainContent {
   display: flex;
   display:-webkit-flex; /* Safari */  
   flex-direction: column;
   justify-content: flex-start;
 }

.contentSection {    
    display: flex;
    display:-webkit-flex; /* Safari */  
    flex-direction: column;    
    height:0;
    width:100%;
    padding-bottom: 74.94%;/*https://example.com*/
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(./images/mobileImage.png)      
  }

.header{ 
    margin-top: 10%;
    padding-left:3%;
    font-size: 4vw;
    color:white;
    font-family: 'Gotham';
    font-weight: normal;
    word-wrap: break-word;
  }

}
.subheading{
    display:flex;
    display:-webkit-flex; /* Safari */
    flex-direction: row; 

  }

.logoContainer{
    display:flex;/*Flex required when images are used*/
    display:-webkit-flex; /* Safari */  
    flex-direction: column;
    width: 13%;
    height: 13%; 
     }

  .logoContainer img{
    width: 100%;
  }

.textContent {    
    padding-left:3%;
    padding-right: 3%;
    font-size: 3vw;
    color:white;
    font-family: 'Gotham';
    font-weight: normal;
    word-wrap: break-word;    

  }

}

@media only screen and (min-width: 720px){

 .mainContent {
   display: flex;
   display:-webkit-flex; /* Safari */  
   flex-direction: row;
   justify-content: flex-start;
 }

.contentSection {    
    display: flex;
    display:-webkit-flex; /* Safari */  
    flex-direction: column;    
    height:0;
    width:100%;
    padding-bottom: 74.94%;/*https://example.com*/
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(./images/desktopImage.png)      
  }

 .header{
      padding-left:9%;
      margin-top: 7%;
      font-size: 1.3vw;
      color:white;
      font-family: 'Gotham';
      font-weight: normal;
      word-wrap: break-word;
 }

.subheading{
    display:flex;
    display:-webkit-flex; /* Safari */
    flex-direction: row; 

  }

.logoContainer{
    display:flex;
    display:-webkit-flex; /* Safari */  
    flex-direction: column;
    width: 13%;
    height: 13%; 
     }

  .logoContainer img{
    width: 100%;
  }

.textContent {    
    padding-left:9%;
    padding-right: 9%;
    font-size: 0.7vw;
    color:white;
    font-family: 'Gotham';
    font-weight: normal;
    word-wrap: break-word;
  }
}

A handy technique from this source is being utilized to ensure that divs adjust their height based on background images.

While this design renders correctly in Chrome and Firefox, Safari on MacOS and iOS presents an issue where paragraph elements overlap with the titles and subtitles at the top of the section container. Despite trying different display properties and order attributes, the problem persists...

If you have any suggestions or solutions, they would be greatly appreciated!

Thank you!

Answer №1

Configuration

.section1 {
    height:auto;
  }

By eliminating padding-bottom, the issue was resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Centralize Arabic symbol characters

Is it possible to center the symbols that by default go above characters such as مُحَمَّد? .wrapper { text-align: center; vertical-align: center; } span { font-size: 4rem; display: inline-block; padding: 2rem; margin: 0.2rem; ba ...

Reduce the amount of time it takes for a Google AdWords Script to generate a

According to Google Script best practices, it is recommended to store operations in an array and then call the methods once all the operations have been constructed. This helps minimize response time each time a service is called. For example, let's ...

Enhancing Tapestry Grid component column sort icons

In the Tapestry Grid components, the default column sort icons are blue and white, but if your page has a different color scheme, you may want to personalize them. How can you replace the default Tapestry Grid column sort icons with your own custom icons? ...

Two-way data bindings trigger the digest() function to iterate 10 times

I'm facing issues with angular binding and my experience level in this area is limited. I will be posting all related questions here. I have a piece of angularjs code that is triggering 10 digest() cycle reached errors. After researching similar posts ...

Utilize Javascript/jQuery to play individual HTML audio files sequentially

On my website, each keyboard key is associated with an audio file. When a letter key from A to Z is pressed, the corresponding audio file is played. For all other keys (excluding ESC), a random audio file out of the 26 available is played. However, if mult ...

Stopping autoplay in Swiper as soon as you hover over it

My swiper is set to autoplay, but I want it to stop immediately when hovered over instead of waiting for the transition to finish. Is there a way to interrupt the transition and stop it at the exact point where the cursor hovers? Here is my Swiper config ...

Converting keyValue format into an Array in Angular using Typescript

Is there a way to change the key-value pair format into an array? I have received data in the following format and need to convert it into an array within a .TS file. countryNew: { IN: 159201 BD: 82500 PK: 14237 UA: 486 RU: 9825 } This needs to be transf ...

Preventing Express.JS HTTP requests from being blocked by npm cron

I'm experimenting with the cron module from npm within my Express.js application. The structure of my app is quite straightforward. I have a function to establish a connection to the database, where I then register all the different modules that hand ...

Activating list anchor upon click

I have a list that looks like this: <!-- List --> <ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling"> <li class="nav-item"> <a class="nav-link active" id="link1" href="{{ ...

Error: The JS Exception has not been handled, as it is stating that 'undefined' is not an object when evaluating 'global.performance.now' in react-native-tvOS

I am currently working on a React-Native-tvOs app and despite following all the instructions from the react-native-tvOs GitHub page, I keep encountering an error when running the default template app. Even after running the script provided on the GitHub re ...

Customizing SwiperJS to display portion of slides on both ends

I need some assistance with my SwiperJS implementation to replace existing sliders on my website. The goal is to have variable-width slides, showing a landscape slide in the center with a glimpse of the preceding and following slides on each side. If it&ap ...

Guide to sorting data by the status value within a JavaScript object?

I have a JavaScript object structured like this: { "3": { "id": 3, "first": "Lisa", "last": "Morgan", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd7d6d4c9dcdad5fbdcd6dad2d795d8d4d6">[email&# ...

What could be causing the entire app to malfunction when the Redux Provider tag is used

I am facing an issue while trying to integrate a React Toolkit app into my project. The error message I encountered is as follows: Error: Invalid hook call. Hooks can only be called inside the body of a function component. This error may occur due to one ...

Having difficulties showcasing a variety of images stored in the database

I'm having some trouble with my e-commerce site. I can't seem to display different product images from the database on my homepage. The code I have only shows one image for all products, even though they should each have their own unique image up ...

How can I display a particular section of my JSON data in an AngularJS application?

Below is an example of a JSON structure: {"years":[ { "year_title":"94", "months":[...] } { "year_title":"95", "months":[...] } { "year_title":"96", "months":[...] } ]} I was able to display the data using the code sni ...

How to execute a JavaScript function within a Jinja for loop

I am currently working on an HTML page where the variable schedule contains a series of sequential decimal numbers representing seconds. My goal is to develop a function in JavaScript/jQuery that can convert these decimal numbers into time format. However ...

Replicate and $(document).ready()

My form has required fields that need to be completed. To alert users about blank fields, I have implemented the following code: $(document).ready(function() { $('input.required:text').focus(function() { $(this).css({'background ...

Retrieve JSON data and use a button to sort and display markers on a Google Map

Is it possible to modify my function in order to use different PHP files with separate buttons without duplicating the code? Currently, I have a function that displays markers on an external HTML page when a button is clicked. The data is retrieved from fi ...

Fill Dropdown Menu Using Data Retrieval From Database

I am trying to figure out how to populate a drop down list (also known as a Select element) with data from a SQL Server query. The goal is to fill the list with results from Select storeName from storeinfo, which should give around 30 items that I want di ...

Is there a way to detect when the escape key is pressed?

Is there a way to detect when the escape key is pressed in Internet Explorer, Firefox, and Chrome? I have code that works in IE and alerts 27, but in Firefox it alerts 0 $('body').keypress(function(e){ alert(e.which); if(e.which == 27){ ...