Achieve Full Width Page Template

Activello
1

Hi,

I want to use the full width page template in Activello; basically because I want to create sliders, banners that span from the left to the right (100%) of the page. I tried several options, created custom full-width.php template but nothing seems to be working. I tried every option for full-width page, but there still remains white space on both sides of the page.

Please help.

P.S. I am using Elementor plugin to create full page sections.

2

Hi @bishgop,

Thank you for your another question.

You can try achieving this by setting Full width page template to the page and adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS


body.page-template-page-fullwidth #page .container {
    max-width: 100%;
    width: 100%;
}

Best Regards,
Movin

3

That was a quick reply,thanks.

It isn’t working. Please have a look at the screenshot (it’s the same for desktop also).

4

Could you please share me the page URL from your site where it is not working so that i can troubleshoot it?

5

Actually, on every page; but I wanted to start with this ‘About Us’ page:

http://www.littlebighappiness.in/

6

You have not set page template to Full Width to the shared page.

To make full width template pages absolutely full width use the below CSS code along with the above shared code.


.main-content-inner.col-sm-12.col-md-8.full-width {
    padding: 0;
}
7

Thank you Movin for the support. I set the page layout to Full Width, used both the codes you provided, and edited the page to see if it results in full width; but it is not working.

Please accept my apology if I am asking for way too much. I still wish this worked; it would solve much of my design issue.

8

I can see now on your site the the page About Us is full width and having full width images in it as shown in the attached screenshot.

Please advise.

9

Thanks Movin. I am not sure what’s the issue; it’s not covering the full screen on both my browsers - chrome and firefox.

10

Please try using the following custom CSS code to make it work.

.main-content-inner.full-width {
    padding: 0;
}