Hi, I am really new to web design and have the following very basic question.

I have built my first page with WP and Bricks (locally, so it is not online). Now, in a given view (e.g., desktop view), everything I created in sections, containers, blocs, and columns looks alright. BUT when I switch to mobile view, some items are not aligned properly, or blocks overlap etc, so I do some adjustments until this looks fine, too. And then the same with mobile landscape view.

Now the question: Is this procedure common and accepted as good web design practice, or would one expect that the desktop view should transform faultlessly into a mobile view without the need for any adjustments? In other words, is the way I did it ok or a terrible beginner’s way?

I'm not sure that there is a golden formula that will allow you to perfectly create a design that works flawlessly on an ultrawide desktop, a modest Android phone and everything inbetween

There is absolutely nothing wrong with giving each device view/breakpoint the TLC it deserves

If you were building websites for a living then you could figure out what works in terms of layout and spacing - and make a template from it, but for just one website you can consider going over the different views as proofing

Mobile first!

Always always build your site so it works properly on a phone and then see how it looks on desktop.

Don't ever begin with a design and then try to make the content fit.

Write all your content, source images, get the site structure sorted, add calls to action, trustmarks and other converting elements.

Once the site has been assembled you can then choose a theme to make it look pretty.

You do not need a page builder. And don't build locally, get it online and constantly test your page speed and other performance parameters.

Thanks everybody. These are important advices I will try to follow.

Your approach is common among beginners and even seasoned designers. It's natural to make adjustments for different views, as ensuring consistency across devices is essential in web design services. Most layouts need tweaks to look their best on mobile, desktop, and everything in between, so you're on the right track!

Edited November 1, 20242 yr by I am Noman

It's completely normal to encounter alignment issues and overlapping elements when transitioning from desktop to mobile views, especially as a beginner. Here are some key points to consider:
Responsive Design: While many frameworks aim to make designs responsive automatically, adjustments are often necessary to achieve the best look on different screen sizes. It’s common practice to fine-tune layouts for mobile and tablet views after designing for desktop.
Viewport Adjustments: Since each device has a different screen size and resolution, manual adjustments help ensure that your content is displayed optimally. This includes resizing images, adjusting margins, and changing font sizes.
Testing Across Devices: Always test your site on various devices and orientations (landscape and portrait) to see how it performs. Tools like Chrome DevTools can simulate different devices, but real-world testing is invaluable.
Iterative Design: Web design is often an iterative process. It's perfectly acceptable to adjust and refine your layout until everything looks just right.
So, rest assured, your approach is not a terrible way to start; it’s a practical and accepted method in web design. As you gain more experience, you'll develop a better understanding of how to structure your layouts for responsiveness from the get-go. Keep experimenting and learning—you're on the right track! If you have any more questions or need further guidance, feel free to ask!