1. ROHsoft
  2. Templates
  3. dinsdag 15 mei 2018
Beste,

Ik heb een site met recepten etc..
Deze site wordt veel via de mobiel bekeken wat erg fijn is.
Nu gaat de zoekfunctie in de responsive mode onderaan de recepten staan.
Hoe kan ik de zoek module naar boven krijgen.
Ik kan niet goed vinden welk bestand bepaald waar wat komt te staan als hij responsivew gebruikt.

Het gaat om website Ursie.nl

Ik hoop dat jullie me opweg kunnen helpen.
Geaccepteerde antwoord Pending Moderation
Hallo,

ik kan je wel een stukje op weg helpen ;)

Probeer bestaande zoekmodule alleen zichtbaar te laten voor desktop/laptop

Voor mobiel/tab maak je een kopie van je zoekmodule en deze ken je toe aan positie 17 https://ursie.nl/?tp=1

Dit topic op het Engelse Forum helpt je ook verder.
Daar spreken ze over hidden en visble daar moet je het mee kunnen oplossen.

Succes ermee.

Groeten Ron :)
  1. meer dan een maand geleden
  2. Templates
  3. # 1
Geaccepteerde antwoord Pending Moderation
Ik snap wat je bedoeld en denk ook dat dit de juiste weg is.
Alleen lukt het niet.
Ik heb in de Suffix vermeldt <space>hidden-phone, maar er veranderd niets.
meerdere geprobeerd <space>visible-dekstop....met zonder <space> met zonder "." etc......
Het lijkt wel of de bootstrap niet werkt.
Enig idee hoe ik kan zien dat deze werkt, misschine met een test of iets.

Groeten, Rico
  1. meer dan een maand geleden
  2. Templates
  3. # 2
Geaccepteerde antwoord Pending Moderation
Artisteer werkt niet met bootstrap. Dus je zult zelf de bijbehorende media queries aan moeten maken.
  1. meer dan een maand geleden
  2. Templates
  3. # 3
Geaccepteerde antwoord Pending Moderation
aha daar was ik al bang voor.

Dan moet ik dus in de custom.css


@media (max-width : 768px) {
.hidden-phone {
display: none;
}
}


Is dat genoeg of moet ik dan even goed iets in de suffix van de module melden?
  1. meer dan een maand geleden
  2. Templates
  3. # 4
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Jouw query is niet volledig


@media only screen and (max-width: 768px) {
.hidden-phone {
display: none;
}
}


En daarna bij suffix <spatie> hidden-phone instellen.
  1. meer dan een maand geleden
  2. Templates
  3. # 5
Geaccepteerde antwoord Pending Moderation
hmmm....ik snap het niet, het werkt nog niet zoals ik verwacht had.

In de module "Slim zoeken" op postie 7 heb ik in de Module class achtervoegsel <spatie>hidden-phone gezet.
Die werkt goed, in de desktop versie zie je hem en op de phone niet meer.
Dit is de code die ik gebruikt hebt in de template.responsive.css

@media only screen and (max-width: 767px)
{
.hidden-desktop { display: inherit; }
.visible-desktop { display: none; }
.visible-phone { display: inherit; }
.hidden-phone { display: none; }
}


Om nu de copy van module Slim zoeken die op positie 17 staat alleen zichtbaar te maken op de phone, heb ik daar in de Module Class achtervoegsel <spatie>visible-phone geplaatst. Maar dat werkt dan weer niet en hij blijft dus wel zichtbaar op de desktop.

Alles staat nu nog zoals hierboven beschreven.....enig idee?
  1. meer dan een maand geleden
  2. Templates
  3. # 6
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Dat komt omdat de code niet goed is. Gebruik de code die ik gegeven heb telkens voor 1 class.


@media only screen and (max-width: 320px)
{
.hidden-phone { display: none; }
}

@media only screen and (min-width: 320px) and {max-width: 1200}
{
.hidden-tablet { display: none; }
}

@media only screen and (min-width: 1200}
{
.hidden-desktop { display: none; }
}


Iets niet weergeven op phone, geef je de Module class achtervoegsel <spatie>hidden-phone. De module staat dan uit op media tot 320 pixels breed.

Wil je iets niet weergeven op een tablet, dan geef je de Module class achtervoegsel <spatie>hidden-tablet. De module staat dan uit op media tussen 320 en 1200 pixels breed.

Wil je iets niet weergeven op een desktop, dan geef je de Module class achtervoegsel <spatie>hidden-desktop. De module staat dan uit op media vanaf 1200 pixels breed.
  1. meer dan een maand geleden
  2. Templates
  3. # 7
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
En visible-desktop staat op display:none, dus dat zal niet werken, nee
  1. meer dan een maand geleden
  2. Templates
  3. # 8
Patrick Smits
Gebruikersgroep regio Utrecht
Geaccepteerde antwoord Pending Moderation
Voor phone een query met max 320 maken en daar de code inzetten en voor desktop query min 768. Wat daartussen zit is een ipad.
  1. meer dan een maand geleden
  2. Templates
  3. # 9
Geaccepteerde antwoord Pending Moderation
Oke het is gelukt, zal even een kleine uitleg verder geven.

Onderstand de code die in de template.responsive.css toegevoegd is.

@media only screen and (max-width: 768px)
{
.hidden-phone { display: none; }
}

@media only screen and (min-width: 768px) and (max-width: 1024px)
{
.hidden-tablet { display: none; }
}

@media only screen and (min-width: 1024px)
{
.hidden-desktop { display: none; }
}

De maten heb ik even opgezocht en bekeken waar ik wil dat er tussen de modules gewisseld wordt.

In de module "Slim zoeken" genaamd "Recept zoeken" op positie 7 in de rechter kolom staat onder Module Class achtervoegsel <spatie>hidden-phone.
In de molule "Slim zoeken" genaamd "Recepten zoeken" op positie 17 onder de header staat in Module Class achtervoegsel <spatie>hidden-tablet en daaronder <spatie>hidden-desktop.

Bedankt Patrick en Ron voor de ondersteuning.
  1. meer dan een maand geleden
  2. Templates
  3. # 10
  • Pagina :
  • 1


Er zijn nog geen reacties op dit bericht.
U mag echter niet reageren op dit bericht.
Sorry de discussie is momenteel gesloten. U kunt nu geen reactie plaatsen.