Member Avatar for GilbertB

I have a webstie template and I want to preview it something like this :

How can I combine my html to a mobile phone layout ?

Thanks

  • 3 Contributors
  • 2 Replies
  • 93 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by code739

Dani AI

Generated

Short answer: there are two separate things to do — make the page behave like a mobile page (responsive CSS + viewport) and optionally show it inside a phone-shaped preview. is right that responsive design is the core requirement; was on the right track suggesting frameworks can speed that up. Below are practical steps and small examples to apply immediately.

Add the viewport and make assets flexible:

<meta name="viewport" content="width=device-width, initial-scale=1">
/* fluid images and predictable box model */
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

A simple media query pattern to change layout at a breakpoint:

@media (max-width: 600px) {
  /* stack columns, enlarge touch targets, hide wide elements */
  .two-col { display: block; }
  .nav a { padding: 12px 16px; }
}

To preview in a phone frame locally: use your browser device emulator (Chrome/Firefox/Safari dev tools) for accurate behavior, then if you want a stylized mockup put your page in an iframe inside a small wrapper:

<div class="phone">
  <iframe src="yourpage.html"></iframe>
</div>
.phone { width: 360px; height: 640px; border-radius: 28px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
.phone iframe { width:100%; height:100%; border:0; }

Troubleshooting tips: if things look zoomed or cut off, check that viewport meta is present and remove any fixed-width elements (tables, absolute-width images, fixed pixel containers). Test on real devices or use remote debugging for device-specific issues (touch events, pixel ratio, fonts). If the goal is only a cosmetic preview, the iframe wrapper is fine; for real behavior, rely on responsive CSS + device testing.

Recommended Answers

All 2 Replies

Member Avatar for simplypixie

You need to learn responsive design / development if you want your site to work on mobile.

Member Avatar for code739

These would help for your responsive develipment of your site
you could use some(resize the browser screen and make it as size of the mobile screen you
want observed the magic =)
1140 grid system : http://cssgrid.net/
Foundation : http://foundation.zurb.com/
Skeleton : http://www.getskeleton.com/
Bootstrap:

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.