Flexbox/media issues

I’ve been trying to figure out the flexbox in the welcome section. Initially, the picture went outside of the welcome section whenever collapsing the screen. I fixed that with media queries and a few other things. Now, I have a different issue. How do I change the flex rows to columns when it gets to around 575px and still prevent the text/picture from leaving the welcome section. I attempted a media query to make the picture smaller and font smaller once it becomes a column, but I’m not getting it to work. Thoughts?

Please excuse css on everything below the welcome section - I haven’t gotten there yet.

I’m not going to answer your question directly, I’m going to try and steer you into a new way of approaching this.

Start by narrowing your browser as skinny as you can make it and then style the page so it looks good at that skinny width. There should be no horizontal scroll bars and don’t use any media queries. You want this to be your default CSS.

Once you have it styled nicely for the narrow view port then gradually widen your browser until you feel you have enough room to rearrange the layout for a wider view port. This is where you will add your media query. You will use min-width for the query and set it with an em value (you can divide the px value by 16 to get the em value). Then you will put all of the styling changes you need to make for the wider view port in this break point. Repeat as needed.

Bottom line, start narrow and work your way out.

3 Likes

hey @medic_83,

I dont think you need to use any media queries at this stage everything you want doing can be done with just using flexbox, it looks like your media queries are all over the place, this is just gonna get confusing, you can use flex-wrap to make the boxes change to column and give your container a min-height: 100vh; so then it will get larger on its own when it changes to mobile view.

1 Like

@medic_83, you got good advice from bbsmooth

Something that may help. Get familiar with the box methodology. Once you realize everything you see on a webpage is just a box you need to move around and resize, things will start to click. Possibly adding the following at the top of your CSS will help you see how your page is currently set up;

* {
  border: 1px solid red;
}

On a side note, you have elements out of order and you have two html opening tags.
Everything the browser renders should be in the body element.
Codepen already provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags).
Whether you’re using an IDE and pasting your code into codepen or strickly using codepen maybe review this for an understanding of the HTML boilerplate tags.

1 Like
  1. There has to be a space between @media and the parentheses @media (max-width:1400px)

  2. The order of CSS and media queries is important.

  3. Your min-width:575px media query is closed twice.

  4. You have justify-conetent it should be justify-content.


I would suggest you read/view some more about using media queries


https://www.youtube.com/results?search_query=media+queries+responsive+web+design

Thank you. I don’t know why media queries are giving me such a hard time. I’ve been watching a couple videos and reading a couple things about them and I feel like I’m starting to grasp them a bit better.

Thank you. I’ve been watching multiple videos are media queries, flexbox, and grids today and I think I’m ready to get back at it and try to clean it all up.