Member Avatar for active-worker

Hi Guys,

Good day
I have a web site: www dot my-portfolio-site dot site88 dot net/ and I want that the website has to be responsive and perfectly function on mobiles and tablets.

For your kind information, I know HTML and CSS coding. But I don’t know how to convert the website has to be responsive and perfectly function on mobiles and tablets.

So, please see my source code and suggest which code I should write. And where should I place it?

No more, I am waiting for your kind response.

Thank you.

  • 4 Contributors
  • 3 Replies
  • 112 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

Useful, practical next steps for converting a small portfolio site to be responsive (for ). Replies from , , and point in useful directions, but a modern, maintainable approach is mobile-first responsive design: add the viewport meta, make containers and media fluid, replace rigid column widths with Flexbox or Grid, and use media queries for breakpoints.

Place this HTML in the document head (once):

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

Put responsive CSS in your main stylesheet or a stylesheet linked after your base CSS. Minimal, high-impact rules to add or adapt:

/* fluid images and media */
img, video { max-width: 100%; height: auto; display: block; }

/* fluid page wrapper */
.wrapper { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }

/* basic mobile-first columns using flexbox */
.row { display: flex; flex-wrap: wrap; }
.col { flex: 1 1 100%; padding: 8px; }
@media (min-width: 768px) {
  .col { flex: 1 1 50%; }
}

Practical checklist and tips: convert fixed px widths to max-width or percent/vw units; use srcset/picture for responsive images to avoid sending oversized files; test in Chrome DevTools Device Mode and run Lighthouse for performance issues; prefer mobile-first media queries (min-width). Avoid maintaining a separate mobile page—responsive single pages are easier to keep correct and SEO-friendly.

Good references: Responsive design (MDN), Responsive images (MDN), and Chrome DevTools device testing (Device Mode).

Recommended Answers

All 3 Replies

Member Avatar for Member #1048311

You don't have to do much, just redwork your site to fit into FULL SIZE viewable 800 pixel wide pages, then, most smartphones with 800pixel wide displays will be able to display your Pages.

You can check your pages here:

As you quote, you know html and css, so, you should have no problem to do this.

Ernie

Member Avatar for <M/>

Here are a couple of sources that can help you out a bit more (i am not sure why you would have a problem doing this if you are good with html and css).

http://designshack.net/articles/css/quick-tips-for-creating-a-mobile-optimized-site/

http://stackoverflow.com/questions/4167164/convert-a-regular-website-to-a-mobile-website

http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

The poster above me has given a couple of important points but try using percentages to set the widths/heigts of somethings rather than pixels.

Edited by <M/>
Member Avatar for MidiMagic

In other words, make it compatible with an old PC that has only an 800 X 600 VGA screen:
- No big images
- No combined widths larger than 800px.

We're going back to the 1990s.

Another possibility is an alternate link to a reduced size page at the TOP of the page.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.