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.