Fix responsiveness of package grid on mobile

This commit is contained in:
rubenwardy 2023-08-14 22:01:01 +01:00
parent f7a5a1218f
commit 4a0653bcfd
3 changed files with 4 additions and 4 deletions

@ -268,9 +268,9 @@ pre {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.grid-4 { .grid-250px {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
} }
.gap-2 { .gap-2 {

@ -16,7 +16,7 @@
{%- endif %} {%- endif %}
<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/custom.css?v=41"> <link rel="stylesheet" type="text/css" href="/static/custom.css?v=42">
<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" /> <link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
{% if noindex -%} {% if noindex -%}

@ -38,7 +38,7 @@
{% endmacro %} {% endmacro %}
{% macro render_pkggrid(packages, show_author=True) -%} {% macro render_pkggrid(packages, show_author=True) -%}
<ul class="grid-4 gap-2 p-0"> <ul class="grid-250px gap-2 p-0">
{% for p in packages %} {% for p in packages %}
{{ render_pkgtile(p, show_author) }} {{ render_pkgtile(p, show_author) }}
{% else %} {% else %}