Forum Replies Created
-
Posts
-
Dear Ismael,
thanks a lot for your quick reply. I tried the new CSS code, but unfortunately with no success. With your settings, all columns are displayed below one another. So I changed the margins and width a little to fit at least two columns next to each other on my tablet.
Despite of disabling File Compression settings and disabling Equal Height, the third column stills connects below the second one, because the first one is higher due to more text. [I thought the option Equal Height was meant for such situations, but probably I misunderstood.] Anyway, the CSS code now looks like this, but it does not do the job:
@media only screen and (max-width: 1366px) {
.responsive .av_one_fourth.first.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_half.flex_column_div, .responsive .avia-content-slider-inner .av_one_fourth.first.flex_column_div {
margin-left: 0%;
clear: none;
width: 46%; /* Kriesi: 48% */
float: left;
}.responsive .av_one_fourth.first.el_before_av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_fourth.first + .av_one_fourth + .av_one_fourth + .av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth.flex_column_div, .responsive .av_one_half.first + .av_one_fourth.el_before_av_one_fourth + .av_one_fourth.flex_column_div, .responsive .avia-content-slider-inner .av_one_fourth.flex_column_div {
margin-right: 2%; /* Kriesi: margin-left: 4% */
width: 46%; /* Kriesi: 48% */
float: left;
}
}Hope you are willing to dive in again… Many thanks in advance!
Best regards, Cornelie
Dear Kriesi Team,
I used this code (slightly adapted, e.g. width: 50%) for my own project to switch from a four-column grid row to a two-column grid row on smaller mobile devices (max-width 1366px, min-width 768px). Unfortunately this code and some others I tried myself did not work.
In the meantime I tried reach the same with normal columns instead of grid row (4 columns on desktop, 2 columns on tablet landscape, 1 column on tablet portrait and smartphone). I would like the 2-column layout on mobile devices with max-width 1366, min-width 768px. Unfortunately my CSS-code to achieve this, does not work properly. It shows the 2 columns next to each other, however column 3 and 4 do not follow nicely: column 3 does not float to the left under column 1, but already starts unter column 2. I tried with CSS float, display, position, but nothing worked.
@media only screen and (max-width: 1366px) {
div .av_one_fourth {
width: 46%;
margin-left: 4%;
float: left !important;
}
}Could you please help me with the right CSS code? Many thanks in advance!
Best regards, Cornelie
Hi Rikard,
thanks for the CSS code, it works! I just tuned the max-width a bit (768px) so that the 3-column layout on (smaller) tablets in landscape remains.
You can close the thread now.Have a nice day!
Best regards, CornelieDear Rikard,
thanks for your quick reply. I noticed that in your demo the Blog Classic Grid shows the same “1+2 column layout” on mobile phones in landscape and tablets in portrait:
I hope there is a way to change this default behaviour on smaller displays into a single column layout, like on mobile phones in portrait?
Best regards, Cornelie
Dear Rikard,
yes, it works! Thanks so much for your help!
So if I understand correctly, the only mistake I made was that in Quick CSS after scr:url the part “https://yoursite.ch/wp-content/themes/enfold/css/” before “fonts/…”) was missing.
Thank you, you made my day!
Best regards, Cornelie
Hi Rikard,
that’s very frustrating. I just checked the FTP login details in my last message and they seem to work. I will provide you with my login as well, hope this works.
Best regards, CornelieDear Rikard,
Sorry to hear, that the login details were not sent properly. Hope they will be visible in the private part now.
Thanks a lot for your help!
Best regards,
CornelieDear Rikard,
unfortunately, I need your help again… :-S
We baught the license for our Papyrus font at Linotype and downloaded the respective Webfont-Kit for Latin 1. For integration within WP we used the following guidelines of Linotype:
1. Extrahieren Sie aus dem ZIP-Archiv des Webfont-Pakets die Datei demo.css und das Verzeichnis Fonts
2. Finden Sie in Ihrem WordPress-Installationsverzeichnis den css-Ordner für Ihr derzeit verwendetes Thema
Beispiel: wp-content/themes/twentyfifteen/css/
3. Laden Sie die Datei demo.css und das Verzeichnis Fonts aus Schritt 1 in diesen Ordner hoch
4. Melden Sie sich in Ihrem WordPress Dashboard als Admin an
5. Klicken Sie im Bereich Design auf die Option Editor
6. Wählen Sie aus der Dateiliste in der rechten Spalte „Header (header.php)“
7. Fügen Sie zwischen den Tags <head> und </head> folgende neue Zeile ein:
<link rel=”stylesheet” href=”<?php echo esc_url( get_template_directory_uri() ); ?>/css/fonts.css”>
8. Klicken Sie auf Datei aktualisieren.In step 2-3 we uploaded the fonts.css in wp-content/themes/enfold/css (please note that we also work with the Enfold Child Theme, but we did not find a directory “css” here, so we used the parent theme). In this css-directory we also created the folder “fonts” as well as its sub-folder “883327”: wp-content/themes/enfold/css/fonts/883327/ and here we uploaded the two font files WOFF and WOFF2.
In Step 5-7 we added this line in the header.php from Enfold Parent.
Unfortunately these steps did not result in showing the Papyrus font on our Android mobile devices.
Next we copied the fonts.css contents directly in the Quick CSS-field of our Child Theme Options, including a reference of h1-h6 to the Papyrus font-family, but all this did not work either.
Probably we did something wrong… Hope you see our mistake.
FYI: For tracking the pageviews by Linotype an empty CSS-file on Linotypes server is being used. There are two options for pageview tracking, we want to try the first option @import-Methode first (and in case of non-satisfaction, try the second one with Asynchrone javaScript Methode). The first option should work as follows:
Die Tracking-CSS-Datei wird über das @import-Tag in der Schriften-CSS-Datei aufgerufen. Sie müssen nur die Datei demo.css in Ihre Seiten einbinden.
Bei dieser direkten Methode wird der Seitenaufbau erst fortgesetzt, wenn die Tracking-CSS-Datei geladen ist. Sollten Sie Sorge haben, dass die Server von linotype.com nicht schnell genug antworten, können Sie die technisch alternative, asynchrone Methode benutzen.Also: Linotype indicates that the webserver configuration should be right and the fonts need to be protected (see below), but we don’t understand what is meant or what should be done.
Werbserver-Konfiguration und Absicherung der Schriften
Damit Ihr Webserver die Webfonts richtig ausliefert, kann es nötig sein, die Konfiguration anzupassen.
Es kann je nach Umgebung erforderlich sein, den Server so zu konfigurieren, dass ein „access-control-allow-origin“-Header gesendet wird. Weitere Informationen finden Sie unter Mozilla Developer Network und W3C Cross-Origin Resource Sharing
In der Standardkonfiguration einiger Webserver, hier vor allem der IIS, fehlt für einige oder alle Webfonts die Zuweisung der passenden MIME types, so dass diese nachgetragen werden müssen. Wir empfehlen, alle Webfonts mit dem MIME type „application/octet-stream“ auszuliefern. So erreichen Sie die beste Kompatibilität mit den verschiedenen Browsern.
Die Lizenzbestimmungen verpflichten Sie, angemessene Sicherheitsmaßnahmen zu ergreifen, damit Ihre Webschriften nicht missbräuchlich benutzt werden. Teil dieser Sicherheitsmaßnamen sind die kryptischen Schriftnamen, die deswegen erhalten bleiben müssen. In den Beispiel-Dateien werden diese Namen richtig referenziert.
Darüber hinaus muss der Webserver so konfiguriert sein, dass man die Webschriften nicht einfach über die Eingabe einer URL im Browser oder ein wget-Kommando herunterladen kann (sogenannte „Hotlink Protection“). Außerdem muss sichergestellt sein, dass die Schriften nicht von fremden Seiten aus verlinkt werden können.Sorry, for the long mail, but I wanted to provide you with as many details as possible to hopefully find out the problem.
Many thanks in advance for your help!
Best regards, Cornelie
Thanks, Rikard, for your reply!
Good to know, that the web safe fonts are not included in the theme. Now the steps to be taken are making sense to me. :-) I will get in touch again in case of more questions or help needed.
Best regards, CornelieSmall addition: I installed Chrome, Firefox and Microsoft Edge on a Huawei tablet, and none of these mobile browsers were capable of showing the Papyrus font correctly. (However, still I don’t know which steps exactly are needed to make them do… Thanks for your help!)
Hi Rikard,
thanks for your suggestion! I am not familiar with uploading files to a server. So I would be greatful for any hints on how/where to do that.
We host our website at all-inkl.com. Would this be the place to upload the font “Papyrus”? Although the font type is already in your standard fonts for Enfold and is shown correctly on all large screens and on all devices with Apple software. So I assume the font is already in the fonts folder on the server, or am I wrong..?
Android tablets and mobile phones do not seem to have installed Papyrus on default (we tried several Sony, Samsung, Huawei devices). How to make sure they do? Since I assume you did not mean to install the font manually on each device separately.
Thanks in advance for any further hints! Looking forward to learn… ;-)
Best regards, Cornelie
Hi Yigit,
thanks for your quick reply! No, it is still not working perfectly. Obviously Safari can cope with the different font types, and on desktops also Chrome, Firefox and Edge show the fonts correctly. Only on Android tablets and mobile phones the heading font (esp. Papyrus, because this will be the main heading font) is not shown…! Hope you have any idea what could cause it and what could be done. Thanks for your help!
Best regards, Cornelie
