What’s on your mind?
Hi everyone,
I'm working on a website, but I'm having trouble making it look good on mobile phones. It looks fine on desktop, but on smaller screens, the layout breaks or elements overlap. I'm using basic HTML and CSS (no frameworks).

Can someone guide me on the best way to make my site responsive? Should I use media queries or is there a better method? Any tips or sample code would be very helpful.

Thanks in advance!

If I were you, I would set all the widths in %, not in pixels. I would place images into a container and set the width to the desired percentage for the image to display, and the height to 'auto'. Then, I would give the image itself a 100% width.
I would use media queries wherever the design breaks, and then probably change the text size so that it is discernible at all widths. Elements that are to be clicked on need a certain amount of margin/padding. Containers that contain elements that are placed beside each other on a wide screen could be made to stack on smaller screens.

Others may chime in with more good advice. The above is just off the top of my head.

Coffeecup Software, the company whose forum you are using, has a very good HTML Editor, and if you want to have it easier with changing from wide to narrow (or narrow to wide), check out its Site Designer.

Good luck!

There are a lot of videos on you tube about this using HTML, CSS and JS (some even provide code examples to download.) one of the best and most comprehensive for using "HTML/0CSS/00JS" is by a guy called Kevin Powell
https://www.youtube.com/@KevinPowell/videos, as I said there are many others

And there are video examples of "How To" make a responsive website from scratch by CoffeeCup themselves


As Inger also says CoffeeCup "Site Designer" is a really great app, and because it's a sort of WYSIWYG app, then you can see the results of what you have done as you do it, and fine tune it accordingly. You can also use some of the ways that you can find on YouTube,

Combine the two and WOW you are on the way to produce some stunning and magical websites. Finally the forum members are a great bunch of users who are willing to and do share tips and tricks on "How To" and answers to your questions as best they can.

Hey, tt sounds like the main issue is that your layout isn’t adapting well to smaller screens, which is very common when starting out. The simplest and most effective way to make your site responsive is to use CSS media queries—these let you adjust styles (like font sizes, widths, or flex/grid layouts) based on screen size. You’ll also want to use relative units (%, em, rem, vw) instead of fixed pixels whenever possible, so elements scale naturally. If your website is for a business with a complex structure (like an ecommerce site), it may be worth partnering with a professional web development company such as Computools, which specializes in building scalable, responsive, and user-friendly platforms. For smaller personal or portfolio sites, learning and applying responsive CSS techniques will usually be enough. In short, start with media queries and flexible layouts, and scale up to professional help if your project demands more stability and polish.