How can I change the blog post background color and adjust margins?

[kimbree123]

So TLDR- i would like to change the background color for my blog posts. I love my pink background but it does not look quite as good in blog format. I tried to make a work around by copying the blog html into a custom liquid box. But when I did that, the custom liquid box width was too wide and the format was messed up. Is there a way to change the margins for the custom liquid box and or change the background color of the blog post?

I want the format to look like this but have the colors look like the second picture. 

[GemPages]

Hello @kimbree123 

You can remove old code and add code by following steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

    {%  if template contains 'article' %}    
    <style>
      main#MainContent {
          background: #EBE5D9;
      }
    </style>
      {%  endif %}

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[turtlelionowl]

thank you! this worked for me!

[PageFly-Victor]

Hi @kimbree123 

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag </body> -> save.

{% if template contains 'product' %}

<style>

@media screen and (max-width: 1024px ) and (min-width: 600px ){

#MainContent {

margin-left: 25%;

margin-right: 25%;

}}

</style>

{% endif %}

Hope that my solution works for you.

Best regards,

Victor | PageFly

[kimbree123]

Thank you. Follow up question- in the blog post, id like place three
pictures in a row but on mobile it stacks them. Is there a way for me to
make them in a row on mobile view?

[PageFly-Victor]

@kimbree123 

You can try with this code:

@media screen and (max-width: 767px){
	div>img {
    float: unset !important;
}
}