My website looks odd on mobile

Support
#1

I am using x theme but it looks something odd to read a mobile version of an article . Lots of white space on left n right of article. Sometimes images cramps into text. Very difficult to read in my mobile.

When I read this site - https://spoiltpups.com - which is also x theme based it looks much better.

Could you assist please?

My site --> www.lowcostplayground.com

#2

Hello @Sulowski,

Thanks for asking. :slight_smile:

White space is coming because of a custom CSS you have added. Here is the code. I am also sharing the code that should fix the spacing issue. Under X > Theme Options > CSS please add following CSS and see how it goes:

css
.x-main.left {
    padding-right: 35px;
    width: 80%;
}
```


```css
/*add following CSS*/
@media only screen and (max-width: 600px) {
    .x-container.width {
    width: 85%;
    margin: 0 auto;
    }
    .x-main.left {
    padding-right: 0;
}
}
```
Please let us know how it goes.

Thanks.
1 Like
#3

Hi @Prasant

Problem is resolved on the main page but when you enter an article it looks still funny on mobiles.

#4

Hello @Sulowski,

Thanks for updating thread.

I see that you are aligning the images to right side of the content. On desktop it’s looks fine but on mobile it’s giving some issues. To fix that, please add following CSS under X > Theme Options > CSS:


@media only screen and (max-width: 600px) {
    .single-post .entry-wrap img {
    float: none;
    text-align: center;
    margin: 10px auto;
    display: block;
}
}

Have recorded a screencast as to how it should look upon adding the code. https://cl.ly/2M0x0k272541

Thanks.

1 Like
#5

Thank you @Prasant

You help was priceless. Great service!

#6

You’re most welcome. :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.