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
  • 114 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by simplypixie
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.