How do you make a website compatible with mobile?

General Discussions
, ,
1

I’m planning to make a portfolio website. Just videos, pics, and some text descriptions.

I would like to make it viewable on mobile too, and by that I mean the content will still be in order and won’t be jumbled so it will still be easy to understand.

How can I do that? As of now I only have knowledge of basic HTML and CSS.

1 Like
2

I’ve had to make dozens of websites mobile-ready, and the key starting point is always responsive design. If you’re looking to make your website mobile-friendly, start with this meta tag in your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This ensures the browser scales the layout correctly on smaller devices. Then bring in CSS media queries to adjust font sizes, layout widths, and even hide elements when needed:

@media only screen and (max-width: 768px) {
  body { font-size: 14px; }
  .container { width: 100%; }
}

This is your foundation, get this right, and you’re on your way.

3

That’s a solid start, @mark-mazay. I’d add — once you’ve got the basics in place, layout flexibility becomes key to really make your website mobile-friendly. I rely heavily on Flexbox and CSS Grid for this. Flexbox, for instance, helps align and space items nicely across any screen size, and using properties like flex-wrap makes elements stack naturally on smaller screens. Same with Grid — define multiple columns for desktop, then collapse them into single columns on mobile using media queries. Also, avoid fixed-width images. Instead, go with this pattern:

img {
  width: 100%;
  height: auto;
}

It keeps everything clean and fluid across devices

4

Exactly, @dimplesaini.230 structure and layout go hand in hand. I’ve learned that if you want to seriously make your website mobile-friendly, switching to relative units like %, em, or rem is a game-changer. It gives your layout breathing room across devices without locking things down. Responsive media is another thing people often miss. Videos embedded with iframes? Wrap them in a responsive container. Want to move faster? Frameworks like Bootstrap or Tailwind CSS offer mobile-first grid systems out of the box. They save time, keep your CSS clean, and make testing across breakpoints a breeze. Why reinvent the wheel when the right tools are already out there?