Portals - Utilising full width of a web page

(0) Share

Report

Posted on by terryharrison

Hi all,

It seems as though this must be pretty straight forward but I cant find where to change the width of the main page container. below is part of a webpage containing an entity list and as you can see by default it has large borders left and right. I want to utilise more of the screen but not sure where this is defined. It doesn't seem to be part of the web template and it only seems to happen when i include headers and footers in the page template but i cant find anything there either. Is it part of the bootstrap.min.css?

Thanks in advance.

I have the same question (0)

All responses (5)

Answers (1)

Suggested answer

Charles Abi Khirs 3,569 on at

Like (0)

Report

Hello,

As you said, it is part of the bootstrap.min.css file.

You have to edit the .container class in the file. Set the width to 75% for exemple to increase the width of the whole container.

Was this reply helpful? Yes No
terryharrison 55 on at

Like (0)

Report

Thanks Charles. I have the bootstrap file downloaded but don't have a lot of experience with this or CSS. Would you just edit the file in notepad++ for example or do I need to upload it to a bootstrap editor app? I cant find anything on how this is done. Most tutorials just show you how to upload a new bootstrap theme rather than amend a current one.

Thanks

Was this reply helpful? Yes No
Verified answer

Charles Abi Khirs 3,569 on at

Like (0)

Report

Hello Therry,

1. You can edit this file in notepad

2. Ctrl + f to find ".container"

3. It should include width:<pixelnumber>

4. Comment the width line by putting // at the beginning of the line

5. Add the following line width:75%;

(you can change it as per your need)

6. Save the file

7. Upload the file in the nots tab of the file web

Was this reply helpful? Yes No
terryharrison 55 on at

Like (0)

Report

Thanks Charles, I've managed to find and change the related .container entry and modifying it has worked. My bootstrap file looked like this and i had to change the containter from 1170px to 1800px.

One last question though. If I just want to change for a specific area / page of the portal I assume I can override the default bootstrap entry by modifying the theme.css file? Looking in the current theme.css though this container isn't defined (so uses default). I'm not sure what I should add to the theme.css to achieve this.

Was this reply helpful? Yes No
terryharrison 55 on at

Like (1)

Report

Ive just found out that all I need to do in fact is add the below to the Custom CSS of the webpage! Hope this helps someone else.

Thanks again

Was this reply helpful? Yes No