Page 1 of 2
responsive thumbs
Posted: 25 Dec 2016, 01:05
by radmauro
Hi, in my responsive joomla template I have 590 px for the phoca-category width. I need 3 or 4 thumbs for each row, and it is simple to calculate thumb width for desktop. But I can not solve for tablets (vertical) and phones because the thumbs remain the same size and I have an unpleasant white space to the right.
In my responsive joomla template, images resize (scale) automatically within certain parameters and limits. How to do it into Phocagallery?
A second question, please: how to increase vertical space between thumbs boxes?
Best
Re: responsive thumbs
Posted: 25 Dec 2016, 16:10
by ReptilienWohnzimmer
margin -left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
oder
padding -left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
Re: responsive thumbs
Posted: 25 Dec 2016, 16:13
by christine
Hi Best,
PG is responsive. See examples:
https://www.phoca.cz/joomla3demo/category/1-celebration,
https://www.phoca.cz/phocacartdemo/phoca-gallery
About your first questions: Would be useful to see your URL.
A second question, please: how to increase vertical space between thumbs boxes?
PG version 4.3.4 > try to add following code at the end of your template.css:
Code: Select all
div.pg-cv-box.item.pg-grid-sizer {
margin-bottom: 20px;
}
Kind regards, Christine
---------------------------------
Hi Alexander

erst jetzt Dein post gesehen. Danke für Deine Hilfe.
Wo soll er diese Werte reingeben? Geht ja glaub ich u.a. um tablets (weiß nicht ...)
OT: Mein obiger Code betrifft jetzt rein nur den gewünschten vertikalen Abstand.
Re: responsive thumbs
Posted: 25 Dec 2016, 16:34
by ReptilienWohnzimmer
servus Christine,
hier mal der Pfad zur Datei:
/media/com_phocagallery/css/custom/default.css DORT Zeile 56 BEI MIR!!!
Einfach mit der Maus auf eine obere Ecke der Box mit rechtsklick und dann auf untersuchen gehen. Es werde alle Codes für die Box angezeigt. Hintergrundfarbe, Schriftfarbe Border ... Dort den gewünschten " margin- ... : 10 oder 20px; eintragen.
Man sieht sofort im Browser, was sich ändert. Wenn alles OK, diesen Code in die entsprechende Datei einfügen und speichern.
LG Alexander
Re: responsive thumbs
Posted: 25 Dec 2016, 17:32
by christine
Hallo Alexander,
ja natürlich, mach es ja auch nicht anders (das mit Code untersuchen)
OT: Hab mir gleich Deine Zeile 56 bei Dir angesehen (eigentlich 58). Nun ja, paddings/margins sind bereits default eingestellt. Deine veränderten Werte sind darunter, welche die oberen (noch existierenden) überschreiben. Sollten jetzt aber englisch weiter machen ....
@ Best,
you see colleague and I were talking about your problems
Alexander meant: you could try to change either with paddings and or margins in:
.pg-cv-box
Nevertheless would be useful to see it live.
Kind regards, Christine
Re: responsive thumbs
Posted: 25 Dec 2016, 18:29
by radmauro
Thank you for very quick reply.
See please
http://www.rideraddict.com/phoca-test
(I have not changed yet highslideJS to get correct size thumbs into their boxes on mobile, but I know how to do).
The thumb images should resize (scale) automatically within certain parameters and limits, but dont.
Re: responsive thumbs
Posted: 25 Dec 2016, 18:41
by Jan
radmauro
Hi, on your site, the fixed width and height for images are enabled. Did you set responsive parameter to yes in Phoca Gallery
Jan
Re: responsive thumbs
Posted: 25 Dec 2016, 19:20
by radmauro
Ops! Too many options ;) I don't find it.... (V 4.2.1)
Re: responsive thumbs
Posted: 25 Dec 2016, 19:24
by Jan
Hi, first of all, update to the latest version, 4.3.4.
Jan
Re: responsive thumbs
Posted: 25 Dec 2016, 19:54
by radmauro
Ok Jan. Thankyou very much.
mauro