website widths

by 4 replies
5
Hey everyone,

Have a quick question on my website widths.

At the moment when you go onto the website on a laptop it is going off the page. How do I get the website to automatically adjust to fit everyone's screens?

Thanks :-)
Katy
#website design #website #widths
  • The function you need is called LIQUID WIDTH (which adjusts down to the pixel according to the browsers width). Another option would be RESPONSIVE TEMPLATE (which changes width depending on the type of device used: desktop/laptop/tablet/mobile).
  • As a starting point, you need to convert any fixed "width:X" attributes in your CSS to "max-width:X".

    That's the starting point for making a website "Responsive". Rather than defining that objects are a fixed width, you are setting a maximum width for the element relative to its parent container.

    There's much more that can be done to make it fully responsive, including the addition of CSS media queries to customize the layout based on the browser width.
    • [1] reply
    • What system are you building your website with? Is it hard coded? Are you using Wordpress? If so, what theme?

      What you are looking for is termed "responsive design". It is pretty much impossible to make element by element changes on top of a non-responsive code base and wind up with a responsive site.

      If you are using Wordpress you need to find a better theme. If you are hardcoding you should start off with a responsive framework. Twitter Bootstrap is very popular, I also like the semantic grid.

      You can break a responsive framework by hardcoding nested element widths in pixels. All widths should be percentage based and in many cases further limited by max-width and min-width values.
  • Banned
    [DELETED]
  • Hi,

    Thanks for all of the replies,

    Im using Studiopress - Corporate Theme and I am using wordpress. Really sorry its taken so long to reply back but I do really appreciate all of the help.

    Thanks,

    Katy
  • Banned
    [DELETED]
Join the discussion

Next Topics on Trending Feed