Create a site which doesn't re-size on any device.

Viewing 10 replies - 1 through 10 (of 10 total)

  • Hi Sam,

    Well your challenge is difficult, in fact you would make a website that is both accessible for a browser and smarthpones with zero resizing.

    Then make a website with the smallest screen width possible, like 320px wide.
    It will be ugly, but why not. Make it with table align=left for all things. It will screw on all devices longer than that :p

    Sample

    <tr>
<td width="320" align="center left">
<p>Proin id nisi porttitor, luctus tellus a, euismod leo aenean sed lorem ipsum.</p>
<p>Enter text: <b>adsfsdlkfjsdlfk</b> at dsfkjdshkfjdshfksdflsdkfj.</p>
</td>
</tr>

    If you don’t want scrolling, set this in your sits <head> area:

    <meta name="viewport" content="width=1024">

    Of course, set the width there to whatever you want your site to be.

    Also, be aware that you might see some negative effects from doing this. Anything from loosing mobile visitors (people don’t like scrolling) to lower Google ranks (Google ranks mobile responsive sites higher these days), but if you can live with that it’s all good.

    Cataustic, using viewport any size will fake what he tries to do. He said NO RESIZE. In case you don’t know, viewport do resize many things if called.

    Viewport doesn’t resize if it’s set to a fixed width as in my example above. That’s what that tag is for.

    https://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

    If you want to be doubley sure you can remove any responseive media queries and any % widths from the sites CSS code, and that will also do the same thing.

    In the first example that ThePaciFest gave, it’s actually going to be more ot do with the containing elements widths. Everything above the images is set wtih width: 100%; which, of makes it 100% of the page width – and as the images in the main banner end up being wider then that on a smaller screen resolution, they cascade as they are doing now. If any oen of the many containing `<div> elements is styled to the correct width, there won’t be any problems.

    Thread Starter ThePaciFest

    (@thepacifest)

    Hey guys,

    Thanks for your replies.

    I may have confused you. If you visit the link I posted (https://www.dreadmeister.com/Home/Html) you will see how if will remain the same size and centered when you minimize the resolution.

    I thought it would be a simple fix, as I did it somehow on my Weebly site: https://dreadmeister.weebly.com/

    Thanks,

    Sam.

    On the Weebly site, it’s plain to see what’s controlling that:

    #wrapper {
  margin: 0 auto;
  width: 960px;
}

    On the WordPress site that you’re trying to do, every element that has a width set is set at 100%. As I said before, that is what’s causing the issues. You need to set a defined width as anything that works on %’s will “overflow” when contents get too wide for the containing element, the way that your site is now.

    Thread Starter ThePaciFest

    (@thepacifest)

    So I should use px instead of %? and should i choose responsive or non responsive?

    Yes. That will ensure that things are the correct width.

    Oh, and if you want something that’s fixed width no matter what you don’t want responsive.

    Thread Starter ThePaciFest

    (@thepacifest)

    Okay I have changed the width to 1024px, and the content is now centered.

    Now the issue is the content doesnt fit?

    Thanks so much for all your information.

    PS. Nice dp! HAAH looks like my cat

    Regard, Sam

    Thread Starter ThePaciFest

    (@thepacifest)

    Okay I changed the width to 1310px and looks good! Do I need to change the height so it centers the page on smaller devices or whats the go with that?

    Cheers, Sam

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Create a site which doesn't re-size on any device.’ is closed to new replies.