css responsive - scaling

Question

solomon_13000 14 Junior Poster in Training

9 Years Ago

The following html consists of two section, the left and the right. The problem I am facing is when I view on tablet or other mobile device the image (dimension 562 x 330) on the left does not scale consistently with the information box on the right. I attempted to add attributes in the media query but fail to scale the image well. So I removed it. Did I missed out something?

This is my html code:

<!--header end here-->
         <div class="middel">
            <div class="rotate-img"><img  alt="saint_3" src="images/gd_3.jpg"></div>
            <div class="right-contant">
               <b>*** ********</b></br>
               <p>
               ********** **** ****** ***** & *********.</br></br>
               **** ********* **** & ********* ******* ***** (Very Powerful & enegetic) done in ******* language.</br></br>
               ******** *erala **** ******* & ********* using ******** oil ******** only. The ****:</br><br>
               * ** ***.** - * Hours</br>
               * ** *****.** - * Days</br></br>
               For ******** and ************ use the ******* listed above.
               </p>
            </div>
         </div>

This is my css code:

         .wrap {
             margin-bottom: 0;
             margin-left: auto;
             margin-right: auto;
             margin-top: 0;
             width:980px;
         }
         .address b{ 
             font-weight: normal;
             color: rgb(51, 183, 53);
             font-family: Verdana, Geneva, sans-serif;
         }
         .right-contant b{ 
             font-size: 20px;
             font-weight: bold;
             color: rgb(51, 183, 53);
             font-family: Verdana, Geneva, sans-serif;
         }
         .right-contant p{ 
             font-size: 14px;
             font-weight: normal;
             font-family: Verdana, Geneva, sans-serif;
         }
         .header {
             border-bottom-color: rgb(51, 183, 53);
             border-bottom-style: solid;
             border-bottom-width: 15px;
             float: left;
             padding-top: 20px;
             width: 100%;
         }
         .logo {
             float: left;
             width: 25%;
         }
         .header-banner {
             float: left;
             width: 45%;
         }
         ul {
             margin-bottom: 0;
             margin-left: 0;
             margin-right: 0;
             margin-top: 0;
             padding-bottom: 0;
             padding-left: 0;
             padding-right: 0;
             padding-top: 0;
         }
         .header-banner li {
             display: inline;
             float: left;
             list-style-image: none;
             list-style-position: outside;
             list-style-type: none;
             padding-right: 40px;
         }
         .address {
             float: left;
             padding-top: 16%;
             width: 30%;
         }
         .add-img {
             float: left;
             padding-left: 20px;
         }
         .address p {
             float: right;
             padding-right: 30px;
         }
         .middel {
             float: left;
             margin-top: 30px;
             width: 100%;
             padding-bottom:30px;
             border-bottom: solid 15px #aa0000;
         }/*
         .left-contant {
             -moz-border-bottom-colors: none;
             -moz-border-left-colors: none;
             -moz-border-right-colors: none;
             -moz-border-top-colors: none;
             border-bottom-color: #ccc;
             border-bottom-style: solid;
             border-bottom-width: 1px;
             border-image-outset: 0 0 0 0;
             border-image-repeat: stretch stretch;
             border-image-slice: 100% 100% 100% 100%;
             border-image-source: none;
             border-image-width: 1 1 1 1;
             border-left-color: #ccc;
             border-left-style: solid;
             border-left-width: 1px;
             border-right-color: #ccc;
             border-right-style: solid;
             border-right-width: 1px;
             border-top-color: #ccc;
             border-top-style: solid;
             border-top-width: 1px;
             float: left;
             min-height: 322px;
             width: 49%;
         }*/
         .right-contant {
             -moz-border-bottom-colors: none;
             -moz-border-left-colors: none;
             -moz-border-right-colors: none;
             -moz-border-top-colors: none;
             border-bottom-color: rgb(51, 183, 53);
             border-bottom-style: solid;
             border-bottom-width: 1px;
             border-image-outset: 0 0 0 0;
             border-image-repeat: stretch stretch;
             border-image-slice: 100% 100% 100% 100%;
             border-image-source: none;
             border-image-width: 1 1 1 1;
             border-left-color: rgb(51, 183, 53);
             border-left-style: solid;
             border-left-width: 1px;
             border-right-color: rgb(51, 183, 53);
             border-right-style: solid;
             border-right-width: 1px;
             border-top-color: rgb(51, 183, 53);
             border-top-style: solid;
             border-top-width: 1px;
             float: right;
             min-height:283px;
             width: 37%;
             padding:2%;
         }
         .rotate-img {
            /*
             width:561px;
             height: 329px;
             float:left;
             margin:10px 10px 0px 140px;
             */
             float: left;
             text-align: center;
         }
         .footer {
             float: left;
             width: 100%;
             padding-top:20px;
         }
         .footer-logo {
             float: left;
             text-align: center;
             width: 80%;
         }
         .footer-address {
             float: right;
             width: 20%;
         }
         .footer-address p{ 
             font-size: 14px;
             font-weight: normal;
             font-family: Verdana, Geneva, sans-serif;
         }
         @media screen and (max-width: 991px) {
             .wrap {
                width: 720px;
             }
             .logo img {
                width: 100%;
             }  
             .header-banner li {
                 display: inline;
                 float: left;
                 padding-right: 32px;
                 width: 40%;
             }
             .header-banner img {
                 float: left;
                 height: auto;
                 width: 100%;
             }
             .footer-logo img {
                width: 100%;
             }
             .address {
                padding-top: 10px;
             }
             .add-img {
                 float: left;
                 padding-left: 0;
                 text-align: center;
                 width: 100%;
             }  
         }
         @media screen and (max-width: 767px) {
             .wrap {
                width: 100%;
             }
             .address {
                 float: left;
                 width: 40%;
             }
             .logo {
                 float: none;
                 margin-bottom: 20px;
                 margin-left: auto;
                 margin-right: auto;
                 margin-top: 0;
                 margin-top: 45px;
                 width: 35%;
             }
             .header-banner {
                 float: left;
                 width: 60%;
             }
             .header-banner li {
                 display: inline;
                 float: left;
                 padding-right: 0;
                 width: 40%;
             }
             .address p {
                text-align: center;
             }
             .add-img {
                 float: left;
                 padding-left: 0;
                 text-align: center;
                 width: 100%;
             }
             .left-contant{ width:100%;}
             .right-contant{ width:95%; margin-top:20px;}
             .footer-logo {
                width: 100%;
             }
             .footer-address {
                 float: left;
                 width: 100%;
             }
         }
         @media screen and (max-width: 480px) {
             .header-banner {
                 float: left;
                 text-align: center;
                 width: 100%;
             }
             .header-banner li {
                 display: inline;
                 float: none;
                 padding-right: 0;
                 width: auto;
             }
             .address {
                 float: left;
                 text-align: center;
                 width: 100%;
             }
             .add-img {
                 float: none;
                 padding-left: 0;
                 text-align: center;
                 width: auto;
             }
             .address p {
                 float: none;
                 padding-left: 30px;
             }
             . img {
                 float: none;
                 height: auto;header-banner
                 width: unset;
             }
             .logo {
                 float: none;
                 margin-bottom: 20px;
                 margin-left: auto;
                 margin-right: auto;
                 margin-top: 0;
                 text-align: center;
                 width: 100%;
             }
             .logo img {
                 text-align: center;
                 width: auto;
             }
             .right-contant {
                 margin-top: 20px;
                 text-align: center;
                 width: 95%;
             }
             .footer-address {
                 float: left;
                 text-align: center;
                 width: 100%;
             }  
         }

html-css

Edited 9 Years Ago by solomon_13000

3 Contributors
4 Replies
354 Views
2 Days Discussion Span
Latest Post 9 Years Ago Latest Post by jkon

gentlemedia 803 Master Poster

9 Years Ago

There are 2 things that are important in order to make images fluid:
1. don't declare width and height attributes on the img tag in the HTML
2. put the following CSS block in your stylesheet

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

The first one you do follow, but the second I don't see in your CSS.

There is now actually more to it, becaue this CSS trick was the only trick we had before the official responsive images technique was developed. This because scaling large desktop images down for smaller screens is for several reasons not such a good thing to do.
https://responsiveimages.org/

Edited 9 Years Ago by gentlemedia

Reply to this topic

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.

solomon_13000 14 Junior Poster in Training · Answer 1 · 2015-10-22T23:45:29+00:00

Do I place this code inside the media query?

.rotate-img img{
   max-width: 100%;
   height: auto;
}

solomon_13000 14 Junior Poster in Training · Answer 2 · 2015-10-23T03:02:29+00:00

I followed your advice and added the following line of code:

.rotate-img img{
             max-width: 100%;
             height: auto;
             width: auto\9;
         }

It does work, however when I scale the browser window there are inbalance in the scaling. However I did come across an article that says we can use different image size in media queries to overcome the issue.

jkon 636 Posting Whiz in Training Featured Poster · Answer 3 · 2015-10-24T23:47:40+00:00

Think about to turn to real responsive apps with other UI for mobiles and tablets and other for PC's. What is called today “responsive” is heavily misusing of media queries and ends up to the minimum common factor and because Mobiles have different events most of them (except the real simple ones that I couldn't call “design”) don't even work. I don't believe that is responsive to let a customer or your site in that mess with only gain for you to maintain only one UI.