Posted on

#StackBounty: #html #html5 #image #firefox #srcset Width of the image displayed is not exatly 100vw when the user agent selects image o…

Bounty: 50

The user-agent selects one of the images below based on device pixel ratio and viewport size. But i have noticed that only when user-agent selects ./emmaHQbanner.jpg, the width of image displayed is not exactly 100vw instead its little more than that. I can’t figure our why ?

html

<body>
<div>
    <img sizes="100vw"  src="./emma310.jpeg" srcset="./emma720banner.jpeg 720w, ./emma1920banner.jpeg 1920w, ./emmaHQbanner.jpg 3200w" alt="picture of emma watson">
<div>

css

*{
    padding: 0;
    border: 0;
    margin: 0;
}

html {
    width: 100vw;
}

div {
    width: 100vw;
    margin: 0;
    background-color: red;
    font-size: 0;
}

more info

user agent - firefox on ubuntu
emmaHQbanner.jpg - Resolution (width=3200px , height=642px)

case study

viewport (width 300)  (zoom - 100%)  chosen image - 720px   (display width-300)
viewport (width 640)  (zoom - 300%)  chosen image - 1920px  (display width-640)
viewport (width 800)  (zoom - 240%)  chosen image - 3200px  (display width-900*)
viewport (width 1920) (zoom - 100%)  chosen image - 1920px  (display width-1920)
viewport (width 6400) (zoom - 30%)   chosen image - 3200px  (display width-7200*)

Get this bounty!!!

Posted on

#StackBounty: #html #css #html5 #css3 #flexbox how to make different section with responsive behaviour in html

Bounty: 50

hi i’m a very new designer trying to learn designing

problems pointed by my boss:

  1. my boss told your layout is semantically is not correct
  2. lines are not aligned correctly
  3. not responsive

he advised me:

  1. convert it to flexbox as content will come dynamically, flexbox wll handle
  2. make it such a responsive such that based on content responsiveness should be preserved

problems image:

enter image description here

<

div class=”snippet”>

<

div class=”snippet-code”>

*{
    margin: 0;
    padding: 0;
}

html{
    /* font-size: 62.5%; */
}

body{
    box-sizing: border-box;
    background: #ffffff;
    height: 100vh;
    padding: 2px;
    color: #A7A7A7;
}
header.main-header .main-navigation ul.nav{
    /* background: grey; */
    border-bottom:2px solid #E4E4E4;
    display:block;
    /* display:table; */
    width: 100%;
}

header.main-header .main-navigation ul.nav li{
   padding: 6px;
   border-right:1px solid #E4E4E4;
   position: relative;
   display:table-cell;
}
header.main-header .main-navigation ul.nav li::before{
  content: "";
  position: absolute;
}

header.main-header .main-navigation ul.nav li.active-nav{
    border-bottom: 3px solid #F89106;
}

#content_wrapper_search_etl{
    width: 100%;
}

#content_wrapper_search_etl::after{
    content:'';
    display: table;
    clear: both;
}

section{
    display: block;
}

.leftside-search-area{
    width: 13%;
    float: left;
    height: 98vh;
    /* background: green; */
    border-right: 1px solid #E4E4E4; 
}
.leftside-search-area input{
  border-left: none !important;
}

.center-search-area{
    width: 27%;
    float: left;
    height: 98vh;
    /* background: yellow; */
    border-right: 1px solid #E4E4E4;
}
.right-search-area{
    width: 49.3%;
    float: left;
    height: 98vh;
    /* background: orangered; */
}
.right-search-area input::-webkit-input-placeholder { /* Chrome */
    color:#FE8D51;
}
.center-search-area input::-webkit-input-placeholder { /* Chrome */
    color: #A1A1A1;
}
.right-search-area input,.center-search-area input,.leftside-search-area input{
    width: 101%;
    border: none;
    border: 1px solid #E4E4E4;
    border-top: none;
    height: 25px;
    border-right: none;
    outline: none;
    font-family: FontAwesome !important;
}

.vertical-box .box{
    display: flex;
    width: auto;
    height: 200px;
    border-bottom: 1px solid #E4E4E4;
    margin-top: 4px;
}

.vertical-box .box h4{
    font-size: 13px;
    font-weight: 300;
}

.vertical-box .box .tags ul{
   list-style: none;
}

.vertical-box .box .tags ul li{
   display: block;
   padding: 6px;
   background: #E5E5E7;
   margin-top: 19px;
 }

 .vertical-box .box .tags ul li.square{
    display: inline-block;  
    padding: 3px;
  }

.vertical-box .box .tags ul li.round{
    border-radius: 9px;
    padding: 4px 34px;
    font-size: 11px;
}

.vertical-box .box .tags ul li.tag-active{
    background: #FB8D58;
    color: #fff;
}
  

      

          
      

     

         

             
             

                 

                    
File Types

                    

                       
    
                           
  • 
                           
    • 
                           
  •                            
    • 
                           
  •                            
    •  
                       

                    

                 </div>
                 

                   
Date

                   

                        
    
                            
  • Today
    • 
                            
  • Yesterday
    • 
                            
  • Last week
    • 
                       

                    

                 </div>
                 

                     
Status

                     

                        
    
                            
  • Today
    • 
                            
  • Today
    • 
                            
  • Today
    • 
                         

                     

                 </div>
             </div>
         </section>
         <section class="center-search-area">
                <input type="search" placeholder="    Search...">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, reiciendis. Officiis necessitatibus maiores labore quaerat ea eum maxime, ratione ut fugit in voluptatibus. Cum amet perspiciatis, quasi quae illum labore?</p>
         </section>
         <section class="right-search-area">
                <input type="search" placeholder="  Dhobi">
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Animi ipsum, saepe deleniti modi expedita minus amet doloribus impedit rem deserunt neque necessitatibus sequi nisi facilis harum tempora quae voluptate voluptatibus.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi suscipit est modi exercitationem ipsum eaque, laborum iure hic nobis adipisci, magnam alias sit maxime repellat commodi quam! Numquam, repudiandae?</p>
         </section>
     </div>
  </div>