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

kimbree123
Tourist
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)

GemPages
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

GemPages_0-1675389843485.png

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

GemPages_1-1675389933765.png

    {%  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

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
turtlelionowl
Excursionist
13 0 3

thank you! this worked for me!

PageFly-Victor
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.

PageFlyVictor_0-1675393990500.png

 

 

{% if template contains 'product' %}

<style>

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

#MainContent {

margin-left: 25%;

margin-right: 25%;

}}

</style>

{% endif %}

 

PageFlyVictor_1-1675393990766.png

 

Hope that my solution works for you.

Best regards,

Victor | PageFly

kimbree123
Tourist
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?
PageFly-Victor
Shopify Partner
7865 1785 3067

@kimbree123 

You can try with this code:

 

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