web-dev-qa-db-fra.com

Où éditer les codes html sensibles de la page principale de mon site Web

Je possède un site Web appelé http://elitemaths.com.au/ . Actuellement, les modules de la page principale semblent bien fonctionner sur un navigateur de bureau avec "maths is hard ..." ainsi que sur "Fulfill your ...". J'ai joint une capture d'écran de ceci . enter image description here .

Cependant, lorsque je charge la même page sur mon iphone 6, ces div ne fonctionnent pas correctement. Ce qui suit est ce que je vois sur mon téléphone. enter image description here .

Étant assez nouveau pour Joomla et html, je ne sais pas où je pourrais aller et essayer de trier cela. J'ai consulté le fichier template.css du répertoire "/ public_html/templates/elitemaths/local/css/themes/elitemaths", mais je ne trouve pas où se trouve ce module.

Quelqu'un pourrait-il suggérer le fichier sur lequel travailler pour résoudre ce problème? Et est-ce que quelqu'un pourrait suggérer une solution possible si possible?

Merci beaucoup!

joomla-3.xtemplatesjhtml
1
Will Kim

Ces divs ont les classes h2 visible-lg visible-md visible-sm

Le code suivant cache ces divs.

Line: 6685
.visible-xs, .visible-sm, .visible-md, .visible-lg {
    display: none !important;
}

La raison pour laquelle ils sont visibles sur de grands écrans est ce code:

Line: 6795
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}.....

vous pouvez trouver les deux codes dans: http://elitemaths.com.au/templates/elitemaths/local/css/themes/elitemaths/bootstrap.css

Vous pouvez supprimer la classe visible-lg du premier code ou encore mieux éditer le second.

3
John

Je ne sais pas vraiment pour votre modèle mais cela peut être le bon fichier. C’est généralement un énorme fichier :) C’est protostar/css/template.css pour le modèle protostar fourni avec Joomla.
Une fois trouvé, vous devriez rechercher la chaîne @ media. Celles-ci sont appelées requêtes multimédia. Ils permettent de définir de nouvelles règles de style pour différents types de supports. Vous pouvez taper quelque chose comme:

@media screen and (max-width:640px) :{
    p {
        background-color: red; } }

Dans ce cas, les paragraphes auront une couleur de fond rouge quand ils seront vus depuis un périphérique qui est un écran dont la résolution maximale est de 640px.
Le mot écran est important. C'est le type de média. Parce que vous pouvez spécifier des choses comme print pour les imprimantes!
C’est le principe de base.

2
jcm69