0

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%;
             }  
         }

Edited by solomon_13000

3
Contributors
4
Replies
17
Views
1 Year
Discussion Span
Last Post by jkon
0

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 by gentlemedia

0

Do I place this code inside the media query?

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

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.

Edited by solomon_13000

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.