Extending custom colour choice to cover whole page width

annyeryn29
Tourist
21 0 7
I've added a background colour & changed the font colour for my page headings but can't get it to extend the width of the screen. I tried max-width to no avail.
 
This is my code so far
h1.section-header__title.h2 {
letter-spacing: 0.2em;
background-color: #7b856f;
padding-top: 20px;
padding-bottom: 20px;
page-width: 100%;
color: white!important;
}
 
password: baoshe
 
Thanks
0 Likes
Biterscode
Excursionist
22 2 2

Hello, @annyeryn29 .

You need to duplicate your theme and open code editor after that template->collection.liquid file and search 'page-width'

You need to move code to above the div which have page-width.

the result code look like..

<div class="grid text-center">
<div class="grid__item medium-up--ten-twelfths medium-up--push-one-twelfth">
<header class="section-header">
<h1 class="section-header__title h2">Products</h1>

</header>
</div>
</div>

<div class="page-width"> .............

and Result in page looks like 

Biterscode_0-1619018409888.png

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept the Solution.
Email: sandyhadiya@gmail.com Or WhatsApp Or Skype: sandip_php_7
Biterscode
Excursionist
22 2 2

                     

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept the Solution.
Email: sandyhadiya@gmail.com Or WhatsApp Or Skype: sandip_php_7
0 Likes
annyeryn29
Tourist
21 0 7

Thanks for the instructions. Weirdly, when I go into the code editor, templates - collection.liquid it only contains {% section 'collection-template' %}

Any ideas?

0 Likes
Biterscode
Excursionist
22 2 2

Open collection.liquid file and perform above step. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept the Solution.
Email: sandyhadiya@gmail.com Or WhatsApp Or Skype: sandip_php_7
0 Likes