Full-Width Custom HTML Section

Highlighted
New Member
9 0 0

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

0 Likes

Hey Mike,

 

Full Width:

 

To make the entire section full width,

 

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

 

shopify-themes-22.png

 

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


file-HqbBGpqmQY.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

.container

 

It should look like this.

 

Screen Shot 2019-08-14 at 6.56.19 PM.png

 

 

 

 

 

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. 

 

Screen Shot 2019-08-14 at 7.05.14 PM.png

 

 

 

 

 

This should make the sections full width.

 

Screen Shot 2019-08-14 at 7.01.37 PM.png

 

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.

 

Screen Shot 2019-08-14 at 7.28.26 PM.png

 

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

 

Screen Shot 2019-08-14 at 7.33.37 PM.png

 

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

 

.customSectionOne{
       background-color: #ccc
}

It should look like this...

 

Screen Shot 2019-08-14 at 7.35.57 PM.png

 

May need some adjustments afterwards.

0 Likes
Shopify Partner
666 95 92

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. 

Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
0 Likes
New Member
9 0 0

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.

Tentsile Europe _ Customize _ Tentsile Europe  Development _ Shopify.png

 

0 Likes
Shopify Partner
666 95 92

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;
}
Want to modify or custom changes on store hire us .
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
0 Likes
New Member
9 0 0

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

0 Likes
New Member
9 0 0

Edit: Removed duplicate reply

0 Likes
New Member
9 0 0

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

0 Likes
Astronaut
767 78 151

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

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
9 0 0

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

0 Likes