Space around article element in order to color it differently

I've found a WordPress theme that I want to use, but the only problem is that the background color on articles is the same as the background color of the entire page. I want these two colors to be different, the background should be darker, and the article white.

Here is the current situation:

enter image description here

The problem is that I cannot simply set the background-color atribute on article because there is no spacing around it, and it looks bad. To demonstrate:

enter image description here

Edit: the green here should be away from the text for about half a centimeter:

enter image description here

The color is green just so it's easier to notice how close it is to the article content.

What I want to achieve is to create a spacing, between the article title, information, and content - and the background of the website. However, I also fear that this spacing might ruing the mobile experience if it is fixed to a percentage or length, so the real issue is creating it so that it either disappears or is not noticeable on mobile devices.

How can I do that?

If needed, here is the link to my blog: http://jancorazza.com.

Solutions

Padding might be what you need :

.content-area article {
   background-color: green;
   padding: 25px;
}
Tags: Html / Css / Wordpress

Similar questions

White space around images only on mobile - wordpress
I am trying to fix this problem - There is a huge white space around the posts and pages in mobile display. However homepage is absolutely fine. One such image is attached here I have tried display-x property. It fixes the problem of posts and pages however it breaks the homepage. I also thought that footer widgets were breaking this - but not. It ...
Remove empty space around absolute positioned div
I have inserted a div after a second paragraph in Wordpress post, but I would like to remove empty space on the right side which is visible in the picture. How can I do it? Code for div is
Menu Wrapping Around and white-space:nowrap making the menu go past the page Wordpress
I am redoing a Wordpress website, and I am having a problem with the menu. I am using the Compass theme and this is what the top menu looks like. Then when I do in Custom CSS in Wordpress, the menu goes beyond the page. Any suggestions? I want the menu to appear in one line and to dynamically resize. I have done extensive Googling and have tried an...
Can't remove grey space around header image on mobile?
My knowledge is pretty limited but have tried playing around with inspect element and cannot seem to figure it out? Thanks in advance site link I am trying to achieve this.. edit / update: got it mostly working just trying to figure out how to get rid of these two, can I do it through additional css?
When I write posts I usually have to use non breaking space element in order to keep margins in between the sentences. why?
When I write posts I usually have to use non breaking space element in order to keep margins in between the sentences. In other words - the text looks good in my editor, it is with spaces, but when I save it and preview it - it is all together, without spaces. Why it is like this?
How can I use wp_query search for UK Postcodes with space and without space equally?
I want to make a wp_query who search UK Postcode with space and without space equally Example BT3 9DT = BT39DT

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.