Full width custom HTML with background color in Brooklyn theme

Solved
Highlighted
Tourist
13 0 2

Hi,

I am trying to add a custom HTML to my homepage of Brooklyn theme. I need to have a full width section with a background image and 4 columns inside it. I managed to add the responsive columns, however, the outside div is not becoming full width. I have tried many css codes suggested in different forums. Can someone let me know how to do it? My shop is https://flawedbyshaleen.myshopify.com/. The process section in grey is what I want to customize.

Also, can someone let me know how to reduce the spacing between various sections?

Thanks!

Priyanka  

0 Likes
Highlighted
Shopify Partner
479 59 74

@itspriyanka 

Please provide password also to check

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
Tourist
13 0 2

Hi,

My bad! The password is "presed".

Thanks,

Priyanka

 

0 Likes
Highlighted
Tourist
13 0 2
Hi,

Sorry, my bad! Password is "presed".

Thanks,
Priyanka
0 Likes
Highlighted
Shopify Partner
479 59 74

Please see yoy need to setup margin-left to 0 which was -30px 
margin.png

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
Tourist
13 0 2

Hi @Propero,

Thanks. Adding "margin-left:0px" expanded the grey section a bit more to cover all the boxes. However, it is still not full width of the page as you can see in the screenshot below.

Regards,

Priyankadownload.png

 

0 Likes
Highlighted
you could try something line this -  add it to the end of your CSS file
 
.index-sections .shopify-section:nth-child(4) {width:100%;height:auto;}
 
 
James Byrne, Owner, Information Architect (USMC VET)
After Dark Grafx - Since 1992
"We Work After Dark, So You Don't Have To!"
https://www.afterdarkgrafx.com

Services: Website Design, Mobile App Development (iOS, Android, Windows), Ecommerce, Magento, Shopify, Miva, BigCommerce, Search Engine Optimization, Wordpress, Hosting, Graphic Design, Merchant Accounts, Consulting and all things web related!

Certified Partner/Developer/Affiliates: Shopify, Google Integrator, Wordpress, Zoho, AuthorizeNet, Geotrust and a Member of the San Diego Regional Chamber of Commerce, Veteran Owned Businesses, Veteran's In Business Network.

I also build custom apps for Shopify!
0 Likes
Highlighted
Shopify Partner
479 59 74

for custom content div set the margins as shown below

    margin-right: -30px;
    margin-left: -30px;
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
Tourist
13 0 2

Hi @Propero and @After_Dark_Graf : None of the solutions are working for me.

0 Likes
Highlighted

You need an expert to login and fix this for you. Unfortunately, you will have to pay them (or me) to do this for you.  It is one thing to look at the site on the front end, but managing the code in the backend is the best way to achieve this.

James Byrne, Owner, Information Architect (USMC VET)
After Dark Grafx - Since 1992
"We Work After Dark, So You Don't Have To!"
https://www.afterdarkgrafx.com

Services: Website Design, Mobile App Development (iOS, Android, Windows), Ecommerce, Magento, Shopify, Miva, BigCommerce, Search Engine Optimization, Wordpress, Hosting, Graphic Design, Merchant Accounts, Consulting and all things web related!

Certified Partner/Developer/Affiliates: Shopify, Google Integrator, Wordpress, Zoho, AuthorizeNet, Geotrust and a Member of the San Diego Regional Chamber of Commerce, Veteran Owned Businesses, Veteran's In Business Network.

I also build custom apps for Shopify!
0 Likes