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!