Responsive grid/flex layout

I am trying to incorporate responsive design to my portfolio website, which is a flex layout. Unfortunately, I not seeing any changes, I am bit frustrated. It is a simple flex column layout, nothing too complicated. When I add media query, I dont see any effect.

https:// codepen.io/kola-aderinto/full/OevpeK

You are using ‘padding-left’ every where.
Get rid of that.
If you want to make the center align the content or any div use:
text-align:center
or
margin:auto -> with fixed width (px or %) (control it with media queries)

After all, try to write the css in a structured way.
If you can control the styles with classes, ids or any other selectors then try not to writing inline css over the tags directly.

I tried inspecting your code and correcting it, check this attached screenshot:

Good Luck :slight_smile:

This doesn’t look like link or a screen shot. Can you please send me the link. or attach an actual image

It is not showing any screen shot image, can you please attach an actual image

It would be better if you did not have two thread with the same question (other thread).

  1. You need to move all the media queries so they come after the selector they are overwriting the styles for.

Example, you have this:

@media (max-width:560px){
  .flex-container{
   display: block;
  }  
}

.flex-container{
  display: flex;
  flex-direction: column;
  height: 100%;
}

It should be this:

.flex-container{
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (max-width:560px){
  .flex-container{
   display: block;
  }  
}
  1. You have invalid HTML and CSS, press the down arrow to the right of the HTML/CSS code boxes and select the “Analyze” menu item. See if you can fix some of them.

  2. Your grid syntax is incorrect

grid-column-template: auto, auto;

Should be

grid-template-columns: auto auto;

  1. I’d suggest logging into Codepen, go to your settings and under the Editor Options make sure that you have checked “Autocomplete”. Now when you start typing the start of a CSS property it will give you a dropdown list. For example, if you start to type grid it will give a list of all the CSS properties that starts with grid.

  2. Look for other resources on web design, YouTube is full of tutorials (search, landing page, portfolio project). Complete a few tutorials and every time you learn something new try it out yourself. You don’t have to make full pages every time when trying out something just limit it to little projects, like a navbar, an image gallery, a section design with some layout. Or just practice some technique like centering and aligning using some colored boxes.

1 Like

Try in this way:

Add the following css

.grid_wrap{display: grid;
    grid-template-columns: repeat(3,1fr);
    max-width: 500px;
    margin: auto;
    width: 100%;}

.portfolio-link img.project-pic { max-width: 100%; }

Use html of grid images like this

<div class="item2">

Here are some of my recent Projects:
<br>
    <div class="grid_wrap">
<a class="portfolio-link" href="https://codepen.io/freeCodeCamp/pen/NNvBQW"><img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642794/d084d718-6171-11e6-83fa-ede5d0a67ad2.png" alt="project" width="120" height="140"></a>
<a class="portfolio-link" href="https://codepen.io/FreeCodeCamp/pen/PNKdjo" target="_blank">
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642772/7d02406c-6171-11e6-8c79-40a2933163dc.png" alt="project" width="120" height="140"></a>
<a class="portfolio-link" href="https://codepen.io/FreeCodeCamp/pen/ONjoLe" target="_blank" class="project project-tile">
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642771/7cd6a0c4-6171-11e6-87fb-915f6084d104.png" alt="project" width="120" height="140"></a>
<a class="portfolio-link" href="https://codepen.io/FreeCodeCamp/pen/mVEJag" target="_blank" class="project project-tile">
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642773/7d08cb94-6171-11e6-8c45-22e7cf64683e.png" alt="project" width="120" height="140"></a>
<a class="portfolio-link" href="https://codepen.io/FreeCodeCamp/pen/wGqEga" target="_blank" class="project project-tile">
<img class="project-pic" src="https://cloud.githubusercontent.com/assets/15967809/17642774/7d091806-6171-11e6-8d47-ecf2f2833fe2.png" alt="project" width="120" height="140"></a>
    </div>
</div>

Avoid using same ‘id’ multiple times. ‘id’ should be unique.

Remove all padding -left values (including media queries) in your code

Make width 100% and max-width fixed
for example->

if you use width:500px , make it like this:

width:100%; max-width:500px; margin:auto;

Make proper use of html tags: you are using unnecessarily some where in the main content, make it a <div>.
<footer> should always be at the bottom of the content.

Thanks, this was very very helpful.

Welcome :slight_smile: