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!