SharePoint Webpart view Keeps Changing Based on Screen Resolution

[eyeana14]

Hi,

I have a SharePoint site which I have designed, however, the view of the page keeps on changing depending on what resolution the page is viewed at. For example, the below is what I see when the SP page is viewed at 90% resolution:

 

Note: this is the view which I would like to see at constant (i.e. the tiles should be displaying 5 by 3 at all times). Even when the page is viewed at different screen resolution.

However, when I increase my screen resolution e.g. I zoom into the page and view it at 120%, the view changes to the image below i.e. the fifth icon is not fully displaying/has been cut off.

 

What I have concluded is that SP has a certain screen resolution in which the page is best viewed at. Am I able to change this setting to make the view to be static i.e. users can view all 15 tiles laid out in 3 rows of 5 despite the different screen resolutions they may view their screen at?

Additional notes:

-  I believe that I am working under the SP Online environment, I believe that it is version 2016

- I am referring to the promoted links webpart

- This is a sahrepoint teams site

- I have utilised custom codes to adjust the promoted links e.g. display the 15 tiles in 3 rows of 5

[#2]

@eyeana14 

It looks like you're working in SharePoint classic pages - which are not nearly as responsive as modern. Whether you're on 2016, Online, or elsewhere shouldn't have any effect on this as far as I know.

When you say you're using custom code to lay out the Promoted Links web part to show 3x5, what exactly do you mean? Do you have some custom CSS running? Can you show your CSS?

[#3]

Hi @Thomas Berman, 

I have inseted a script editor, and have the following codes inside:

<style type="text/css">

/*display promoted links in 3 rows of 5 items*/
.ms-promlink-body {
width: 800px;
height: 100px;
}
/*display rows of items by width*/
.ms-promlink-body {
width: 100%;
}

/*hide the arrows when you have more items than viewable*/
.ms-promlink-header{
display:none;
}
/* title and description text */
ul.ms-tileview-tile-detailsListMedium {
font-size: 13.5px;
}
.ms-tileview-tile-titleMedium,
.ms-tileview-tile-titleMediumCollapsed,
.ms-tileview-tile-titleMediumExpanded,
.ms-tileview-tile-titleSmall,
.ms-tileview-tile-titleSmallCollapsed,
.ms-tileview-tile-titleSmallExpanded,
.ms-tileview-tile-descriptionMedium {
display: block;
text-align: center;
}
.ms-tileview-tile-detailsBox{
background-color:rgba( 0,0,0,0.35);
}

</style>

I have 15 promoted link tiles, and would like to view them constantly in three rows of 5. Currently, the view of the promoted links changes depending on the screen resoultion which I am viewing my SP site in. For example, when I am viewing my screen at 100%, the layout of the tiles changes to 3 rows of 4, and the remaining 3 tiles underneath it.

[#4]

@eyeana14 

Without testing your CSS, I see you have a hard-coded pixel width on the web part body. Can you try playing around with that to be a proportional unit like percent/em/rem/vw? That's the first place I would start.

[#5]

@Thomas Berman 

I have just played around with the codes below, changing the px with %,em,rem,vw:

.ms-promlink-body {
width: 800px;
height: 100px;
}

However it still does not achieve the output. SP displays the tiles in 3 rows of 5 when page is viewed at 90%.