Problem with smartphone view of website

[jihes]

Hello,

I’ve a big issue with my website: the rendering with mobile is broken.

It’s still responsive but not showing good on whatever smartphone browser.

I don’t find the reason. Can you help me?

my website: http://pub.be/

Thanks in advance

[Chinmoy Paul]

Your site is broken on Desktop also. I think that you reduced the width. You should check the style.css file.

[Chinmoy Paul]

I think that I got the problem.

Replace

.boxed .site-container {
    background-color: #fff;
  //  -webkit-box-shadow: 0 0 3px #ddd;
   //    -moz-box-shadow: 0 0 3px #ddd;
   //      -o-box-shadow: 0 0 3px #ddd;
   //         box-shadow: 0 0 3px #ddd;
    margin: 40px auto;
    margin-top: 0px; /* remove this when using bg image or color */
    max-width: 1140px;
}

WITH

.boxed .site-container {
    background-color: #fff;
  /*-webkit-box-shadow: 0 0 3px #ddd;
       -moz-box-shadow: 0 0 3px #ddd;
         -o-box-shadow: 0 0 3px #ddd;
            box-shadow: 0 0 3px #ddd;*/
    margin: 40px auto;
    margin-top: 0px; /* remove this when using bg image or color */
    max-width: 1140px;
}

[jihes]

Hello Paul

Thanks for helping

Not working 🙁 I just made the change and clear the cache and I still have the problem…

[Chinmoy Paul]

Replace this CSS (line no 608)

.content, 
.home-bottom-left {
  float: right;
  width: 693px;
}

WITH

.content, 
.home-bottom-left {
  float: right;
  width: 600px;
}

Also you will add this

@media only screen and (max-width: 960px ) {
  body {
    margin-left: 7%;
    margin-right: 7%;
  }
}

@media only screen and (max-width: 800px ) {
  body {
    margin-left: 1%;
    margin-right: 1%;
  }
}

[jihes]

Changes are made but still not working…

[Chinmoy Paul]

You should check your style.css file. You added lot of custom css. So you will check them.

[Davinder Singh Kanith]

Have you added margin-left and margin-right 150px? Check attached screenshot, it seem to be causing the issue.

[jihes]

Hello Davinder,
I don’t find any 150px margin in my CSS.
Furthermore, everything was great before, I don’t have made any design change recently. I just have updated my plugins, Genesis and WordPress (+ added Security & Optimize plugins).

So I don’t get why things don’t work anymore.

Thanks for helping.

[jihes]

Hi again,

I think I found it. I use CSS Hero and I found 150px margin in the CSS. I delete it, and know it seems to be OK. (I’ll now have to check if I don’t have made changes that were useful).

Let me know if you see other issues. Thanks again.

JS

[Author]

Posts