Overriding .page width max-width for specific section-id on Impulse theme

[philippk]

Hi everyone,

I am using the Impulse theme, which sets a default max-width of 1500px to many of its theme sections. I would like to keep the default max-width, while overridingthe max-width for some specific theme sections.

Specifically, I would like to set the following sections to “max-width: none;”:

1. data-section-id=“a3919f87-f964-456a-ad63-f22ec31a8667”

2. data-section-id=“1525295772132”

3. data-section-id=“0169142f-a479-44c5-821d-b2f2e9aac5c1”

I tried changing the following entry in the theme.css.liquid to “none” which of course works, but also impacts other areas and other pages which I want to avoid.

.page-width{
max-width:1500px;
margin:0 auto;
}

Targeting the specific section-ids as below does not seem to work however

section[data-section-id="a3919f87-f964-456a-ad63-f22ec31a8667"] {
  .page-width {
      max-width:none;
      }
}

Any idea what I’m doing wrong? Any help is appreciated. Of course, if there is a better solution to this alotgether than targeting the data-section-id, I’d love to hear it

Store Preview: https://34ic5e3fzfu5rja1-49638047908.shopifypreview.com

[PageFly-Richard]

Hi @philippk

This is Richard 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.css

Step 3: Paste the below code at bottom of the file → Save

[data-section-id=“a3919f87-f964-456a-ad63-f22ec31a8667”] .page-width,

[data-section-id=“1525295772132”] .page-width,

[data-section-id=“0169142f-a479-44c5-821d-b2f2e9aac5c1”] .page-width,

{

padding: 0 !important;

}

Hope that my solution works for you.

Best regards,

Richard | PageFly

[brandography]

Hi @philippk , a good solve for this would be editing the section’s code and adding in a checkbox called something like “Set page width to none”. That way you aren’t getting specific with section ids and can easily click the checkbox whenever you want to implement this design.

Here’s an idea on how to do this:

.page-width {
  max-width: {% if section.settings.set-width-to-none == true %} none; {% else %}1500px;{% endif %}
  margin: 0 auto;
}

// Then in the schema create the checkbox like so:

{
  "type": "checkbox",
  "id": "set-width-to-none",
  "label": "Set page width to none",
  "default": false
}

[philippk]

Hi @brandography , that’s a great idea - thank you!

Stupid question, but as I have never edited at theme-level; where exactly do I add the schema code?

Thanks in advance!

[philippk]

Hi @PageFly-Richard , thank you for the suggested solution. I have added the code but unfortunately that did not change anything.

I have also tried adding the code as follows, as I am looking to override the max-width (not the padding), but this also did not yield any results.

[data-section-id="a3919f87-f964-456a-ad63-f22ec31a8667"] .page-width,

[data-section-id="1525295772132"] .page-width,

[data-section-id="0169142f-a479-44c5-821d-b2f2e9aac5c1"] .page-width,

{
    max-width: none !important;
    padding: 0 !important;

}

Any idea why the override isn’t working?

[brandography]

You’ll need to add the schema code directly into the section file. You’ll find it by going to Online Store/Theme/Edit code and looking in the Sections folder. Once you find the right section add this to the top of the file:

{% style %}
.page-width {
  max-width: {% if section.settings.set-width-to-none == true %} none !important; {% else %}1500px;{% endif %}
  margin: 0 auto;
}

{% endstyle %}

Then scroll down to the bottom of that file and see an area with the {% schema %} and add this in after “settings”: [

{
  "type": "checkbox",
  "id": "set-width-to-none",
  "label": "Set page width to none",
  "default": false
},

This is a little complicated so I can walk you through it if you have troubles

[made4Uo]

Hi @philippk ,

You can use the code instead to override the max-width of the specific sections you provided. I would suggest to use the section ID instead of the data attribute

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the theme.css file
3. At very end of the code, add the code below

#shopify-section-a3919f87-f964-456a-ad63-f22ec31a8667 .page-width,
#shopify-section-1525295772132 .page-width,
#shopify-section-0169142f-a479-44c5-821d-b2f2e9aac5c1 .page-width,
{
    max-width: unset;
}

[philippk]

Thanks a lot for the detailed explanation @brandography ! This worked and was super useful to understand for future customisations

[philippk]

Hi @made4Uo thank you for the suggestion.

I tried adding the code as suggested, but it did not seem to override the max-width.

I have now already implemented another suggestion and marked the solution in the thread.

[made4Uo]

Hi @philippk ,

No worries at all. I hope the solution works when you have two or more specified sections

[philippk]

@made4Uo Would still love to succeed in targeting multiple sections with your suggested solution. I’ve added the code as per your instructions but the “page-width” remains unchanged at 1500px

[made4Uo]

Hi @philippk ,

It seems that your theme.css file need fixing. Anything you put on your theme.css will not work since the code after the error are not being read. You have multiple code errors. Please see the image below as one of the errors.

Please use /* and */ if you intend to make a comment on the code. You can also highlight the word, and click Ctrl + / to comment it out. Make sure you are paring with opening and closing.

[philippk]

@made4Uo Ugh, I feared that a Shopify partner I worked with had screwed something up when making customisations… thank you for point it out! I fixed the two issues you underlined but your code added at the bottom of the theme.css still is not working.

Do you have a recommendation for the best way of identifying other issues?

Thank you for your help!