Flex-Trending Theme Custom Margins in Blog

[cguerrero]

Hello,

I am using the theme Flex-Trending and want to create custom margins so I can widen the margins in my blog posts. I tried using Chat GPT and it gave me this code to add to the file blog__main.liquid in the Sections folder.

I added the code to a few different parts of the code I thought might work, but none of them did.

I want the blog to be spaced like this instead of how it looks currently.

 instead of 

Does anyone know how to do this?

Thanks!

[Made4uo-Ribe]

Hi @cguerrero 

You can adjust the width. WOuld you mind to share your store URL? Thanks!

[cguerrero]

https://theblissful.co/

blog at https://theblissful.co/blogs/news/a-buyers-guide-to-sterling-silver

[Made4uo-Ribe]

Thanks for the info, just to clarify. You only want to widen only on blog page only? or also to other pages like our store, FAQ and contact us. Here is the example. 

This code is only for the blog page. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

div#shopify-section-template--17077272051947__main section.section.is-width-standard {
    max-width: 100%;
}

 And save. 

Result:

For the other pages is this code. 

section.section.is-width-standard {
    max-width: 100%;
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Annie_Aukeman]

Do you know if there's a way to adjust the margins within flex theme, or do we need to use a piece of custom code?  Chat GPT got it wrong,  we're hoping a human can help! lol.

[BSSCommerce-B2B]

Hi @cguerrero,

You can try the following steps:

- Step 1: Go to: Sale channel => Online Store => Themes => Edit code:

 

- Step 2: Search for base.css and add the CSS code to the end of this file: 

#template-article {
  max-width: 30%;
  margin: auto;
}

Depending on how small you want it to be, adjust the percentage of max-width

---------------------------

Result:

 

I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!

[cguerrero]

I was not able to find a place in our code that is called base.css, in these attachments I highlighted some areas in our code that may work instead? Or should I try a different code with any of these sections/templates?

Sections

Assets

Templates

[BSSCommerce-B2B · Accepted solution]

Hi @cguerrero , You can add CSS to the end of the style.css.liquid file.

@media screen and (min-width: 800px) {
  #template-article {
    max-width: 40%;
    margin: auto;
  }
}

This new CSS part helps your interface not break on screens smaller than 800px. You can adjust the px or max-width ratio according to your preference.

I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!

[cguerrero]

This worked! Thanks so much! 🙂

[BSSCommerce-B2B]

Hi @cguerrero , You can add CSS to the end of the style.css.liquid file.

@media screen and (min-width: 800px) {
  #template-article {
    max-width: 40%;
    margin: auto;
  }
}

This new CSS part helps your interface not break on screens smaller than 800px. You can adjust the px or max-width according to your preference.

I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!

[BSSCommerce-B2B]

Hi @cguerrero , You can add CSS to the end of the style.css.liquid file.

@media screen and (min-width: 800px) {
  #template-article {
    max-width: 40%;
    margin: auto;
  }
}

This new CSS part helps your interface not break on screens smaller than 800px. You can adjust the px or max-width according to your preference.

I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!

[BSSCommerce-B2B]

Hi @cguerrero ,

You can add CSS to the end of the style.css.liquid file.

@media screen and (min-width: 800px) {
  #template-article {
    max-width: 40%;
    margin: auto;
  }
  
}

This new CSS part helps your interface not break on screens smaller than 800px. You can adjust the px or max-width ratio according to your preference.

I hope these instructions will help you. If they are helpful, don't forget to like and mark as the solution. Have a nice day sir!