Posts and pages with custom width are not mobile friendly.

Illdy
1

Hello,

I asked for help regarding custom width in full-width pages and posts and was given some code to add to Custom CSS so that the page shows up exactly how I wanted it. The code works great on desktop but is not mobile friendly at all.

Is there a way to fix it?

P.S: Here’s the code I was given in a previous support thread:

/*Center content*/
#blog {
    width: 700px;
    margin: 0 auto;
}

p{
     font-size:18px!Important;
}
2

Hello there,

I hope you are doing well today.

Please try replacing that CSS code with the following to ensure it does not affect the mobile version:


@media screen and (max-width: 1001px) {
#blog {
    width: 700px;
    margin: 0 auto;
}

p{
     font-size:18px!Important;
}
}

Best Regards,
Support

3

Hello,

Thank you for the quick response. Unfortunately, the new code made no difference :frowning:

4

Hello there,

Did you remove the previous CSS code? If you have them both added then the first CSS code will run with the new set.

Best Regards,
Support

5

Yes, I did. The new code changed the width of the page back to full-width. It’s no longer 700 pixels. And even then the page isn’t mobile friendly :frowning:

6

Hello there,

Thanks for that information.

Please provide the link to the page and explain how you would like the page to appear on mobile.

Best Regards,
Support

7

Here’s the link: http://samarowais.com/about/

I’d like the page width to be 700 pixels, centered, and mobile friendly. I’ve attached the screenshot of how the page is showing up on my mobile.

Thank you!

8

Hello. Any luck on fixing this issue?

9

Hello there,

Thanks for that information.

Please remove the previous CSS code. If you have the width being 700px then it would not be mobile friendly because it has to adjust to different screen sizes so please please remove any CSS that has the width at 700px and try adding this CSS instead:

@media screen and (max-width: 1001px)
#blog {
    width: 100%;
    margin: 0 auto;
}

Best Regards,
Support

10

Thanks. That fixed it.
I’m guessing there’s no way I can reduce the width of the page and keep it mobile friendly?

11

Hello there,

Using a fixed width would cause issues with responsiveness but a percentage could work. You would have to change the percentage to suite your preferences here.


@media screen and (max-width: 1001px)
#blog {
    width: 90%;
    margin: 0 auto;
}

Best Regards,
Support

12

Changing the percentage didn’t make any changes to the width. It’s fine. As long as the page is responsive. That was the bigger issue. Thank you!

13

Happy to help.

Please let us know if you have any more issues.

Best Regards,
Support