display not responsive / affichage non responsive

  • Posts: 53
  • Thank you received: 0
9 years 3 months ago #240582

Bjr,

Mon display n'est pas responsive. :ohmy:

J'ai repris la documentation fournie en repartant depuis la configuration d'Hikashop. Mon affichage est ok chez moi, mais quand je teste depuis mon bureau, écran plus étroit, je note que mon affichage est affreux (les images débordent du cadre de présentation des produits). :dry:

Pouvez vous m'aider à rectifier SVP ? Merci

Joomla 3.6.4
Hikashop Business 2.6.4
PHP 5.7
Navigateur Chrome 50 ou Mozilla 5
Website : www.aventures-culturelles.com
Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 84313
  • Thank you received: 13702
  • MODERATOR
9 years 3 months ago #240611

Bonjour,

Votre affichage est bien responsive. Par exemple sur les petites résolution cela s'affiche bien:
take.ms/0KTxs

Le problème vient du CSS:

@media (max-width: 767px) {
	body {
		padding-left: 20px;
		padding-right: 20px;
	}
	.navbar-fixed-top,
	.navbar-fixed-bottom,
	.navbar-static-top {
		margin-left: -20px;
		margin-right: -20px;
	}
	.container-fluid {
		padding: 0;
	}
	.dl-horizontal dt {
		float: none;
		clear: none;
		width: auto;
		text-align: left;
	}
	.dl-horizontal dd {
		margin-left: 0;
	}
	.container {
		width: auto;
	}
	.row-fluid {
		width: 100%;
	}
	.row,
	.thumbnails {
		margin-left: 0;
	}
	.thumbnails > li {
		float: none;
		margin-left: 0;
	}
	[class*="span"],
	.uneditable-input[class*="span"],
	.row-fluid [class*="span"] {
		float: none;
		display: block;
		width: 100%;
		margin-left: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.span12,
	.row-fluid .span12 {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.row-fluid [class*="offset"]:first-child {
		margin-left: 0;
	}
	.input-large,
	.input-xlarge,
	.input-xxlarge,
	input[class*="span"],
	select[class*="span"],
	textarea[class*="span"],
	.uneditable-input {
		display: block;
		width: 100%;
		min-height: 28px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.input-prepend input,
	.input-append input,
	.input-prepend input[class*="span"],
	.input-append input[class*="span"] {
		display: inline-block;
		width: auto;
	}
	.controls-row [class*="span"] + [class*="span"] {






		margin-left: 0;
	}



}
dans le fichier www.aventures-culturelles.com/templates/...op/css/bootstrap.css de votre template qui fait basculer l'affichage à 767 px alors que de la façon dont vous avez configuré votre mise en page, il faudrait déjà basculer à 1300px voir 1700px.

Vous pouvez changer cela dans ce fichier CSS jusqu'à obtenir un résultat souhaitable.

Please Log in or Create an account to join the conversation.

  • Posts: 53
  • Thank you received: 0
9 years 3 months ago #240692

Bonjour Nicolas,

Je viens de modifier mon css dans le boostrap de mon template tel que recommandé pour le média, mais rien n'a changé à l'affichage (voir print screen joint) :ohmy:



Si je comprends bien le truc, des morceaux de Css se sont copiés dans mon boostrap pour afficher l'extension hikashop, car je n'avais rien défini pour des "médias" à la création, ne pensant pas utiliser le type d'extension. :blush:

J'utilise template creator pour maquetter mon design car je ne suis ni programmeur ni développeur. Je sais juste retoucher le css grâce aux outils de développement mozilla ou chrome. Pour le reste, je n'y touche que très exceptionnellement et sur reco de spécialistes. :S

Que puis-je vérifier pour que mon affichage soit ok ? Chez moi, j'ai un écran type 16/9 et au bureau un écran dell classique et c'est sur ce dernier que j'ai constaté mon problème d'affichage. Merci pour ton aide :)
Nathalie

Joomla 3.6.4
Hikashop Business 2.6.4
PHP 5.7
Navigateur Chrome 50 ou Mozilla 5
Website : www.aventures-culturelles.com
Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 84313
  • Thank you received: 13702
  • MODERATOR
9 years 3 months ago #240757

Bonjour,

Je vois que le soucis viens du CSS d'HikaShop mainenant qui du coup passe par dessus celui du template.
Ajoutez ce CSS sur votre site et cela devrait faire l'affaire:

@media (max-width: 1200px) {
	.row-fluid [class*="span"] {
		float: none !important;
		display: block !important;
		width: 100% !important;
	}
}

Please Log in or Create an account to join the conversation.

  • Posts: 53
  • Thank you received: 0
9 years 3 months ago #240759

Bonjour Nicolas

Merci pour la réponse. j'ai donc ajouté la partie Css dans mon custum.css. L'affichage sur 5 colonnes est maintenant ok semble-t-il. En outre, sur 3 colonnes, le souci reste le même. Le contenu déborde du cadre de l'article.

J'ai réduit la taille de mon image à 150px (au lieu des 200 que j'avais mis initialement, mais cela ne permet pas d'améliorer le display. Le css Hika passerait-il encore au dessus de mon template aventures-shop ?



Merci infiniment pour votre aide

Joomla 3.6.4
Hikashop Business 2.6.4
PHP 5.7
Navigateur Chrome 50 ou Mozilla 5
Website : www.aventures-culturelles.com
Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 84313
  • Thank you received: 13702
  • MODERATOR
9 years 3 months ago #240764

Hi,

For this one, you can add such CSS:
@media (max-width: 1400px) {
.row-fluid .span4 {
float: none !important;
display: block !important;
width: 100% !important;
}
}

Please Log in or Create an account to join the conversation.

  • Posts: 53
  • Thank you received: 0
9 years 3 months ago #240861

Cette fois ci, cela ne change pas l'affichage. Il semble qu'il y ait un conflit qq part entre les couches de Css et je ne vois pas où... :blink:

Joomla 3.6.4
Hikashop Business 2.6.4
PHP 5.7
Navigateur Chrome 50 ou Mozilla 5
Website : www.aventures-culturelles.com

Please Log in or Create an account to join the conversation.

  • Posts: 13201
  • Thank you received: 2322
9 years 3 months ago #240866

Bonjour,

Il doit sûrement y avoir un conflit avec votre template.
Le plus simple serait de contacter le fournisseur du template, sinon voici un tutoriel sur comment personnaliser sa mise en page:
www.hikashop.com/support/documentation/1...ize-the-display.html

Dans votre cas, l'utilisation des media queries CSS est recommandé.

Please Log in or Create an account to join the conversation.

  • Posts: 53
  • Thank you received: 0
9 years 3 months ago #240968

visiblement oui, il y a conflit qq part...

Je vais contacter Cédric et lui demander conseil. C'est un garçon adorable, il aura sans doute des suggestions à me faire.

Pas si facile que cela à mettre en oeuvre l'outil Hikashop... mais tout de même plus abordable qu'opencart ! :lol:

Joomla 3.6.4
Hikashop Business 2.6.4
PHP 5.7
Navigateur Chrome 50 ou Mozilla 5
Website : www.aventures-culturelles.com

Please Log in or Create an account to join the conversation.

Time to create page: 0.098 seconds
Powered by Kunena Forum