Streaming live at 10am (PST)

How can I make a non-responsive website


#1

I just want pc site.
how do i do?


#2

Hi @heony1975 welcome to the Webflow forums! Right now it's we don't have a simple switch where you can turn off responsive behavior for your site. But there is a way to make your site not responsive - so that it is the same width across all devices.

We have two responsive layout elements - the Container and the Columns - that make your layout change to fit different devices. If you don't want your layout to change don't use these elements:

You will instead have to use the Block to make your layout. I will show you how to use the block to create non-responsive containers and columns.

How to make a non-responsive container using the block:

  1. Add a Block to a blank page (drop it in the Body element).
  2. Give it a class like "Custom Container".
  3. Give it a width. If you want your website to always be 960px on every device, set the width for this class to be 960px. If you want it to be 1140px, then set it to that width.
  4. Give it a left and right margin of auto. This will make it centered in the page on any monitor bigger than 960px (or whatever you set the width to).

It should look like this:

To make make the left and right margins "auto" you can just click on the button on the bottom right corner of the margin/padding box:

Now in order to make non-responsive layouts you will have to make your own columns because the Columns element is responsive by default. To do this to create custom columns:

  1. Add a Block element to the "custom container" element you just created.
  2. Give it a class. For example "2 Column" to signify that this will be a 2 column layout.
  3. GIve this class 10px of padding on all sides (This is to give the content inside some spacing from other content in other columns. ).
  4. Give it a width of 50%. (This is because each Block will be 50% of the width so that 2 would fit in one container).
  5. Make it have a Float: Left. (This will make these Block elements stack next to each other. Usually Blocks stack on top of each other, but if you give them a percentage width and float them they will stack right next to each other.)
  6. Now you can copy paste this Block you will see that they stack right next to each other. You can put content inside these empty blocks.

They should look like this:

If you want to create different columns you can just do this:

  • For 3 Column layout set width to 33.33%
  • For 4 Column layouts set width to 25%
  • For X column layout set width to 100/X %

Let me know if this helps!


#3

Here's the Public link so you can see exactly what I did in Webflow:

https://webflow.com/design/non-responive-site?preview=5a4b9e270f75465a87ac76bfa936dd7a


#4

Thank you sooooo much SIR !!
You have helped me to solve my non-responsive site layout.
I was trying to align things center in my website.But because of non-responsive site i cant apply right properties.
But this is worked for me.

So, Thanx.


#5