In my quest to create a full page portfolio grid, I think some of the code for the supporting pages (not the home page) also deleted the padding under the container that pushed the footer to the bottom of each page. I tried to one by one delete the custom CSS that I thought enabled my full page grid, however none seemed to bring back the original theme layout.
Examples of pages in question:
Any suggestions? Thanks!
Hi @01labs,
I hope you are well today and thank you for your question.
I visited your shared pages and they seem working fine for me as shown in the attached screenshot.
Could you please tell me a bit more in detail about the issue by sharing the screenshots of it so that i can help you?
Best Regards,
Movin
Hi Movin,
Here are some screen shots of the pages when viewed in Google Chrome, Firefox and Safari. As you can see, they all have the same result with the container padding and the footer not being pushed to the bottom of the browser window. There are other pages in the site that have the same problem, so I assume it is a global issue.
Thanks,
Mark
Hi Mark,
As you can see, they all have the same result with the container padding
It seem you have removed the padding of container by modifying Sparkling theme code and not through its child theme that you are using on your site.
If you make changes in the theme file then you have to make these changes again after theme updation as changes made in the theme files get lost on theme updation.
You can add padding again by adding the following CSS code in the style.css file of your child theme.
div.main-content-area {
margin-top: 40px;
margin-bottom: 40px;
}
and the footer not being pushed to the bottom of the browser window.
This is the default behavior of the theme and what you are trying to achieve is called sticky footer which you can achieve by using the solutions posted on the following pages.
https://wordimpress.com/put-a-css-sticky-footer-in-your-wordpress-theme/
How to Create a "Sticky" Floating Footer Bar in WordPress
Edit fiddle - JSFiddle - Code Playground
http://stackoverflow.com/questions/12361029/how-can-i-get-a-sticky-footer-on-my-wordpress-theme/12361147#12361147
Best Regards,
Movin
Thanks Movin! I tried to follow the tutorials, but I couldn’t get it to work. I think the divs in the tutorial are named different from the ones in the theme. For instance, is there #wrapper div in the theme? Also, is #footer actually #footer-area, and #main actually #content? Sorry, could you please advise on other name differences?
Here is the css as indicated in the tutorials:
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper{
min-height:100%;
position:relative;
}
#header {
background:#00ff0f;
padding:30px;
}
#main{
padding:10px;
padding-bottom:45px; /* Height+padding(top and botton) of the footer /
text-align:justify;
height:100%;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:15px; / Height of the footer */
background:#00ff0f;
padding:10px 0; /paddingtop+bottom 20/
}
The CSS explained in the shared tutorial is for reference purpose only. You have to develop new custom code for Sparkling theme to achieve the same by referring the information provided in the shared tutorial.
Developing custom code for custom functionality is beyond the scope of support that we provide here.
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. We recommend the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
I checked the upwork.com listing and it refers a link back to you. Hehe are you recommending yourself? Knowing what the problem is (creating a sticky footer), how long do you think it’ll take? I think that tech support for the theme has been pretty great, so I’m willing to help you and Aigers out a bit.
Thanks,
Mark
Hi Movin,
Checking again on your interest in my hiring you to fix the problem with my pages. What is your availability?
Thanks,
Mark