Content Width Adjustments

[bentkieran]

Hi, I am currently using Ethoz theme, with the full width no sidebar layout. Is there a way to reduce the width of the content area in my blog posts, so that my content are concentrated toward the center (with space on the left and right side) instead of having the text run all the way from left to right? Is is possible to only restrict this on desktop and not on mobile?

I find that it is hard to read on the desktop which has a bigger screen. On mobile, as the screen size is smaller, it is ok.

Thank you.

[tristup]

Hi @bentkieran,

Thanks for reaching out.
You can adjust the width of the container from Theme Options > Layout and Design, but it will affect all the screen sizes. So after you adjust it for the Desktop you can use custom CSS code to adjust it in Mobile devices.

To adjust it in Mobile you may need to add a few custom CSS based on the mobile device breakpoints, I would suggest you go through the different breakpoints of devices in this article [ https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp ]
I have tried the following code in my test site and adjusted the container width to 80% for the mobile devices, and it works.

@media  (max-width: 480px) 
{
    .x-container.width {    
        width:80% !important;
    }
}

Remember that the above code is a sample code and it varies case to case, and we can’t guarantee it works for you.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something in your site nor will we enhance it.

Hope it helps.
Thanks

[bentkieran]

this is helpful. thank you!

[prakash_s]

Hi @bentkieran,

Glad to help you. Have a nice day.

Thanks