I am fairly new to using CSS and as such have been working to better understand responsive web design in order to implement it on a site that I plan to use as a portfolio project. I am currently trying to resize a set of three unordered lists and a set of 6 images when at three different screen sizes in pixels. When I open the project in dev mode and attempt to use responsive, nothing on the page changes as it sticks to the large size of three per row for each item. After looking at my code it doesn't seem like anything I have done is incorrect and I could use some help reviewing it.
In my CSS file, .ProjectImageGrid refers to the grid used to order the images based on size of device, .AboutMeGrid is the grid for my three unordered lists, .ProjectImage and .AboutMeLists are for formatting for the two respectively. In case you would like to view the HTML code for this part, I will also list that below, but I do not think the issue is within that code.
.container { /* Sets page margins and max size */
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.AboutMeGrid {
display: grid;
grid-template-columns: 100%;
}
@media (min-width: 600px) {
.AboutMeGrid {
grid-template-columns: 50% 50%;
}
}
@media (min-width: 900px) {
.AboutMeGrid {
grid-template-columns: 1fr 1fr 1fr;
}
}
.ProjectImageGrid {
display: grid;
grid-template-columns: 100%;
}
@media (min-width: 600px) {
.ProjectImageGrid {
grid-template-columns: 50% 50%;
}
}
@media (min-width: 900px) {
.ProjectImageGrid {
grid-template-columns: 1fr 1fr 1fr;
}
}
.ProjectImage {
justify-self: center;
padding: 4%;
}
.AboutMeLists {
list-style: none;
font-style: italic;
color: blue;
}<!DOCTYPE html>
<html>
<head>
<title>My First Site</title>
<link rel="stylesheet" href="style.css"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div >
<div >
<img src="Assets/gvbhnj.jpg" width="150" height="150"/>
<h1 id="MyName">Name Here</h1>
<h3>Simple Bio</h3>
<p>You miss 100% of the shots you don't take</p>
</div>
<div >
<div >
<h1>I am</h1>
<ul >
<li>Hard working</li>
<li>A team player</li>
<li>Willing to try new things</li>
</ul>
</div>
<div >
<h1>I like to</h1>
<ul >
<li>Play Baseball</li>
<li>Play videogames</li>
<li>Practice coding</li>
</ul>
</div>
<div >
<h1>My Links</h1>
<ul >
<li>
<a href="https://GitHub.com/SampleLink">GitHub</a>
</li>
<li>
<a href="https://LinkedIn.com/in/SampleLink">LinkedIn</a>
</li>
<li>
<a href="https://www.facebook.com/SampleLink/">Facebook</a>
</li>
</ul>
</div>
</div>
<div>
<h1>My Projects</h1>
<div >
<img src="https://via.placeholder.com/300"/>
<img src="https://via.placeholder.com/300"/>
<img src="https://via.placeholder.com/300"/>
<img src="https://via.placeholder.com/300"/>
<img src="https://via.placeholder.com/300"/>
<img src="https://via.placeholder.com/300"/>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
Using a flexbox on your container is a very responsive and mobile-friendly way to display your content. I added a container to your HTML and gave it a flex display. Also, I added justify-content: center; so that everything remains in the center when resizing. See the changes I made below.
.container { /* Sets page margins and max size */
max-width: 1000px;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
}
.AboutMeGrid {
display: grid;
grid-template-columns: 100%;
}
@media (min-width: 600px) {
.AboutMeGrid {
grid-template-columns: 50% 50%;
}
}
@media (min-width: 900px) {
.AboutMeGrid {
grid-template-columns: 1fr 1fr 1fr;
}
}
.ProjectImageGrid {
display: grid;
grid-template-columns: 100%;
}
@media (min-width: 600px) {
.ProjectImageGrid {
grid-template-columns: 50% 50%;
}
}
@media (min-width: 900px) {
.ProjectImageGrid {
grid-template-columns: 1fr 1fr 1fr;
}
}
.ProjectImage {
justify-self: center;
padding: 4%;
}
.AboutMeLists {
list-style: none;
font-style: italic;
color: blue;
}<div >
<div >
<div >
<h1>I am</h1>
<ul >
<li>Hard working</li>
<li>A team player</li>
<li>Willing to try new things</li>
</ul>
</div>
<div >
<h1>I like to</h1>
<ul >
<li>Play Baseball</li>
<li>Play videogames</li>
<li>Practice coding</li>
</ul>
</div>
<div >
<h1>My Links</h1>
<ul >
<li>
<a href="https://GitHub.com/SampleLink">GitHub</a>
</li>
<li>
<a href="https://LinkedIn.com/in/SampleLink">LinkedIn</a>
</li>
<li>
<a href="https://www.facebook.com/SampleLink/">Facebook</a>
</li>
</ul>
</div>
</div>
<div>
<h1>My Projects</h1>
<div >
<img src="https://via.placeholder.com/300"/>
<img src="https://via.placeholder.com/300"/>
<img src="https://via.placeholder.com/300"/>
<img src="https://via.placeholder.com/300"/>
<img src="https://via.placeholder.com/300"/>
<img src="https://via.placeholder.com/300"/>
</div>
</div>
</div>CodePudding user response：
You might not be setting your viewport in your html
If you haven't include this line within the head of your html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You pretty much need to include this line whenever you ware doing responsive design as it gives the browser more instructions to help with determining when to be responsive.