Solved

Flex-Trending Theme Custom Margins in Blog

cguerrero
Tourist
4 0 2

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.

unnamed.jpg

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.

 

A Buyers’ Guide to Sterling Silver.png instead of Capture.PNG

 

Does anyone know how to do this?

Thanks!

Accepted Solution (1)
BSS-TechFusion
Shopify Expert
149 26 15

This is an 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!

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 11 (11)

Made4uo-Ribe
Shopify Partner
6047 1452 1790

Hi @cguerrero 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


Made4uo-Ribe
Shopify Partner
6047 1452 1790

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. 

Made4uoRibe_0-1715115851751.png

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:

Made4uoRibe_1-1715115959915.png

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!

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


Annie_Aukeman
Tourist
8 0 0

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.

BSS-TechFusion
Shopify Expert
149 26 15

Hi @cguerrero,

You can try the following steps:

 

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

view.png

 

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

 

view.png

 

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

 

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

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

Result:

view.png

 

 

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

cguerrero
Tourist
4 0 2

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

Untitled design (1).png

 

Assets

Untitled design (2).png

 

Templates

Untitled design.png

BSS-TechFusion
Shopify Expert
149 26 15

This is an 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!

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

cguerrero
Tourist
4 0 2

This worked! Thanks so much! 🙂

BSS-TechFusion
Shopify Expert
149 26 15

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSS-TechFusion
Shopify Expert
149 26 15

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

BSS-TechFusion
Shopify Expert
149 26 15

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!

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Wholesale Solution by BSS |
For adding product labels/badges, visit BSS: Product Labels & Badges

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development