How to make my page responsive

Code Feedback
1

Hello, campers. When I resize the browser window the page layout brakes, however I used flexbox to make my page responsive.
Could you give any hints on how to make my page responsive.
Thanks.

This is my codepen: Tribute page for freecodecamp (codepen.io)

2

Hi @evianet

You should use a media query @media to define your styles for for smaller screens.

3

I used media query and now it’s responsive, apart from images; i want them to go from top to down side by side as its from mobile view. Could help on how to do it? Thanks.

4

You can review this lesson. You don’t need a media query to make the images stack.

On a side note, keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)

  • The test script, with all tests passing, should be included when you submit your projects.
  • Your page passes 1/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.
5

Thanks for the help! You said to use flex-wrap property, but do i use it with media query? Because i have two conditions: i want images to go from left to right on bigger screens and from top to bottom if viewed from smaller screens.

6

Hi @evianet

Remove the margin from the .child-photo-1 and .child-photo-2 and put align-self: center instead

.child-photo-1,
.child-photo-2 {
  align-self: center;
}

You can review this lesson about align-self

7

I’m not sure who you’re replying to. If you click the reply link in the person’s post, or mention them by name (@Roma for me) it’d be easier.
While I didn’t say to “use flex-wrap property” I did send you back to that lesson so I’ll respond thinking you’re asking me.
If you’ve reviewed the lesson and tried what you learned in your project you’ll see you don’t need to use a media query to make the images stack.

I see what you’ve commented out in the media query. You’re close. Move that out of the media query and put it right below your body selector. And all you need is;

.parent-photos {
  display: flex;
  flex-wrap: wrap;
}

It’s difficult sometimes getting to that ah-ha moment with flexbox…and grid too. Something you can play with to get additional practice is flexbox froggy

8

@racomajv thanks, now two photos are responsive. But how to these two photos get closer each to other? Do you have ideas? Thanks :slight_smile:

Tribute page for freecodecamp (codepen.io)

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.