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

5 0 1

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. 

Screenshot 2023-02-02 at 8.51.43 PM.png



Screenshot 2023-02-02 at 8.50.18 PM.png

Replies 5 (5)

Shopify Partner
5589 1261 1219

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' %}    
      main#MainContent {
          background: #EBE5D9;
      {%  endif %}

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business

- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
13 0 3

thank you! this worked for me!

Shopify Partner
7865 1785 3067

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' %}


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

#MainContent {

margin-left: 25%;

margin-right: 25%;



{% endif %}




Hope that my solution works for you.

Best regards,

Victor | PageFly

5 0 1
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?
Shopify Partner
7865 1785 3067


You can try with this code:


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