Problems with mobile layout

[polleke]

Hi,
I have some problems with the mobile layout of Phoca Download.
See image : <blockquote class="imgur-embed-pub" lang="en" data-id="a/NKu5YJa" ><a href="//imgur.com/a/NKu5YJa">mobiel phocadownload</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>

[img]https://imgur.com/a/NKu5YJa[/img]

(sorry icannot find a bbcode link at imgur)

can you help me.

regards Jan

[polleke]

You can have a look at : https://www.amaliavansolms.org/wat-doen-we/wandelingen
With a smartphone .

[Jan]

Hi, what exactly is the problem?

[polleke]

Hi Jan,
if you click on the the article "DOWNLOAD WANDELINGEN EN ROUTEKAARTJES", YOU CAN SEE THE PROBLEM.
EACH wandelommetjes has it own title and 2 downloads.
The problem is in som titles and in some downloads.

regards Jan

[christine]

Hi,

Heb het nu ook gezien, wat je bedoelt.
Try following:

h3 {
line-height: 18px !important;
}

to your e.g. custom.css. Check also then your gzip.php, as you are using:
ttps://www.amaliavansolms.org/cache/template/g ... 0ef00b.css (/cache/template ...)

Kind regards
Christine

[polleke]

Hi Christine,
now the titles look good. But now the discription next to the map-image.
E.g. : WANDELOMMETJE SPOORVERLEDEN BAARLE-GRENS
the second download description (on Mobile)

regards Jan

[polleke]

I added the fllowing lines in my custom.css:
[code]
.pd-document32 {
height: auto !important;
}
[/code]

that seems to works. Accept there is quit a lot space between 2 lines in the same download.

regards Jan

[christine]

Hi Jan,

the problem is, that it's html code (a href link).

It's not perfect, but maybe a compromise:

Code: Select all

@media only screen and (max-width: 500px) {
.pd-filename.phocadownloadfile,.phoca-dl-file-box-mod.pd-document32 {
white-space: nowrap;
width: 100%;
}
} 

Kind regards
Christine