Increase Width Blog Post and Code Block on Brine Template

Hi there! I'm trying to increase the width of blog post content in the Brine template.

I followed this code from a previous thread that I found:

@media screen and (min-width:900px) {
  .collection-type-blog.view-item .BlogItem.hentry .sqs-grid-12 :not(.sqs-block-image)  {width: 100% !important;
}
}
 

It's working perfectly for the copy and image blocks but now it's messing up code blocks that I'm using for my clients RewardStyle widget. Does anyone have a fix for this? Thanks!

On 12/30/2021 at 10:53 PM, savage01 said:

Hi there! I'm trying to increase the width of blog post content in the Brine template.

I followed this code from a previous thread that I found:

@media screen and (min-width:900px) {
  .collection-type-blog.view-item .BlogItem.hentry .sqs-grid-12 :not(.sqs-block-image)  {width: 100% !important;
}
}
 

It's working perfectly for the copy and image blocks but now it's messing up code blocks that I'm using for my clients RewardStyle widget. Does anyone have a fix for this? Thanks!

Hi, Can you share your site with the protected password so we can take a look?

a screenshot of what you desire to change could help a lot

On 12/30/2021 at 10:53 PM, savage01 said:

Hi there! I'm trying to increase the width of blog post content in the Brine template.

I followed this code from a previous thread that I found:

@media screen and (min-width:900px) {
  .collection-type-blog.view-item .BlogItem.hentry .sqs-grid-12 :not(.sqs-block-image)  {width: 100% !important;
}
}
 

It's working perfectly for the copy and image blocks but now it's messing up code blocks that I'm using for my clients RewardStyle widget. Does anyone have a fix for this? Thanks!

Try adding this to Design > Custom CSS

/* Brine blog post content */
body.collection-type-blog .html-block {
    width: 100% !important;
}

Thanks for the response. So this is a screenshot of how the copy container looks with no custom CSS and the headline left-aligned. I want the copy to be more full-width, or at least align with the headline.

I tried this recent code and I think it's working! Thank you!

/* Brine blog post content */
body.collection-type-blog .html-block {
    width: 100% !important;
}

Is there any customization I can do to make the code block full width as well? Currently it's still in the same narrow container. 

On 1/6/2022 at 1:30 AM, savage01 said:

I tried this recent code and I think it's working! Thank you!

/* Brine blog post content */
body.collection-type-blog .html-block {
    width: 100% !important;
}

Is there any customization I can do to make the code block full width as well? Currently it's still in the same narrow container. 

 

Try this code, if it doesn't work, please share link to post in screenshot, we can check easier

/* Brine blog post content */
body.collection-type-blog {
.html-block, .code-block {
    width: 100% !important;
}}

Yay that worked! Thank you!