Need help stacking blog snippets on mobile to make responsive - html

Question

The 3 blog posts on this page are no longer stacking (responsive) on mobile. Can someone help me adjust this so the blog post snippets stack on top of each other on mobile? I need it to be responsive on mobile! Also, if you would recommend a way to add a "Read More" link at the bottom of each excerpt that takes users to the blog page.
[![blog posts not stacking][1]][1]
Here is the CSS and you will find the HTML below.
.blog-list {
padding: 0 8px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.blog-list li {
padding-bottom: 20px;
}
.blog-list a {
position: relative;
text-decoration: none;
height: 400px;
}
.blog-list img {
display: block;
height: auto !important;
width: 100%;
}
#media only screen and (min-width: 700px) {
.blog-list {
display: grid;
grid-column-gap: 20px;
grid-template-columns: 1fr 1fr 1fr;
}
}
#media only screen and (min-width: 980px) {
.blog-list {
padding-bottom: 25px;
}
.blog-list h3 {
font-size: 2.4rem;
}
.blog-list a {
display: block;
}
.blog-list a img {
transition: ease all .5s;
}
.blog-list a:hover {
opacity: .8;
}
.blog-list + footer {
padding-bottom: 100px;
}
}
<section class="generic">
<div class="inner">
<ul class="blog-list">
<li>
<a href="https://bluestoneconstruction.com/asheville-nc-the-best-place-to-live-if-you-can-live-anywhere/">
<img src="https://bluestoneconst.wpengine.com/wp-content/uploads/2018/11/liveable-cities-where-to-move-if-you-can-live-anywhere-6.jpg" alt="">
<h3>Asheville, NC: The Best Place To Live If You Can Live Anywhere</h3>
</a>
<p>Experienced travelers know the best place to eat in Chicago, the best hotel to stay at in New York, the best place to watch the sunset over the Rocky Mountains, the best beach on the East Coast — you get the picture. But what about moving somewhere new? This requires a different set of criteria. Vacation</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/luxury-mens-brand-chooses-bluestone-home-for-fall-catalog-photo-shoot/">
<img width="920" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg 920w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction.jpg 1024w" sizes="(max-width: 920px) 100vw, 920px">
<h3>Luxury Men’s brand chooses Bluestone custom home for Fall catalog photo shoot</h3>
</a>
<p>After a 4 day photo shoot with luxury fashion brand Peter Millar at our client’s rustic custom home for their fall/ holiday luxury men’s apparel catalog, we got some fun aerial and ground shots of our own thanks to Carl Amoth. Very impressive to see what goes into all of the amazing photographs a brand</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/2020-master-design-award-winner/">
<img width="921" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg 921w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1024x767.jpg 1024w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1536x1151.jpg 1536w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8.jpg 1600w" sizes="(max-width: 921px) 100vw, 921px">
<h3>2020 Master Design Award Winner for Best Outdoor Environment</h3>
</a>
<p>We are so delighted to win another award for this stunning custom home in Fairview, North Carolina. The work we do represents the best of the best in design, materials, and talent. We thank everyone who helped put this project together. It is always a collaborative creative process that leaves us grateful and satisfied standing</p>
</li>
</ul>
</div>
</section>
[1]: https://i.stack.imgur.com/n4jOn.png

Answer 1

Use display: flex on .blog-list instead of display: grid and then add a media query at about 550px and change the flex direction to column:
body {
margin: 0;
}
.blog-list {
display: flex;
margin: 0;
padding: 0;
}
.blog-list li {
padding: 10px;
list-style-type: none;
}
.blog-list a {
position: relative;
text-decoration: none;
}
.blog-list img {
display: block;
height: auto !important;
width: 100%;
}
#media only screen and (max-width: 550px) {
.blog-list {
flex-direction: column;
}
}
#media only screen and (min-width: 980px) {
.blog-list h3 {
font-size: 2.4rem;
}
.blog-list a img {
transition: ease all 0.5s;
}
.blog-list a:hover {
opacity: .8;
}
.blog-list + footer {
padding-bottom: 100px;
}
}
<section class="generic">
<div class="inner">
<ul class="blog-list">
<li>
<a href="https://bluestoneconstruction.com/asheville-nc-the-best-place-to-live-if-you-can-live-anywhere/">
<img src="https://bluestoneconst.wpengine.com/wp-content/uploads/2018/11/liveable-cities-where-to-move-if-you-can-live-anywhere-6.jpg" alt="">
<h3>Asheville, NC: The Best Place To Live If You Can Live Anywhere</h3>
</a>
<p>Experienced travelers know the best place to eat in Chicago, the best hotel to stay at in New York, the best place to watch the sunset over the Rocky Mountains, the best beach on the East Coast — you get the picture. But what about moving somewhere new? This requires a different set of criteria. Vacation</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/luxury-mens-brand-chooses-bluestone-home-for-fall-catalog-photo-shoot/">
<img width="920" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-920x690.jpg 920w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Peter-Millar-photos-with-Bluestone-Construction.jpg 1024w" sizes="(max-width: 920px) 100vw, 920px">
<h3>Luxury Men’s brand chooses Bluestone custom home for Fall catalog photo shoot</h3>
</a>
<p>After a 4 day photo shoot with luxury fashion brand Peter Millar at our client’s rustic custom home for their fall/ holiday luxury men’s apparel catalog, we got some fun aerial and ground shots of our own thanks to Carl Amoth. Very impressive to see what goes into all of the amazing photographs a brand</p>
</li>
<li>
<a href="https://bluestoneconstruction.com/2020-master-design-award-winner/">
<img width="921" height="690" src="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg" class="img-responsive wp-post-image" alt="" loading="lazy" srcset="https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-921x690.jpg 921w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-300x225.jpg 300w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1024x767.jpg 1024w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-768x576.jpg 768w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8-1536x1151.jpg 1536w, https://bluestoneconstruction.com/wp-content/uploads/2020/09/Best-Asheville-nc-luxury-home-builder-Bluestone-Construction-8.jpg 1600w" sizes="(max-width: 921px) 100vw, 921px">
<h3>2020 Master Design Award Winner for Best Outdoor Environment</h3>
</a>
<p>We are so delighted to win another award for this stunning custom home in Fairview, North Carolina. The work we do represents the best of the best in design, materials, and talent. We thank everyone who helped put this project together. It is always a collaborative creative process that leaves us grateful and satisfied standing</p>
</li>
</ul>
</div>
</section>
Here's a link to my Codepen: https://codepen.io/ajarrow/pen/oNxmxGr
EDIT
After looking at your website, it looks like there is a media query with a min-width of 700px (any device with a screen width of greater than 700px, which would be a vary large phone) which is handling the .blog-list element. Under that width, the blog-list element no longer has a grid-column-gap defined and the columns are still set to three columns. So if you add a simple media query like below, it should work as expected:
#media only screen and (max-width: 700px) {
.blog-list {
display: grid;
grid-template-columns: 1fr;
padding: 0 8px;
}
}
Also, some other things I noticed while on your website:
The div with an id of site-frame has a margin-bottom of 515 px to allow the location/contact info at the bottom to be seen when the user scrolls to the bottom of the page. That's cool, except that the margin isn't removed when the location/contact info is moved inside the site-frame at 760px. Yep, you guessed it...add another media query with a max-width of 760px:
#media only screen and (max-width: 760px) {
#site-frame {
margin-bottom: 0 !important;
}
}
And you have to use !important because the original margin is inline, which will override anything else unless you use !important.
And then the images in the 'Featured Projects' directly above the 'News' section were being stretched and shrunk/overlapped by their parent element. After a bunch of head-scratching, I fixed the problem with this CSS:
.project-list a img {
max-height: 100%;
object-fit: contain;
max-width: 100% !important;
}
Those are just some things I noticed, you can do what you want. Also, I still didn't see the CSS I gave you the other day...did you remove it or is it not coming through? It looked like you were using WP...to add custom css, log in to the backend of your site and when you're viewing the front page of your site, hit the 'Customize' button (paintbrush icon on mobile) in the header bar at the top. Scroll to the bottom, select 'Additional CSS', and paste the code box on the left. Let me know the results!
EDIT
A very simple way to add 'Read More' buttons would be to borrow the styling from the class special-button (which is being used on the 'Meet With Us' button directly below the posts) with an a element:
Read More
You would have to add this to the bottom of each post and change the href attribute manually. A more dynamic way to do it would be to add this bit of javascript AFTER the blog posts:
<script>
document.querySelectorAll('.blog-list li a').forEach(function(item) {
var newA = document.createElement('a');
newA.href = item.href;
newA.classList = 'special-button';
newA.textContent = 'Read More';
item.parentElement.insertAdjacentElement('beforeend', newA);
});
</script>