Article/blog post margins on mobile+computer

[villesak]

Hi there!

I am looking to fix the margins on my articles. especially on mobile devices. i don’t know how to do it. I think the problem is that site if full width (100%) which makes articles also 100% wide.

I have tried adding these two CSS things, but they reshape the article image and text waaay too narrow.

.single-post .x-main article.post {
max-width: 800px;
margin: auto;
}

.single-post .x-container.max {
padding: 0 6em !important;
}

On best case scenario i would love to have my articles slightly narrower than what they are now (mobile+computer). Hope you can help.

Oh! and here is the link to article:

KURKISTUS HUIPPUJUOKSIJOIDEN JUOKSUTEKNIIKKAAN | Ville Saksa

Best regards,
Ville

[alexander]

Hi Ville,

Sure thing, we can help you out with this. I checked your site and it looks like you’ve configured your Site Width to be 100%. This will make the x-container class fill the entire screen leaving no margin. In Theme Options > Layout and Design you can change Site Width (%) back to 88% which is the theme default value. This will give you a nice bit of spacing on all screen sizes. Once this adjustment is made you should be able to remove that padding.

The max width setting will kick in on larger displays to keep the content at a readable size. You could make this 800px site wide if desired.

Now, if you find that this breaks the design on other pages (you probably wanted 100% for a reason) you can go into those pages and set the “Page Template” to use one of the “No Container” options. This will allow the page content to go full width at which point you can manage it in the builder by adding a Global Container to one of your row elements.

Hopefully this helps clear things up!