[Web Design] Make Mobile-Only Sites Look Beautiful on PC! Implementing a Fixed-Frame Layout Centered on the Screen

As the web browsing environment shifts toward smartphones, the number of sites built with mobile-only designs is increasing. However, when a mobile-only layout is displayed as-is on a wide PC screen, the content stretches horizontally, which can compromise the design's intent.

In this article, I will explain a layout technique that keeps the design beautiful by setting a background image when viewed on a PC and placing a smartphone-sized "fixed frame" in the center of the screen.

The specific HTML structure and the CSS source code to be set are explained in detail on my technical blog. If you would like to see the specific implementation methods and code immediately, please refer to the main article via the link below.

https://morinokabu.com/2026/03/28/html-css-mobile-site-pc-layout/

Challenges of PC Display for Mobile-Only Designs

Websites designed for the vertical screens of smartphones suffer from significantly reduced readability when displayed as-is on the horizontal screens of PCs, as lines of text become too long and images are stretched excessively.

While one approach is to rebuild a completely different horizontal layout for PCs from scratch, this requires a significant amount of development effort. Therefore, a frame approach—treating the PC screen as a large "background" and containing the mobile layout within a frame in the center—is highly effective.

Fixing a Smartphone-Sized Frame in the Center of the Screen

With this method, when accessed via a PC screen width, a frame with a typical smartphone width (e.g., 375px) is placed in the center of the screen.

By adding decorations such as rounded corners and drop shadows to this frame, you can create a sophisticated and independent user experience, as if a real smartphone were placed on the PC screen.

Dynamically Optimizing Height with CSS Calculation Functions

When placing the frame, the most important factor is "height calculation." Since the monitor size of the PC being used varies by user, specifying the height in fixed pixels can cause it to overflow the screen or create unnatural margins.

To solve this, we combine units that retrieve the current browser viewport height with CSS calculation functions that allow for arithmetic operations. By having the browser automatically calculate the "total screen height minus the top and bottom margins," you can achieve a practical layout that maintains beautiful margins regardless of the monitor size.

Specific Implementation Code Available on the Blog

I have shared the concept of a layout that builds a smartphone frame on a PC screen.

All the source code ready for immediate use in actual development, such as "CSS properties to actually fix elements to the center of the screen," "specific ways to write functions that calculate based on screen height," and "settings to allow scrolling only within the frame," is posted on my main blog.

I have provided practical code that you can copy and run to verify its operation. If you are learning front-end techniques to achieve sophisticated displays, please check the details via the link below and use them for your own website production.