Solved

Adding 2nd layer background to collection page and product page. PLEASE HELP

DontAskWhy
Tourist
11 0 0

How do I add a white box behind my collection/product page text and set it in front of my background. I want it like the image below.

I'm currently on the  Venture Theme

 

dasdas.PNG

help.PNG

Accepted Solution (1)
Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

@DontAskWhy  
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 750px){
.main-content {
     margin-top: 0px !important;
     padding-bottom: 0px !important; 
}
}
.main-content {
     margin-top: 0px !important; 
     padding-bottom: 0px !important; 
}
.template-collection #MainContent .page-width .grid{
		    padding: 15px 0 !important ;
}

 

View solution in original post

Replies 8 (8)

oscprofessional
Shopify Partner
15830 2369 3072

Hello,
Please share your store URL with password (If Needed), So that I will give you proper solution here !

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
DontAskWhy
Tourist
11 0 0
DontAskWhy
Tourist
11 0 0
Kinjaldavra
Shopify Partner
2302 570 1422

@DontAskWhy 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-collection  #MainContent .page-width{
	background: #ffffff !important;
}

.template-product #shopify-section-product-template  .product-single{
	background: #ffffff !important;
}

 

DontAskWhy
Tourist
11 0 0

Thank you for the response this works! I just need to know how I can change the width and length of the white background?

I want it so its bigger and goes all the way to the top of the page

fsdfds.PNG

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

@DontAskWhy  
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (min-width: 750px){
.main-content {
     margin-top: 0px !important;
     padding-bottom: 0px !important; 
}
}
.main-content {
     margin-top: 0px !important; 
     padding-bottom: 0px !important; 
}
.template-collection #MainContent .page-width .grid{
		    padding: 15px 0 !important ;
}

 

DontAskWhy
Tourist
11 0 0

I see what's happening.

both solutions work! Just not in the way i need the page to be set out as the plan is to add a featured products section at the top "most popular". 

is it possible to have the white background as a separate entity that i can edit the width and length of behind these pages? Best way i can describe it like a layer in photoshop

Thank you for the help though I really appreciate it

 

Kinjaldavra
Shopify Partner
2302 570 1422

@DontAskWhy  Please provide website url and if your store is password protected then also provide password