Member Avatar for chrisschristou

i try make my site compatible with all stadanrt devices and when i litle work but my proble is images is still large small screen how can i do it automatical resize in small screen, such they are in diferent class diferent div ... here is my css

@media only screen 
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #F8F8F8;
    width: 100%
    color: #000;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 15;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}
.container {
    width: 100%
    max-width: 1550px;
    background-color: #FFFFFF;
    margin-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
}
.sidebar1 {
    float: left;
    width:100%;
    max-width: 180px;
    background-color: #EADCAE;
    padding-bottom: 10px;
}
.content {
    float: left;
    width:100%;
    max-width: 968px;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
}
.sidebar2 {
    float: left;
    width:100%;
    max-width: 180px;
    background-color: #EADCAE;
    padding: 10px 0;
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #000;
    color: #000;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-top: 15;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}
.container {
    width: 100%;
    max-width: 758px;
    background-color: #FFFFFF;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
.sidebar1 {
    float: left;
    width:100%;
    max-width: 70px;
    background-color: #EADCAE;
    padding-bottom: 10px;
}
.content {
    float: left;
    width:100%;
    max-width: 380px;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
}
.sidebar2 {
    float: left;
    width:100%;
    max-width: 70px;
    background-color: #EADCAE;
    padding: 10px 0;
}
}
  • 3 Contributors
  • 4 Replies
  • 127 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by simplypixie

Dani AI

Generated

Short version: the fix your hinted at is the right idea (constrain images to their container and preserve aspect ratio), but if applying that rule didn't change anything the problem is almost always elsewhere: a missing mobile viewport meta, CSS parse errors (which stop later rules from applying), inline width attributes on the IMG tags, images used as CSS backgrounds, or a selector specificity issue.

Checklist to debug and fix

  • Add the responsive viewport to the document head so mobile browsers render at device width:
<meta name="viewport" content="width=device-width, initial-scale=1">

  • Validate and fix the stylesheet. Look for missing semicolons, properties without units (e.g., margin-top: 15 should be 15px), unbalanced braces, and duplicated/malformed @media blocks. A single syntax error early in the file can prevent later rules from being applied.

  • Inspect a problem image with browser devtools: check the computed styles and see which rule sets the width. Look for inline attributes (width="600") or inline style on the element. Those will override many stylesheet rules unless you explicitly override them.

  • Confirm whether the “image” is an <img> element or a background-image. Background images must be handled with background-size (for example, contain or cover) rather than <img> rules.

If you need to serve different files for different screen sizes, use responsive image markup (srcset/sizes). Example:

<img src="small.jpg"
     srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width:600px) 100vw, 50vw"
     alt="...">

Extra tips: test after each change on a real device or using device emulation; remove hard-coded pixel widths from parent containers so images can scale; compress and resize source images for performance. If a screenshot helps, post one (as suggested) and show the HTML for one of the oversized images so the exact override can be pointed out.

Recommended Answers

All 4 Replies

Member Avatar for simplypixie

Set all images to 100% width with a max-width specific to images in specific divs to make sure they don't get bigger than the orginal

img {
    width: 100%;
    height: auto;
}
Member Avatar for himlamq7

You can take pictures of the problems you encounter for everyone to see where the problem is it?

Member Avatar for chrisschristou

i have add this code in my css but still same proble on small screen pictures are very big

img {
    width: 100%;
    height: auto;
}
Member Avatar for simplypixie

Sorry, that should have been max-width: 100%;

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.