qgis2web popup editing

Question

I have exported a webmap created in qgis2web (QGIS 2.18.13) open layers. There is a list of attributes that I wanted to include in the popup, which are mostly related to a country's demographic and socioeconomic profile. From the image below however, you will see that the popup is pretty big, out of range and without a scroll.

I have attempted to edit the qgis2web.css file within resources to try and address some of the points but I am completely new to CSS so am unfamiliar with the syntax... Could any of you please help to:

1. Adjust the width/height of the popup
2. Ability to scroll through the popup

---

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    font-size: small;
}

th, td {
    vertical-align: top;
    text-align: left;
}

#map {
    width: 100%;
    height: 100%;
}

.ol-popup {
    display: none;
    position: absolute;
    background-color: white;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;   
    height: 100;
    width: 200;
    min-width: 100px;
    max-height:400px;  
    overflow-y: scroll;      
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-popup-closer:after {
    content: "X";
}

.ol-attribution a {
    text-decoration: none;
    color: #666;
    font-family: calibri;
    font-size: 50%;
}

#popup-content>ul>li:nth-child(even) {
    background-color: #eee;
}

#popup-content ul {
    list-style-type: none;
    padding-left: 0;
}

#popup-content li {
    margin-bottom:0.25em;
}

Answer 1

In the CSS-Class .ol-popup there are two properties that you want to take a closer look at:

min-width - controls the minimum width of your popup. Try to set it to a higher value (like 200px or 400px)

overflow-y - may have one of several values, allthough scroll should produce a scroll bar.