Hogy legyen mobilbarát az oldalunk?

Hogyan tehetjük a már régebbi joomla weboldalunkat mobilbaráttá?

Amennyiben a sablonunk reszponzív, úgy aránylag könnyű dolgunk van mert általában elég tűrhetően jelenik meg mobil nézetben az oldal. Itt sem árt azért egy jópár modult elrejteni, teljesen feleslegesen jelenik meg egy csomó modulunk a mobil készüléken és csak zavaróan hat a látogatónak. Ezt pár egyszerű kis kóddal elérhetjük.

nem kell CSS-t vagy HTML kódolást elvégezni. Megnyitjuk azt a modult amit el szeretnénk rejteni a mobil nézetről és általában a Speciál fül alatt megkeressük a Modul osztály utótagot és beírjuk az alábbi kódot:

Ezek után már nem fog látszani ez a modulunk mobil nézetben.
 
Ugyan ezzel a megoldással a fordítottját is el tudjuk érni, azaz csak mobilon fog látszani az adott modul ha beírjuk: hidden-desktop kódot.
 
Vagy ezeket alkalmazva:
 
Container width None (auto) 750px                      970px             1170px
 
Class prefix                   hidden-xs hidden-sm   hidden-md       hidden-lg
 
Így egy kissé átalakíthatjuk a normál asztali nézetet és a mobilos megjelenítést.
Amennyiben egyikkel sem sikerül, akkor itt egy további lehetőség:
 

Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none .d-xxl-block
Hidden only on xxl .d-xxl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block .d-xxl-none
Visible only on xxl .d-none .d-xxl-block

Az elemek elrejtéséhez egyszerűen használja a .d-none osztályt vagy a .d-{sm,md,lg,xl,xxl}-none osztályok egyikét bármely érzékeny képernyőváltozathoz.

Ha egy elemet csak a képernyőméretek adott intervallumán szeretne megjeleníteni, kombinálhat egy .d-*-none osztályt egy .d-*-* osztállyal, például .d-none .d-md-block .d-xl- none A .d-xxl-none elrejti az elemet minden képernyőméretnél, kivéve a közepes és nagy eszközöket.

Ha végképp nem engedi az elrejtést, akkor be kell másolni ezt a pár sort a sablon CSS-be és lehet használni ezeket a kódokat:

hidden-xs hidden-sm   hidden-md       hidden-lg

CSS:

.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs { display:table !important; }
tr.visible-xs { display:table-row !important; }
th.visible-xs, td.visible-xs { display:table-cell !important; }

.visible-xs { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px) { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px) { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px) { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)

 

 

Ezen az oldalon le is lehet ellenőrizni, hogy mennyire sikerült elérni a mobilbarát kinézetet:  Mobil teszt

 

 

Kapcsolódó tartalom:


 

Arculattervezés Mobilbarát weboldal Honlap sablonok

Honlapkészítés - Weboldal karbantartás - Kereső optimalizálás - Papys Webdesign

 
Mentés
A cookie-k felhasználói beállításai
Sütiket használunk, hogy a lehető legjobb élményt nyújtsuk Önnek a weboldalunkon. Ha elutasítja a sütik használatát, előfordulhat, hogy ez a weboldal nem az elvárt módon működik.
Mindent elfogadok
Minden elutasítása
További információ
Infók
Árajánlat
Ingyenes árajánlat
Elfogadom
Visszautasítás