Jump to content

Fit any size screen


danhodge

Recommended Posts

After asking a few other people, on here, and others, i have realized that the kind of websites i end up making always end up not fitting any monitor except mine...

 

So i was wondering, if i work in percentages the whole way through the coding process, will it just pick up on the monitor size and take a percentage of that?

 

The only issue that creates is that someone with a significantly smaller screen will have overlapping images if they are inserted...

 

 

Thanks a lot,

Danny

Link to comment
Share on other sites

I could be totally off base here because as everyone here know I am just learning, however...

 

It strikes me that the best thing to do is yes, work with percentages to some degree, but also set a minimum width so that you will not have that overlapping issue.

Edited by joecool
Link to comment
Share on other sites

You can use % widths for every element including % for side margins and side padding, totalling 100%. Unfortunately borders can't be sized in % so leave them in px and make the total of other items 97% or 98%.

 

Code image widths in %

<img style="width: 25%;" src="image.jpg" alt="Image 1" />

If the image height isn't stated it will adjust in proportion.

 

If you try to combine % with min-width and max-width you will have a lot of trouble. Everything has to be % (except borders).

 

It's difficult to get it right for complicated pages as a small window 320px wide will squash everything up and a 1920px window will space it all out too wide.

 

Most people stick to min-width and max-width for a page container with margin: 0 auto to center it in larger window widths. At least one of the elements inside the page container should have no width stated so that its width is fluid.

Link to comment
Share on other sites

Ahh, thanks for both replies :)

 

And i have:

margin-left: auto;
margin-right: auto;

 

Will this have the same effect? Admittedly, i was told about this without asking any questions, so i wasn't sure of its use...

 

Could you please go into more detail into the effect this has on the site?

Link to comment
Share on other sites

left and right margins set to auto will simply center the element within it's container.

 

Say an element was 500px wide and auto left and right margins, and its container is 1000px. Then the element with 500px width will have 250px margin on both left and right sides.

 

Margins and Paddings only work on block elements, and block elements stretch to full width of its container unless it's floated (in which case auto-margins won't have any effect) or has a specific width set (px, em or even %).

 

So auto-margins have nothing to do with fluid width websites (%width).

Edited by BeeDev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...