Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Dynamics 365 Community / Forums / Customer experience | Sales, Customer Insights,... / Portals - Utilising fu...
Customer experience | Sales, Customer Insights,...
Answered

Portals - Utilising full width of a web page

(0) ShareShare
ReportReport
Posted on by terryharrison 55

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?

pastedimage1572442116681v1.png

Thanks in advance.

  • terryharrison Profile Picture
    terryharrison 55 on at
    RE: Portals - Utilising full width of a web page

    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.

    customcss.PNG

    Thanks again

  • terryharrison Profile Picture
    terryharrison 55 on at
    RE: Portals - Utilising full width of a web page

    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.

    container.PNG

    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.

  • Verified answer
    Charles Abi Khirs Profile Picture
    Charles Abi Khirs 3,569 on at
    RE: Portals - Utilising full width of a web page

    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

  • terryharrison Profile Picture
    terryharrison 55 on at
    RE: Portals - Utilising full width of a web page

    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

  • Suggested answer
    Charles Abi Khirs Profile Picture
    Charles Abi Khirs 3,569 on at
    RE: Portals - Utilising full width of a web page

    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.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Tips for Writing Effective Suggested Answers

Best practices for providing successful forum answers ✍️

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,280 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,214 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans