Full-Width Custom HTML Section

[mike-tentsile]

Hi guys,

I've done a lot of searching but I'm struggling to find a solution. Our theme currently has a Custom HTML section, which is useful, but unfortunately isn't full-width. 

We have a What Make Tentsile Special area which I'd love to add a full-width background colour, but the current Customer HTML section doesn't allow full-width.

I'd love to have an additional Custom HTML section which is full-width but I just can't figure out how to make it happen.

Any help appreciated!

Website: http://www.tentsile.co.uk

[Mike-K]

Hey Mike,

Full Width:

To make the entire section full width,

If you go into Shopify > Themes > Actions > Edit Code. 

Then navigate to the Assets folder and open the styles.scss.css file.

Inside the file, hit Command+F, to search for this text... 

.container

It should look like this.

All you need to do is remove the line that says max-width: 1200px;

max-width: 1200px;

You can delete, it or just click on the text and press [ COMMAND + / ] to comment it out. 

This should make the sections full width.

Background Color:

For background color it's a little trickier.

You would have to find the liquid file where your code for the Custom Html section is located. It's probably in the Snippets folder. Not sure which file it would be in. Maybe a file named Custom HTML or Shopify-Section-1562250131442. 

The code should look like this.

In the green area where it says class=" ", add a name like customSectionOne.

Then anywhere in your styles.scss.css file, paste this code...

.customSectionOne{
       background-color: #ccc
}

It should look like this...

May need some adjustments afterwards.

[oscprofessional]

Hello Mike,

Can you please tell me which theme you are using and
Please provide the screen shot of HTML section which is required 100% width. 

[mike-tentsile]

Hi Pallavi,

Thanks for your reply. Annoyingly, it's a custom theme by Out of the Sandbox and its the What Makes Tentsile Special section (below) I want to make full-with.

[oscprofessional]

Hello Mike,
For making that section 100% width simply put this css on theme -> assets -> theme.scss.liquid file

.index .custom-html-section .container {
	width: 100%;
	max-width: 100%;
	padding: 20px 15px;
}

[mike-tentsile]

Hi Mike,

Thank you for this it looks like the perfect solution, but (annoyingly) we're only looking to make 1 of the Custom HTML sections full-width and not all of them. 

That's why ideally, we'd create a separate full-width custom Section.

Thank you,

Michael

[mike-tentsile]

Edit: Removed duplicate reply

[mike-tentsile]

Hi Pallavi,

Thank you for the solution you've presented - unfortunately, this won't work (as mentioned to Mike above) as we don't want every Custom HTML section to be full-width. I'm ideally looking for the option of adding a separate Full-Width Custom HTML section.

Thank you,

Michael

[Ninthony]

You could add another portion to the schema. 

{
"id": "custom_class",
"label": "Custom Class",
"type": "text"
},

Then in the containing div for the section:

<div class="{{ section.settings.custom_class }}">

</div>

Then when you create your section you could type into the Custom Class text box "full-width" would output

<div class="full-width">

</div>

Then just make some styles for full-width

[mike-tentsile]

Thank you for the solution you've presented.

But I'm afraid I'm a little lost. I'm unsure where "the containing div for the section:" is and also unsure what you mean by "type into the Custom Class text box" as our Custom HTML section doesn't have a  separate "Custom Class" text box.

Thank you,

Michael