#StackBounty: #google-search-console #web-development #css #mobile Google Mobile Usability says "Content wider than screen" e…

Bounty: 50

Unable to fix error Google Mobile Usability > Content wider than screen in Google Search Console. I have try chrome mobile layout emulator from DevTools, set width to 320px but no horizontal scroll appears. So, all looks fine in emulator but google raises error. Then, I have add to css:

@media screen {
  html, body {
    width:      100%; 
    overflow-x: hidden;
  }...

But no effect, error still persist.

Test Live URL tool don’t show any error, all pages mobile friendly.

Any idea how to fix this? I’m sure this is google bug, but how to avoid it?

Edit: Still unable to reproduce or fix it. What’s wrong with this url for example: one of site pages


Get this bounty!!!

#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>