Photoshop Question posted in
The official user guide can be found here.

How to keep default page size of my site while resizing browser – Photoshop

I have a problem that’s bothering me for a long, long time.
How can I keep default page size of my site while resizing browser.

Let’s just say page size is 1280×720, how can I keep that size when I resize the browser?
Example>google.com

enter image description here

This means that the page DIV elements don’t screw up..
Now, my site screenshot while browser resized…
enter image description here

You can see theres some problems with DIV in the upper right corner.
Now how I want it to actually be is like this:
NOTE image below is photoshopped to show an example.
enter image description here

Who ever knows how to do this, I would be really thankful.
If it’s possible without JavaScript than it would be even better 🙂

Thanks.

Tags:

4

Answers


  1. 0

    How can I keep default page size of my site while resizing browser?

    By this, I assume you mean have the website look the same across all possible resizes. Unfortunately, you can’t. There’s going to be a point where your content hits the edge of the page. What happens then? Do you want it to scroll horizontally? That’s default behaviour. You’d probably prefer the content to get shifted around the page in some way so that it never has to scroll horizontally. The best way to do that is to use media queries.

    Using a media query, you can modify how the page looks when resized:

    @media (max-width: 600px) {
  .sample {
    font-size: 20px;
  }
}

    You can change literally any aspect of your website with media queries, and can have a host of different designs for each width. You can even use media queries to adjust how the site looks based on orientation of a mobile device, with orientation, such as:

    @media (min-width: 700px) and (orientation: landscape) { ... }

    Hope this helps!

    Login or Signup to reply.
  2. 0

    So what you want to do is basically make a responsive website, unresponsive.

    Since you haven’t produced any code specific to your particular website, here are some guidelines –

    • Set a fixed page size in your CSS, for example – body{width: 1280px; height: 960px}
    • Clear all your @media queries in your CSS and <meta name="viewport"> tags in the <head> section of your HTML.

    If all you want to do is disable word-wrap, you can use white-space: nowrap.

    Be advised that there may be other changes that are specific for your website but these should get you started. Hope that helps!

    Login or Signup to reply.
  3. 0

    Simply give your <body> tag a fixed width using CSS:

    body{
    width: 800px;
    min-width: 800px; //make sure it doesn't shrink
}
    Login or Signup to reply.
  4. 0

    You can use or style using % but not in px as in 20px can be replaced with 7% or according to the size.

    or else we can use media query

    @media screen and (min-width: 480px) {
    body {
        //styling
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search