I want to switch OFF responsive design

Design help Custom code
1

I want my website to look the same on all devices. I don’t want it to scale. I just want it to show smaller on mobile and bigger on desktop, but otherwise the same. How can I achieve that?

I tried with putting this custom code:
<meta name='viewport' content='width=device-width, initial-scale=1'>
inside the <head> tag and it didn’t do anything. I don’t even know why; I’m not that good technically.

This code, though:
<meta name='viewport' content='width=1300, initial-scale=1'>
actually works, but then the width is always static (obviously!) and every time I load a page, I have to zoom out manually. And what I want is to automatically take the full width of the screen, without me having to manually zoom out. Otherwise, this option is the closest to what I want to achieve, because then on mobile I get to see the smaller version of the desktop site.

In short, I simply want all additional layouts for multiple devices out of the picture. Please, help!

2

Not sure if this’ll work, buuuuuuut:

Set the Viewport

You’ve already discovered that using width=1300, initial-scale=1 forces a certain width, but it requires manual zooming to fit the screen. Instead, you should keep the viewport tag simple to ensure accessibility and proper functionality on mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1">

Step 2: Use CSS for Scaling

The trick lies in using CSS to scale the content based on the device width. You can achieve this by wrapping your entire site’s content in a container and using CSS transform: scale(); to scale down on smaller devices. Here’s how you can do it:

  1. Wrap Your Content: Ensure all your website content is wrapped in a div, we’ll call it site-container

  2. Add Custom CSS: Use this CSS to scale your site based on the viewport width. This example assumes a design width of 1300px (the width you seem to have designed for). Adjust the 1300 value if your design width is different.

.site-container {
  width: 1300px; /* The width of your design */
  margin: 0 auto; /* Center the container */
  transform-origin: top left; /* Ensures scaling happens from top left */
}

@media (max-width: 1300px) {
  .site-container {
    transform: scale(calc(100vw / 1300)); /* Scale based on viewport width */
  }
}

This CSS makes use of a media query to apply scaling only when the viewport width is less than or equal to your design width (1300px in this case). The calc(100vw / 1300) dynamically calculates the scale factor based on the current viewport width. For viewports wider than 1300px, the content will display at its natural size, centered in the browser.

Step 3: Embed Custom Code in Webflow

To apply this custom code to your Webflow project: Paste the CSS code into the Head Code field inside a <style> tag and lemme know what happens.

3

  1. My folder tree, or container structure, starts with a Body, then a Site-Container, and then a Content-Container. If I’m not pasting this code inside the <head> tag for the website, then I guess I’ll have to paste it for each of my pages somewhere related to the Body?

  2. My design is not 1300 px. That’s a random number I chose, at which the site looks like on a desktop.

  3. Sorry, can you explain exactly where I need to go to paste what? Where’s that Head Code field, what does it mean “inside a <style> tag”, and do I need to change something from that CSS code you wrote?

4

I figured out what you meant by the style tag, and I pasted the code inside the head tag of the Home page. The result was that a) the page scaled again, although in a new way that I hadn’t seen before (and all elements inside were incorrect width and heigth), and b) the page was again bigger than the screen and I had to zoom out manually.

Any other ideas?

5

@alfietta not really, you could try something like this inside Webflow with the Finsweet plugin Fluid responsive in Webflow - Client-First

Then if everything’s in Rems you could scale per breakpoint?

6

After a lot of googling and reading, I fixed it finally - phew!..
The code that works is this: <meta name="viewport" content="width=1500"> inside the <head> tag of each page.
That’s it. In other words, simply removing the initial-scale=1 part, which apparently messes things up.
Now the website looks the same on all devices, and automatically takes the full width of devices smaller than 1500 px, whereas in devices larger than 1500 px it centers in the middle. Zoom in also works (I read with some people using the viewport meta tag zooming stopped working, but I can still zoom).

1 Like