Stuck between "finish the whole project " and " make sure this header section looks right on mobile"

1

Here is something I want to be clear of: when designing a website, do I worry about its mobile layout later?? Or I worry about its mobile layout 1st???

Okay, for example for this project I am doing right now, http://codepen.io/zhouxiang19910319/pen/NdEeyw?editors=1100
and now I am stuck between

  • keep coding (finish other section of the page) and add all the other elements in (like the background picture)

    OR

  • Starting to make sure that my website looks right when the window size is smaller. (Cos if you shrink down the browser window now, every elements in the header looks messed up).

Which one comes 1st???

2

Almost everything Iā€™ve read up to this point in my coding journey has stated that we code for everything at once. That is why Bootstrap came about, so you could code once for most UI; mobile, tablet, laptop/desktop.

You could check out designs on w3s for inspiration -
http://www.w3schools.com/w3css/w3css_templates.asp

1 Like
3

What I mean is that now my header looks weird once you resize the browser.
Do I work on it right now??? Or wait until I finish the whole site, then add some code to make it more responsive.

4

It depends.

For someone experienced with CSS/Bootstrap, leaving a small layout issue until later is not a big deal. Especially when youā€™re trying to meet deadlines. You can (and will) always return later to adjust formatting.

However, because the point of the exercise is learning it might be worth your time to fix it now. You might learn something while fixing the header that you can apply to the rest of the site.

In the end, as is usually the case, itā€™s up to you. Both choices would work .

1 Like
5

Kk, noted. So I shouldnā€™t worry about these things too much.

6

Itā€™s really up to you and what you feel is important. You donā€™t really have to do anything in order, even the projects (Iā€™ve finished everything but havenā€™t started on my personal website). Thereā€™s no real correct way to go about it since everyone thinks differently. You can always go back to an old project - you probably will since youā€™ll learn so much while doing the other projects youā€™re bound to find something you can improve on in your old projects. Besides, you can never learn TOO much. Everything comes full circle eventually.

BUT if this particular issue is really something that bugs you, it isnā€™t hard to fix. There are multiple solutions depending on your preference.

You can use bootstrap so that certain elements show up depending on the size of the page. Just google ā€œbootstrap hiddenā€. So for your header, you can say that it only shows up when the screen is medium sized. Meanwhile, you can have another element (most people use a ā€˜hamburger menuā€™) that only shows up when the screen is small.

For pure CSS you can figure something out by replacing px as a unit and instead opting to use %, vh, vw, em, or even a combination of them using calc() - which runs math for CSS values.

With jQuery you can use the $(window).height() and .width() functions to obtain the size of the browser and have JavaScript make decisions based on that. The event for resizing in jQuery is, simply, ā€œresizeā€.

It would be something like,
$(window).on(ā€œresizeā€, function(){
//Do whatever you want to do here. For example, check if height is bigger than width, then toggle a class when it is.
});

This allows for more customization and precision, in my opinion.

1 Like
7

Just add few simple line and will be responsive for any screen n you should move ā€œaā€ tag inside ā€œliā€ with property display block :slight_smile:

ul {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  align-items: baseline;
}
ul li {
  list-style: none;
  flex: 1 0 140px;
}
2 Likes