Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,163,442 members, 7,853,922 topics. Date: Saturday, 08 June 2024 at 08:03 AM |
Nairaland Forum / Science/Technology / Programming / Why Does The Page Layout Break When I Zoom In (585 Views)
Why Does Everyone Think Javascript Is Hard? / Will Google Meet Features Win Over Zoom In The Video Conferencing Market? / Notice the nairaland layout changes (2) (3) (4)
Why Does The Page Layout Break When I Zoom In by arabmoney14: 12:17pm On Apr 06, 2022 |
Hello bosses in the house. I have this navbar I'm working on. I realize that on zooming the browser to a certain level, the navbar no longer covers the whole width of the browser, and its content are flowing out of it. Picture1: how it looks on normal view Picture2; when I zoom it, the right edge doesn't cover the whole screen Picture3: I notice same when I toggle device toolbar to a certain width. Abeg how can I make it cover the whole screen. @Qtguru @tensazangetsu20 and other bosses Modified: Here is the code [url] https://codepen.io/Capt-jack14/pen/mdpXvor [/url]
|
Re: Why Does The Page Layout Break When I Zoom In by Nobody: 12:44pm On Apr 06, 2022 |
You must be Mis using max width |
Re: Why Does The Page Layout Break When I Zoom In by LikeAking: 1:38pm On Apr 06, 2022 |
You will build for various screen sizes. Check out responsive web dev. |
Re: Why Does The Page Layout Break When I Zoom In by arabmoney14: 3:13pm On Apr 06, 2022 |
GREATIGBOMAN:I didn't use max width. I've modified the post with a link to the code |
Re: Why Does The Page Layout Break When I Zoom In by arabmoney14: 3:13pm On Apr 06, 2022 |
LikeAking:OK thanks |
Re: Why Does The Page Layout Break When I Zoom In by Nobody: 3:41pm On Apr 06, 2022 |
Your code has no body tag, html tag and Head tag 1 Like |
Re: Why Does The Page Layout Break When I Zoom In by stanliwise(m): 4:39pm On Apr 06, 2022 |
GREATIGBOMAN:he is using codepen so he don't need that |
Re: Why Does The Page Layout Break When I Zoom In by stanliwise(m): 4:52pm On Apr 06, 2022 |
arabmoney14:notice it only happens on mobile platform. so the idea is that you're using flex-box without flex-wrap so when the screen is to small to accommodate the flex. it becomes too wide more than the screen and over stretch even more than it's parent element. So to solve this issue you need not do something like .navlist { flex-wrap: wrap; } basically you need to add the above in devices with max-screen 600px and so on |
Re: Why Does The Page Layout Break When I Zoom In by arabmoney14: 6:16pm On Apr 06, 2022 |
stanliwise:Thanks boss, will try this |
Re: Why Does The Page Layout Break When I Zoom In by Ronin1: 6:41am On Apr 07, 2022 |
Your header tag is overflowing and width is set to 100% by default, you can either adjust your content to fit the screen on that screen size or set a value above 100% you could also do overflow: auto; but I don't know why anyone would want a scrolling navbar 1 Like |
Re: Why Does The Page Layout Break When I Zoom In by arabmoney14: 9:25am On Apr 07, 2022 |
stanliwise: This worked. Thanks a lot boss! |
Re: Why Does The Page Layout Break When I Zoom In by arabmoney14: 9:26am On Apr 07, 2022 |
Thanks to everyone that contributed. Through your help, i've been able to solve the issue. Thanks once again |
(1) (Reply)
Django Is Taking Over Mern Stack. Why Is That? / Here Are Some Creative Ways You Can Money With Chat GPT / Where Can One Physically Learn AI Engineering & Data Science
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 20 |