Rendering in mobile device

My site:


Renders really bad in mobile devices (tested in iPhone 5).

This code (I got from you) does not help:

@media only screen and (max-width : 992px) {
article#post-5 {
position: relative;
top: -100px;
}
article#post-5 .ow-button-base.ow-button-align-right, article#post-5 .ow-button-base.ow-button-align-left {
text-align: center;
}
}

Please help!

Thanks!

LJL

Hi,

can you be more specific in which section your page are not displaying good when in mobile device?

The homepage is unrecognizable.
I guess this image tells everything…

I am using iphpone device simulator and its worked fine http://prntscr.com/9o7gde

But maybe you add this css code to fix it:

@media only screen and (max-width: 1024px) { 
  #header-banner {background-attachment: scroll !important;} 
}

Top page better.
But still pretty bad if you scroll down to Latest Posts:

Hi,

Please try this Custom CSS and let Us know how it works:

.entry-image img {
    height: auto !important;
    width: auto !important;
}

Add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Best Regards,
Csaba

Better.
But not perfect:

Hi,

Please add this Custom CSS too to fix the title going out of content box issue:

@media only screen and (max-width: 400px) {
.hentry .entry-title, .post .entry-title {
    font-size: 16px;
}
}

On the second screenshot ( landscape ) the Custom CSS is not loaded, so please try to clear your cache, so then it will have to work.

Best Regards,
Csaba

Thanks. Better.
But still problems with some black on the side of images in lanscape view.

Many thanks for all your help!
LJL

Hi,

Please try these css code to make it full width:

.entry-image img {
    width: 100%;
}