I was able to change the background colors of both the copyright notice and footer areas relatively easily. However, the background colors do not extend fully from left to right, leaving gaps on the sides and at the bottom as well. Could anyone advise on how to make the background colors span the full width of the page? Can we do it without using css?
Thank you and best regards,
Hi toda97...,
It's in the layout.
Depending on which layout you are using, you may need to change to one of the layouts that have a full-width footer, or create your own layout.
Hope this helps.
Hi @DrAlbany,
Thanks. For homepage, I am using Boxton layout while for default it is Moscome Flipped. However, I had to use mini layouts for footer in both the aforementioned layouts. I needed 4 columns in the footer area. I am still confused what to do to solve the issue.
Regards
In the Boxton layout 'footer' takes the entire width of the window, you just need to add for 'footer' the style 'background: #000;'. And it is impossible to do without CSS. Moscome Flippeed has the same marking as in Boxton.
Mini Layouts has a four-column layout - Rolph.
Hello @Enthusiast, thank you for willing to help. I am not sure why it does not behave as you are explaining. I am already using mini layouts module. I have already created the content for the 4 footer columns. But the background color is still showing just in the middle and not full width. I am using a sub theme of Bootstrap 5 lite. Perhaps, it could have something to do with the choice of the base theme. Thank you for your support.
Regards
I installed for the test Bootstrap 5 lite, 'footer' also has 100% width. I recommend using the developer tools in the browser (F12) and conducting research. Without information about your problem, no one can say something. You did not even give a screenshot to understand the situation.
Just to give a clearer perspective of what I have been trying to achieve is that I am trying to change the footer background color and insert a header image to the full-width. But still there is no luck.
The following is a link to my half-baked website where I am facing these challenges at various block levels including the hero image on the homepage and other default pages as well.
https://www.halaltimes.com/directory/
Same issue with the hero image on this page.
https://www.halaltimes.com/directory/halal-businesses/hitech-solutions
Thank you for looking into this issue.
Regards
Could anyone guide me specifically what I need to do to sort out these issues?
Your 'footer' also has 100% of width. Just apply the background to it and remove the background from the nested containers.
You must understand how HTML is built and how to apply CSS to it, otherwise you cannot do simple things. I recommend going through a simple course, and you will enjoy your own creativity.
I know you're pointing me in the right direction. However, I'm struggling to follow what you're saying. I think I need to study CSS before I can take on these tiny issues.
Your 'footer' also has 100% of width. Just apply the background to it and remove the background from the nested containers.
You must understand how HTML is built and how to apply CSS to it, otherwise you cannot do simple things. I recommend going through a simple course, and you will enjoy your own creativity.