How to align <li> elements horizontally?

HTML-CSS
1

Hi,
I am working on product landing page test.
Was it a mistake to first of all make whole html/css in order to pass all 16/16 tasks? I thought I’d do it as first and then when all rules are set I’d get to style it in CSS but whenever I use

display: inline

or

text-align

etc

and nothing happens.
I’d like to move my nav bar (test1,test2,test3,test4) to the right top and make it horizontal instead of vertical unordered list. How do I do it?

I’ve done all challenges multiple times (couple hundreds) and I’ve learnt how to use HTML but when it comes to styling I suck at it :frowning:
Here is my code pen https://codepen.io/bartosz-spychaa/pen/QWOEjpx

2

There are a few ways to do this but I think the most popular method is to use the CSS flexbox layout method (you would use this on the <ul>).

1 Like
3

Thanks for the response!
I’ve kind of finished my test product landing page.

Please review it

I’ve passed 15/16 points. I need to add media query and I’d do it but…
Why would I want background color changed f the device’s screen is smaller or bigger than x? I looked for examples of @media use and all they say “…this color will happen if x happens…” Why? What is that useful about changing background color?

Should I just add:

body {
 background-color: pink; 
} 
@media all and (device-width:900px) {
 body  {
   background-color:blue; 
 } 
}

and pass it or maybe there’s some more sophisticated usage of media query?

4

That’s just an example. The specific test will probably pass with that example.
The use of media queries is basically to change how your page looks on screens of different sizes.
You can change the size of your font or specific elements, add new things, change the layout of the page and so on…
Basically, think of what you would want your page to look like on mobile and how you would want it to be displayed.

1 Like
5

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