Changing column size for promoted views

Dmitry_Gladyshev

Is it possible?

[Deleted User]

Ok, doing this on the fly, so this should point you in the right direction...

On your specific view, you will want to target the th (table header) notice the highlighted (in blue) aspect on the right hand side of the Chrome Developer Tools.  

In my example below, you will see that I have added an element.style (for .grid-container) and focused this on the data-field="Title".  I then define my width: 300px.  

Below the element style I have defined the particular element with the width: inherit - which will bring the width down from the element style.  



Here is the difference when i define width for the grid-container Title to 500px.  


This updated code will go in the custom space .css file after the site wide code be defining your specific page being targeted and adding your element style and inheritance.  

.page-id-123 .my_div {
    <your specific code here>;
}

Hope this helps!  

[Deleted User]

Hello Dmitry,

Currently, we do not persist these settings as we don't save preferences like this from what was developed in the console.  However, the trick is targeting your CSS specifically to the page you want and thus the grid.  Therefore it is possible to change column sizes!

Dmitry_Gladyshev

Could you please provide an example of code?

[Deleted User]

Ok, doing this on the fly, so this should point you in the right direction...

On your specific view, you will want to target the th (table header) notice the highlighted (in blue) aspect on the right hand side of the Chrome Developer Tools.  

In my example below, you will see that I have added an element.style (for .grid-container) and focused this on the data-field="Title".  I then define my width: 300px.  

Below the element style I have defined the particular element with the width: inherit - which will bring the width down from the element style.  



Here is the difference when i define width for the grid-container Title to 500px.  


This updated code will go in the custom space .css file after the site wide code be defining your specific page being targeted and adding your element style and inheritance.  

.page-id-123 .my_div {
    <your specific code here>;
}

Hope this helps!  

Dmitry_Gladyshev

Perfect, thank you!