Member Avatar for chound

I made a catalogue of specimens in a museum using HTML. when I view the files on my laptop, it can be seen properly. But if it is viewed in another pc the sizes of images and text are very huge.

  • 2 Contributors
  • 2 Replies
  • 140 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by chound

Dani AI

Generated

posted the stylesheet and asked which pixel values to change for smaller screens. Rather than manually shrinking many hard-coded pixel sizes, make the layout adapt: scale type with relative units, constrain the page width so content never overflows small displays, and let images resize automatically. That avoids chasing individual properties and gives predictable results across machines and browsers.

Practical CSS (drop into your stylesheet):

html { font-size: 100%; }           /* base follows user/browser settings */
body { font-size: 0.95rem; max-width: 760px; margin: 0 auto; line-height: 1.4; }

img { max-width: 100%; height: auto; display: block; }

@media (max-width: 760px) {
  body { font-size: 0.9rem; }
  .header { font-size: 1.1rem; }
}

Why this helps: rem/em scale with the base font so users and different systems see consistent proportions; max-width keeps content inside narrow viewports; img { max-width: 100% } preserves aspect ratio and prevents oversized pictures. Use media queries to make small, targeted adjustments instead of rewriting every rule.

Quick troubleshooting: verify browser zoom is 100% (reset with Ctrl+0), check OS font/DPI scaling, ensure pages use a standards doctype (<!DOCTYPE html>) so browsers render in standards mode, and inspect output from any WYSIWYG editor for unexpected inline styles. Echoing , testing in multiple browsers and at different window sizes is essential.

Further reading: guidance on responsive images and scalable units can help refine this approach: Responsive images and Values and units.

Recommended Answers

All 2 Replies

Member Avatar for peter_budo

Ovious is each pc has different resolution, so preferably you should build site for 800x600.
Another thing sometimes our pc's play games with us especially when you often overwrite your work in dreamweaver something on the back of document get mix up and is displayed ok on your pc, however seen on other is complitely different. If you wish put here full code on we will look at it.

Member Avatar for chound 
body {
    background-color: #FFFFCC;
    background-image: url(background.png);
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 24px;
    color: #336699;
}

h1{
    font-family: Times New Roman, Times, serif;
    color: #006666; font-weight: bolder; font-size: 40px;
}
h3{
    font-family: Times New Roman, Times, serif;
    color: #006666; font-weight: bolder; font-size: 22px
}
td, th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 24px;
    color: #333333;
    font-weight: bolder;
}

a {
    font-size: 12px;
    color: #336600;
    font-family: Arial, Helvetica, sans-serif;

}

.title {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 20px;
 background-color: #99CC00; color: #003333;}

.subtitle {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 30px;
 color: #003300;}

.header {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 20px;
    background-color: #669900;
 color: #FFFF33;
}

.nav {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    background-color: #CCFF99;
    color: #333399;
    text-decoration: underline blink;

}

.navLink {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    background-color: #DEDECA;
}

.sidebar {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 14px;
    padding: 3px;
    background-color: #FFFFCC;
 color: #003333;
}

.sidebarHeader {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 18px;
    color: #003300;
    background-color: #FFFF66;
}

.sidebarFooter {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 18px;
    background-color: #FFFF99;
 font-style: italic;
}

.footer {
  font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
    color: #333333;
    background-color: #CCFF99;
}

.legal {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #333333;
}

.box1 {
    border-width: thin;
    border-color: #99FF99 #003300 #003300 #99FF99;
 border-style: double;
 }

.promo {
    font-family: "Times New Roman", Times, serif;
    color: #000033;
}

.titlebar {
    font-family: "Times New Roman", Times, serif;
    font-size: 9px;
    color: #FFFFFF;
    background-color: #336699;
}

.dingbat {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #FFFFFF;
 color: #660000; font-weight: bolder; font-size: medium;
 }

input.big {
    width: 100px;
}

input.small {
    width: 50px;
}

This is the css file for the site. It can be seen clearly in 1024768. Now to what pixels should I change the font size so that it will work properly in 800600.

Edited by TrustyTony because: fixed format
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.