Hi!
I saw in the portal this beautiful example.
https://s3.ap-southeast-2.amazonaws.com/sw.digital/Evolve+Authoring+Tool/1.+A+guide+to+buying+fresh+fish/index.html#/page/60ee8d52edcf6510605945bd
How do I achieve a full-width design like this?
Under “Article Max Width” in my theme I can only specify pixels and not 100% width.
Is there another place where I can define the full width article background color?
Hey Pablo,
Have you tried removing the max article width? This should allow the articles to extend to the edge of the page.
If that doesn’t work, check whether there are max widths under Page > layout as these may impact this too.
Final thing to mention: watch out for the Article Content Max Width. This is different to the Article Max Width and that can be a bit confusing.
I haven’t had a close look at your example but my guess would be that there’s no Article Max Width or Page Max Width but there may still be an Article Content Max Width set. This would limit the article content (the text and graphic) running right up to the edges of the article like the article background does.
2 Likes
Thank you! Your explanations have answered my questions exactly. 
That’s exactly how it can be done.
I sometimes find it difficult to find the right place in Evolve to adjust styling. It would be desirable to be able to see in the preview from where a styling setting comes.
1 Like
Hi @Pablo we are aware theming isn’t the most intuitive experience, and whilst I can’t provide timescales right now, we are planning to address to improve the experience.
Cheers-Sam
I have a question that applies to this full-width design category. I want to achieve fullwidth microcontent in two columns. But when I add a graphic component to upload a photo, isn’t there a way to make it full-width and omit the margin or padding of other components?
Attached photo
Basically I need my full width section to be divided in two full width columns.
Hi Estefa,
I’m assuming that you currently have padding or margin set at a component level for this article. To achieve what you are looking for (if I understand you correctly) I would recommend removing all component padding/ margin. Instead add the padding to the “Component Title”, “Component Body Text” and “Component Instruction text”. I would recommend making a new article style for this section and applying these changes to just that article, so it doesn’t affect anything else on your page.
Alternatively, you could use the Text and Graphic component, instead of having a graphic component next to a text component in the same block. This wouldn’t give you exactly the effect that you are after, but it would be a more simple solution.
Hope this helps, it’s difficult to know exactly how to help without being able to look at how your theme is set up!
James