flex items stretching on wider screens - html

Question

I just finished developing my first web page using flexbox. It looks great on my screen resolution (1326x768) but when I test it on a larger screen (1894x787), the content looks crazy stretched. Below are the screen shots:
At 1326x768
At higher screen resolution
Codepen
I had used flex: 1 1 60% on some elements (the % varies of course), but making flex-grow: 0 doesn't really do anything.
I have only set fixed parameters for the containers of images (fixed heights). I haven't set fixed widths for any container.
Am I missing something with flex boxes here?
I guess media queries might be one way to solve this problem but is there any other solution, a more robust way to develop using flex?
How can I make the page look the way it is meant to in all screen sizes not stretched or overly compressed?
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
* {
box-sizing: border-box;
}
p {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.margin-end {
margin-bottom: 40px;
}
.margin-start {
margin-top: 10px;
}
header {
display: flex;
flex-direction: row;
justify-content: space-between;
color: #6e6e6e;
font-family: AvenirLTStd-Roman;
font-weight: bolder;
font-size: 1rem;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
/*box-shadow: 0px 10px 5px -9px rgba(0,0,0,0.75);*/
/*border-bottom: solid 1px #ececec;*/
}
.banner-heading {
margin-left: 350px;
font-weight: bolder;
font-size: 1.875rem;
}
.secondary-heading {
/* border: solid;
*/
display: flex;
flex-direction: row;
margin-right: 60px;
font-size: 0.8rem;
justify-content: center;
position: relative;
/* margin: auto;
*/
}
.secondary-heading-1 {
padding-right: 60px;
/* vertical centering */
position: relative;
top: 50%;
transform: translateY(-50%);
font-weight: lighter;
}
.secondary-heading-2 {
/* vertical centering */
position: relative;
top: 50%;
transform: translateY(-50%);
color: #6e6e6e;
font-weight: lighter;
}
.secondary-heading-1 a,
.secondary-heading-2 a {
color: #6e6e6e;
}
.main-content {
display: flex;
flex-direction: row;
/* border:solid;
*/
margin-left: 350px;
margin-right: 60px;
}
.main-content-left {
/* border:dashed;*/
/*width: 200px;
height: 200px;*/
display: flex;
flex-direction: column;
flex: 0 1 60%;
padding-right: 20px;
}
.main-content-left-heading {
width: 100%;
border-bottom: solid 1px #959595;
padding-bottom: 20px;
padding-top: 20px;
}
.main-content-right {
/*border: dashed;*/
/*width: 200px;
height: 200px;*/
margin-left: auto;
flex: 0 1 40%;
}
.main-content-left-heading p {
/*margin:0;
padding:0;*/
line-height: 100%;
}
.main-content-left-heading-1 {
font-family: AvenirLTStd-Roman;
font-style: italic;
color: #6e6e6e;
}
.main-content-left-heading-2 {
padding-top: 5px;
font-family: AvenirLTStd-Roman;
color: #6e6e6e;
font-weight: bolder;
font-size: 1.5rem
}
.main-content-left-image-1 {
padding: 0;
margin: 0;
/* border: solid;
*/
width: 100%;
height: 360px;
background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/010fa5bb-20b9-4603-8e31-3a5e053d936f.png");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.main-content-left-image-2 {
padding: 0;
margin: 0;
/* border: solid;
*/
width: 100%;
height: 360px;
background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/a49ee715-cd02-4b16-9164-941585e2fbbe.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.main-content-left-image-3 {
padding: 0;
margin: 0;
/* border: solid;
*/
width: 100%;
height: 360px;
background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.main-content-left-text {
/* border:solid;
*/
display: flex;
flex-direction: row;
margin-top: solid;
padding-top: 20px;
/* padding-bottom: 20px;
*/
}
.main-content-left-text-group-left {
padding: 10px 60px 10px 0px;
}
.main-content-left-text-group-left-1 {
padding-bottom: 10px;
font-family: SourceSansBold;
font-size: 0.875rem;
font-weight: 900;
}
.main-content-left-text-group-left-2 {
font-family: SourceSansBold;
font-size: 0.875rem;
color: #888585;
font-weight: 900;
}
.main-content-left-text-group-right {
padding: 10px;
border-left: solid 1px #959595;
}
.main-content-left-text-group-right-1 {
font-family: Avenir-Next-LT-Pro-Demi;
font-size: 1.45rem;
padding-bottom: 20px;
color: #444444;
font-weight: bolder;
}
.main-content-left-text-group-right-2 {
font-size: 1rem;
font-family: SourceSansPro-Regular;
}
.main-content-right {
border-left: solid 1px #959595;
margin-top: 20px;
padding-right: 65px;
padding-left: 20px;
display: flex;
flex-direction: column;
}
.main-content-right-heading {
border-bottom: solid 2px #363636;
height: 65px;
display: flex;
}
.main-content-right-heading p {
font-size: 0.9rem;
margin-top: auto;
font-family: SourceSansBolder;
font-weight: bolder
}
.main-content-right-content {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: solid 1px #959595;
}
.main-content-right-image-1 {
width: 100%;
height: 180px;
background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
background-size: 100% 100%;
}
.main-content-right-image-2 {
width: 100%;
height: 180px;
background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
background-size: 100% 100%;
}
.main-content-right-image-3 {
width: 100%;
height: 180px;
background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
background-size: 100% 100%;
}
.main-content-right-group {
/*border:solid;*/
/* padding-bottom: 10px;
*/
}
.main-content-right-group-1 {
padding-top: 10px;
color: #b8b6b6;
font-family: SourceSansBold;
font-size: 0.875rem
}
.main-content-right-group-2 {
padding-top: 10px;
font-family: Avenir-Next-LT-Pro-Demi;
font-weight: bolder;
color: #444444;
font-size: 1.1rem;
}
<header>
<h1 class="banner-heading">Entrepreneurs Weekly</h1>
<div class="secondary-heading">
<h3 class="secondary-heading-1">BECOME A CURATOR</h3>
<h3 class="secondary-heading-2">ABOUT</h3>
</div>
</header>
<div class="main-content">
<div class="main-content-left">
<div class="main-content-left-heading">
<p class="main-content-left-heading-1">Week 008,</p>
<p class="main-content-left-heading-2">How To create the next Steve Jobs</p>
</div>
<div class="main-content-left-heading">
<div class="main-content-left-image-1">
<!-- <img src="assets/WeeklyContent1.png" />
-->
</div>
<div class="main-content-left-text">
<div class="main-content-left-text-group-left">
<p class="main-content-left-text-group-left-1">POLITICS</p>
<p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
</div>
<div class="main-content-left-text-group-right">
<p class="main-content-left-text-group-right-1">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
<p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p>
</div>
</div>
</div>
<div class="main-content-left-heading">
<div class="main-content-left-image-2">
<!-- <img src="assets/WeeklyContent1.png" />
-->
</div>
<div class="main-content-left-text">
<div class="main-content-left-text-group-left">
<p class="main-content-left-text-group-left-1">POLITICS</p>
<p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
</div>
<div class="main-content-left-text-group-right">
<p class="main-content-left-text-group-right-1">The Texas Tribune updates its premium political coverage for an email</p>
<p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p>
</div>
</div>
</div>
<div class="main-content-left-heading margin-end">
<div class="main-content-left-image-3">
<!-- <img src="assets/WeeklyContent1.png" />
-->
</div>
<div class="main-content-left-text">
<div class="main-content-left-text-group-left">
<p class="main-content-left-text-group-left-1">POLITICS</p>
<p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
</div>
<div class="main-content-left-text-group-right">
<p class="main-content-left-text-group-right-1">The Incline, Billy Penn’s new sister site, launches in Pittsburgh</p>
<p class="main-content-left-text-group-right-2">Like Billy Penn in Philadelphia, the Pittsburgh site will focus on attracting a younger audience through events and aggregation in addition to original reporting.</p>
</div>
</div>
</div>
</div>
<div class="main-content-right">
<div class="main-content-right-heading">
<p>THE LATEST FROM ENTREPRENEUR'S WEEKLY</p>
</div>
<div class="main-content-right-content margin-start">
<div class="main-content-right-image-1">
<!-- image goes as background -->
</div>
<div class="main-content-right-group">
<p class="main-content-right-group-1">WEEK 01</p>
<p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
</div>
</div>
<div class="main-content-right-content">
<div class="main-content-right-image-2">
<!-- image goes as background -->
</div>
<div class="main-content-right-group">
<p class="main-content-right-group-1">WEEK 01</p>
<p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
</div>
</div>
<div class="main-content-right-content">
<div class="main-content-right-image-3">
<!-- image goes as background -->
</div>
<div class="main-content-right-group">
<p class="main-content-right-group-1">WEEK 01</p>
<p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
</div>
</div>
</div>
</div>

Answer 1

This is the source of your problem:
.main-content-left-image-1 {
padding: 0;
margin: 0;
width: 100%; <---- problem
height: 360px; <---- problem
background-image: url("https://gallery.mailchimp.com/f6...");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
}
.main-content-left-image-2 {
padding: 0;
margin: 0;
width: 100%; <---- problem
height: 360px; <---- problem
background-image: url("https://gallery.mailchimp.com/f6...");
background-size: 100% 100%;
background-repeat: no-repeat;
}
If you tell an image to be width: 100% and height: 360px, consider how that plays out.
The width is always the full length of the container. Whether the screen is wide or narrow, the image goes with it.
But you have set a fixed height of 360px. There's no flexibility there.
As a result, the image is flexible horizontally and inflexible vertically, which leads to a loss of aspect ratio / distortion.
There are several possible solutions to this problem:
Responsive css background images
How to make CSS background-image responsive?