hi! for my site i am using a sidebar on every page but i am developing a landing page and i want to remove the sidebar which i have done by using the full width page template but this layout is a bit to wide for me and i wish to shrink the content width for just this page. i have tried a few different css entries but so far i have only got this to work:
.page-id-4280 #content {
width: 80%;
}
but it doesnt keep the content centered. even then the second block of content with the two columns layout seems to hang outside this a little.
how can i set the width for all the body content while not affecting the header and footer width?
thank you!
d-_-b
Hey d-_-b
body.responsive.layout-full.page-id-4280 #page-wrapper #main .full-container { max-width: 960px; }Adjust as required.
perfect! thank you so much! one other quick question if you dont mind; how would i turn off the background image for this one page as well?
thanks again for everything you do sir! your service is top-notch!
d-_-b
Glad to hear that helped.
Sure, no problem, try:
.page-id-4280 #main { background-image: none; }hi! perhaps i should have started a new post for this but the question is very similar and for the same site. if you need me to start a new thread let me know. here is my question.
i want to set an image in the background of a specific woocommerce product page and i want it to stretch and fill the screen if it is a big screen size but i also want it not to shrink past a certain width for mobile and small screens. can this be accomplished through css? is parallaxing a possibility using the page builder image widget somehow?
thank you!
d-_-b
No worries, I’ll try assist. Is the page live? Can I take a look at it?
hi, thanks for the reply! i am actually looking to be able to do this with any product page but here is one for example.
url: https://nectarcollector.org/product/nectar-collector-honeybird-delux-kit/
the end goal here is to add an image to the background of a product page that will stretch to fill the window but not shrink past a minimum when it goes mobile or small screen. while i have been working on this i also noticed that for product pages there is not an option to use page templates so there is not an ‘automatic’ way to remove the sidebar for a specific product. essentially i am trying to make a product page look a little more like a landing page. is there a way to do this as well?
thanks much for your help!
d-_-b
Sure, you can try the following Custom CSS:
.postid-5421 #main { background-color: #dff1ff; background-image: url("https://nectarcollector.org/wp-content/uploads/2015/02/nc_15-02_web_bck01.jpg"); background-size: cover; }Replace the URL with the desired background. The product ID would change for each product. You can get the product ID by editing it and then checking the address bar, it should be the only number there. 5421 is the ID in this case.