This site is built using WordPress and styled with the Hestia theme. Hestia uses Bootstrap as a layout framework with the main boxed element being a container, this has a max width of 1170px on viewports over 1200px wide. As this blog uses a lot of code elements which frequently exceed this width the text gets wrapped which can look a bit confusing. To fix this I’ve added an additional container width in the site CSS so that when viewed on a larger screen the container width will be increased.

Additional CSS can be added to a site using Hestia by navigating to Appearance -> Customize -> Additional CSS and entering your desired CSS.

I added an additional container width at (a rather arbitrary) 1600px.

@media (min-width: 1600px) {
	.container {
		width: 1570px;


Jaime Albino da Cruz · 13th March 2019 at 1:55 pm

I tried this solution but got no luck, can you help me?, my website looks really shrinked, and i really like the theme

    Shinigami · 13th March 2019 at 2:42 pm

    You might need to use CTRL+F5 to force refresh the page and bring the updated CSS through.

    Also, are you using the Hestia theme? If not it might be using some class other than container for managing page width. If you post a link to your site I’ll take a quick look and see if I can figure it out.

Jaime Albino da Cruz · 13th March 2019 at 8:56 pm

i’m using Hestia Pro, i think that they changed the code or something like that, i tried again and your code worked but just for the header, to get the text box wider i needed to change more classes, but i finally got what i needed

Tim · 23rd January 2020 at 3:56 pm

Worked great for me – thank you. TT

Moloy Dey · 8th October 2020 at 6:37 am

Thank you so much. However, it only worked for the header and footer. But the body container remains shrinked.
Can you help?

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *