Full width on mainContent

#1 · January 30, 2018, 4:03 am

The default template restricts the "main" content to about 1140px.

I believe the code:

<router-outlet></router-outlet>

</div>

The header top menu has about the same width but the background image is the full width of the page.

I having a problem trying to extend my background of the main content section to the full wide of the browser without success.

Any suggestion to change this?

Thanks

#2 · January 30, 2018, 9:25 am

*Since QuickApp PRO already has the width in 100% I'm going to assume you're referring to QuickApp. Please specify the version next time.

I'll show you 2 approaches you can use to achieve this.

1. For a finer control override the "container" css class to set your desired css width. You can optionally use media queries to set the width for specific screen sizes.

E.g. Put the below code in style.css to set the width to 90% for larger screen sizes:

@media (min-width: 1200px) {
    .container {
        width: 90%;
    }
}

2. In bootstrap terms "container-fluid" extends to the entire width to fill the page.

So E.g. from app.component.html and home.component.html, replace the entry "container" with "container-fluid".

Hope this helps.

IMPORTANT!

This forum is now archived. Click here for the New Support Forum