Viewing page on IPhone

HTML-CSS
1

when i view my spage on an IPhone. mMy navigation splits in two. how can i fix that?

https://captureability.com/new/index.html

IMG_7892
IMG_78921284×2277 147 KB

2

Hi @louis5

You could use flexbox and @media queries for smaller viewports, instead of adding styling properties to li elements.

Happy coding

3

I mean, that is the correct behavior. If they didn’t wrap or stack, they would overflow the page. Can you make it look prettier? Sure, but the behavior itself isn’t wrong.

Adding flex wrap to the UL would make it wrap a little nicer, but it would still be the same behavior.

ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

Adding a media query and stacking all the links at the same time would be another option.

ul {
  display: flex;
}

@media (max-width: 680px) {
  ul {
    flex-direction: column;
  }
}

I would definitely suggest using flexbox and not float.

4

I know nothing about flexbox orvhow it works and use it. Do i have to rebuild my page?

5

Hi @louis5

Here is an article about flexbox with examples.

Find the layout you want then add the suggested code.

Happy coding

1 Like
6

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