this post was submitted on 03 Jul 2026
10 points (100.0% liked)

Web Development

5725 readers
11 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Related Communities

Wormhole

Some webdev blogsNot sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

CreditsIcon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 3 years ago
MODERATORS
snowe@programming.dev
erlingur@programming.dev
Ategon@programming.dev
Vacant@programming.dev
10
Fix Your Overflows (fractalvoid.codeberg.page)
submitted 1 day ago by hikosan@lemmy.ml to c/webdev@programming.dev
8 comments fedilink hide all child comments
 

Many websites don't bother to fix this thing which significantly improves the UX when browsing websites on small screens (smartphones, etc.). Overflows cause the webpage to drift when attempting to scroll down, and it can be a frustrating experience (at least, for me, especially when I have to re-adjust because the initial size of the text is small because somewhere down the page there is a long string of monospace text or code piece in a tag).

you are viewing a single comment's thread
view the rest of the comments
[–] hikosan@lemmy.ml 1 points 20 hours ago (1 children)

If there is a website (yours or someone else's) that has an overflow issue and you don't know how to fix it, you can share the link and I will take a look, try to fix it, and reply with a solution.

Alternatively, if you have any related questions, feel free to ask and I will try to answer them.

[–] bitfucker@programming.dev 1 points 4 hours ago (1 children)

Woah, that's very generous of you. I have a question tho. I have a dual screen setup. What is in your opinion the best DX to develop for both mobile and desktop at the same time? My current approach is having an editor + docs + devtool on one screen, the website on the other with full screen. When I need to check how it looks on mobile I turn on the mobile mode thingy but I always felt it is kinda jank

[–] hikosan@lemmy.ml 2 points 4 hours ago* (last edited 4 hours ago) (1 children)

That's a matter of preference, what you're already used to. But the way that I personally do things when it comes to the design part is first do the "desktop version", then the "mobile version", i.e. I don't do those things simultaneously. If you have a dual screen setup, it sounds useful to have the DevTools on one screen and the browser on another, is all I can tell.

Here's the reasoning behind "first desktop, then mobile": first, I start with the problem, and it takes a lot of time to get things straight; then, I try to build a mockup of how the product (website) should look like considering all of its features (elements); then, I write the HTML/CSS. Here, I am only focusing on the desktop, because my focus is turning the mockup into a reality, into the finished product. And everything else that is related to "mobile" or "tablet" or whatever smaller-screen-view comes with the use of CSS media queries. So that's not the main problem, should not be the main concern.

Once I am done with the "desktop mode", my goal becomes making that to be responsive and adaptive. Responsive, in this case, means some elements are stretchable/can shrink upon resizing. Adaptive means that layout changes depending on the size of the screen. And I am absolutely using the mobile mode from DevTools, it is not a "jank", it is actually very useful, because I can choose from the dropdown what screen I want to emulate, including toggling the touch mode, or adding some throttling (also an underrated feature, because most people don't really care about performance), etc.

Hope this answers your question!

[–] bitfucker@programming.dev 2 points 3 hours ago (1 children)

Thanks a lot. One follow up tho if I may. How do you determine the markup and styling if the layout changes significantly from browser to desktop? Do you ship 2 different versions of the HTML and style them accordingly? My struggle is often about how to make the HTML and CSS so I don't repeat anything if possible. One example is having a list of navigation links in HTML once should be enough and show correctly on desktop and mobile via CSS only. But that is how a lot of UI frameworks usually do it. They have 2 different navigation markup. One for mobile as a drawer and one for desktop as a navbar. Only one is active at a time. The navigation link list is usually defined as a JS object but I don't feel like that's the way to do it properly.

[–] hikosan@lemmy.ml 1 points 48 minutes ago* (last edited 38 minutes ago)

I see what you mean. Ignore learning from frameworks. They are bad. They are messy, chaotic, and they are not tailored for your website, they are generalized for any use case, so things are awkward, bloated, etc.

So, try to avoid duplicating things. The rule of thumb is: if you want to duplicate something, then something is not right. And your feelings about it are on point. I will show an example of how I do things below. What I also try to avoid is using JavaScript when the same exact thing is possible to achieve with pure HTML+CSS (think of cases when someone has JS off). CSS is powerful enough for you to be able to create a DOOM-like game.

Good news is, you don't need JavaScript to create such a navbar. And many people still don't know how to properly create navbars, e.g. they are using lists (ul,li) or might still use tables. SO, it all comes to your knowledge of CSS and how to "refer" to elements (e.g. your knowledge of ">" and "~").

Suppose we have an HTML where I define a header with a navbar:

<header>
    <div class="logo"></div>

    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

Notice how it does not use any lists, the links are not items--those are simply links, and I am also using semantically-correct tags (even though you can still use div class="navbar"). Then, in CSS:

header {
    display: flex;
    justify-content: space-between;
}

.logo {
    background-image: url("https://lemmy.ml/pictrs/image/fa6d9660-4f1f-4e90-ac73-b897216db6f3.png");
    width: 32px;
    height: 32px;
    background-size: 32px;
}

nav {
    display: flex;
    gap: 20px;
}

nav a {
    text-decoration: none;
}

I want you to also notice how I have this "logical progression" in how CSS reflects exactly the flow of HTML elements, to keep it clean and intuitive (sounds like something very obvious, but from my experience it's still rare). This is me doing to for "desktop", the next concern would be making it "mobile-friendly". This is done using a "trick" where you add an invisible checkbox and make it look like a button, and once you click on it, it triggers the navbar. But I will post the full thing below, to not turn it into a full blown tutorial, I don't know if there are character limits here.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
		}

		.logo {
			background-image: url("https://lemmy.ml/pictrs/image/fa6d9660-4f1f-4e90-ac73-b897216db6f3.png");
			width: 32px;
			height: 32px;
			background-size: 32px;
		}

		nav {
			display: flex;
			gap: 20px;
		}

		header input, header label {
			display: none;
			cursor: pointer;
		}

		@media only screen and (max-width:500px) {
			header {
				position: relative;
			}

			nav {
				display: none;
				position: absolute;
				top: 100%;
				right: 0;
				flex-direction: column;
				background: #fff;
				box-shadow: 0 4px 12px rgba(0,0,0,.15);
			}
			nav a {
				padding: 20px;
			}

			header label {
				display: block;
				width: 20px;
				height: 20px;
				background-image: url("https://www.svgrepo.com/show/94793/menu-button-of-three-horizontal-lines.svg");
				background-size: 20px;
			}

			#menu_toggle:checked ~ nav {
				display: flex;
				flex-direction: column;
				width: 100%;
			}
		}

	</style>
</head>
<body>

	<header>
		<div class="logo"></div>

		<input id="menu_toggle" type="checkbox">
		<label for="menu_toggle"></label>

		<nav>
			<a href="#">Home</a>
			<a href="#">About</a>
			<a href="#">Contact</a>
		</nav>
	</header>

</body>
</html>

I don't want to assume things you know or don't know, but I want to still point out some things like how I start my CSS with resetting certain values, like margins and paddings, and also setting box-sizing. It's an absolute must-have (believe me, back in a day I spent lots of hours trying to understand what is wrong when the reason was all because of box-sizing).

[Edit]: Also, one thing with positioning the nav menu is that in header you have to specify "relative", and the menu (nav) should be "absolute". That's because the "absolute" is being set relative to the header, so the element's properties are going to be relative to the header, i.e. if you do not set the "relative", it will assume it's relative to the body and navbar will appear at the bottom of the page. This is also one of the concepts that at first might be confusing and annoying, but once you get a grasp of it, you'll be more confident with writing vanilla CSS and not touching frameworks ever again.

Anyways, try not to overthink and always keep in mind that things should not be complicated and the best way to do something is the simplest way.