Προβλημα με responsive theme από yootheme

fidolos · 24 Νοεμβρίου 2013

Ρε παιδιά χρησιμοποιώ το θέμα infinity για wp από το youtheme. http://www.yootheme.com/demo/wordpress

Όπως είναι τώρα, είναι μια χαρα σε υπολογιστη. Το πρόβλημα είναι οτι σε κινητα και ταμπλετ χαλάει πολύ. Πως γίνεται ρε γαμώτο να απενεργοποιήσω αυτή την λειτουργια και να είναι πάντα σταθερό?

Δοκίμασα αυτή την λύση http://www.yootheme.com/support/question/16687?order=created

Just adding Pawels's useful info:

Everything is working like it should. As I mentioned before disabling the responsive layout only effect the mobile devices and not the desktop browsers.

Here is how you can remove the responsive layout for desktop browsers:

Step 1:

Open (template)/layouts/template.config.php

Change line 4 from:

$css[] = sprintf('.wrapper { max-width: %dpx; }', $this['config']->get('template_width'));

to:

$css[] = sprintf('.wrapper { width: %dpx; }', $this['config']->get('template_width'));

Remove or comment out line 88:

$this['asset']->addFile('css', 'css:responsive.css');

Step 2: Open (template)/js/template.js Remove or comment out line 49-77:

$.onMediaQuery('(min-width: 480px) and (max-width: 959px)', {  
    valid: function() {  
        $.matchHeight('sidebars', '.sidebars-2 #sidebar-a, .sidebars-2 #sidebar-b').match();  
        pairs = [];  
        $.each(['.sidebars-1 #sidebar-a > .grid-box', '.sidebars-1 #sidebar-b > .grid-box', '#top-a .grid-h', '#top-b .grid-h', '#bottom-a .grid-h', '#bottom-b .grid-h', '#innertop .grid-h', '#innerbottom .grid-h'], function(i, selector) {  
            for (var i = 0, elms = $(selector), len = parseInt(elms.length / 2); i < len; i++) {  
                var id = 'pair-' + pairs.length;  
                $.matchHeight(id, [elms.get(i * 2), elms.get(i * 2 + 1)], '.deepest').match();  
                pairs.push(id);  
            }  
        });  
    },  
    invalid: function() {  
        $.matchHeight('sidebars').remove();  
        $.each(pairs, function() { $.matchHeight(this).remove(); });  
    }  
});

$.onMediaQuery('(max-width: 767px)', {  
    valid: function() {  
        var header = $('#header-responsive');  
        if (!header.length) {  
            header = $('<div id="header-responsive"/>').prependTo('#header');  
            $('#logo').clone().removeAttr('id').addClass('logo').appendTo(header);  
            $('.searchbox').first().clone().removeAttr('id').appendTo(header);  
            $('#menu').responsiveMenu().next().addClass('menu-responsive').appendTo(header);  
        }  
    }  
})

αλλά εκτος οτι και πάλι το χαλάει, μικραίνει και το slideshow επάνω.

vacilis · 24 Νοεμβρίου 2013

Απλώς απενεργοποιησε το responsive από το control panel του θεματος

Επίσης, εγω δεν παρατηρώ καποιο πρόβλημα ή ελάττωμα στο resposive...

fidolos · 24 Νοεμβρίου 2013

Εμένα μου το χαλάει πολύ οπως το έχω φτιάξει. ενω στο desktop είναι τέλειο. Εν παση περιπτώση θελω να το απενεργοποιήσω. Έκανα disable από το cp του θεματος, αλλα απο οτι μου εγραψαν στην yootheme δεν αρκει αυτο. Ειναι για κάτι άλλο λεει. (δεν ξερω και καλα αγγλικα).

Edit: Θέλω να φαινεται σταθερο, απλα με zoom out οταν ειμαι σε ipad και κινητό. Ωστε να φτιαχτεί τουλάχιστον για ipad και μετα το πολυ πολυ βάζω και ένα mobile theme με chooser

Εν τω μεταξι στην παραπάνω λύση που λεει να αφαιρεσουμε το

$this['asset']->addFile('css', 'css:responsive.css');

εμενα δεν είναι ετσι αλλα οπως παρακάτω

$this['asset']->addFile('js', 'js:responsive.js');

Βρηκα και ενα αρχειο στο φακελο /theme/warp/js/ που λεγεται responsive.js και έχει τα παρακάτω.

/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

(function(a,f,g){function d(a){k.innerHTML='<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>';b.insertBefore(j,l);e=42==k.offsetWidth;b.removeChild(j);return e}function h(a){var b=d(a.media);if(a._listeners&&a.matches!={a.matches=b;for(var b=0,c=a._listeners.length;b<c;b++)a._listeners[b](a)}}function c(a,b,c){var d;return function(){var f=this,e=arguments,j=c&&!d;clearTimeout(d);d=setTimeout(function(){d=null;c||a.apply(f,e)},;j&&a.apply(f,e)}}if(!f.matchMedia||a.userAgent.match(/(iPhone|iPod|iPad)/i)){var e,
b=g.documentElement,l=b.firstElementChild||b.firstChild,j=g.createElement("body"),k=g.createElement("div");k.id="mq-test-1";k.style.cssText="position:absolute;top:-100em";j.style.background="none";j.appendChild(k);f.matchMedia=function(a){var b,e=[];b={matches:d(a),media:a,_listeners:e,addListener:function(a){"function"===typeof a&&e.push(a)},removeListener:function(a){for(var b=0,c=e.length;b<c;b++)e[b]===a&&delete e[b]}};f.addEventListener&&f.addEventListener("resize",c(function(){h(},150),!1);
g.addEventListener&&g.addEventListener("orientationchange",function(){h(},!1);return b}}})(navigator,window,document);
(function(a,f,g){if(!a.onMediaQuery){var d={},h=f.matchMedia&&f.matchMedia("only all").matches;a(g).ready(function(){for(var c in d)a(d[c]).trigger("init"),d[c].matches&&a(d[c]).trigger("valid")});a(f).bind("load",function(){for(var c in d)d[c].matches&&a(d[c]).trigger("valid")});a.onMediaQuery=function(c,e){var b=c&&d[c];b||(b=d[c]=f.matchMedia(c),b.supported=h,b.addListener(function(){a(.trigger(b.matches?"valid":"invalid")}));a(.bind(e);return b}}})(jQuery,window,document);
(function(a,f,g){a.fn.responsiveMenu=function(d){function h(c,e){var b="";a(c).children().each(function(){var c=a(this);c.children("a, span.separator").each(function(){var d=a(this),f=d.is("a")?d.attr("href"):"",g=d.is("span")?" disabled":"",m=1<e?Array(e).join("-")+" ":"",p=d.find(".title").length?d.find(".title").text().text();b+='<option value="'+f+'" class="'+d.attr("class")+'"'+g+">"+m+p+"</option>";c.find("ul.level"+(e+1)).each(function(){b+=h(this,e+1)})})});return b}d=a.extend({current:".current"},
d);return this.each(function(){var c=a(this),e=a("<select/>"),b="";c.find("ul.menu").each(function(){b+=h(this,1)});e.append(.change(function(){g.location.href=e.val()});e.find(d.current).attr("selected",!0);/iPhone|iPad|iPod/.test(f.platform)&&(/OS [1-5]_[0-9_]* like Mac OS X/i.test(f.userAgent)&&-1<f.userAgent.indexOf("AppleWebKit"))&&e.find(":disabled").remove();c.after(e)})}})(jQuery,navigator,window);
(function(a,f){function g(){c.setAttribute("content",;l=!0}function d({m=b.accelerationIncludingGravity;j=Math.abs(m.x);k=Math.abs(m.y);n=Math.abs(m.z);(!a.orientation||180===a.orientation)&&(7<j||(6<n&&8>k||8>n&&6<k)&&5<j)?l&&(c.setAttribute("content",e),l=!1):l||g()}if(/iPhone|iPad|iPod/.test(f.platform)&&/OS [1-5]_[0-9_]* like Mac OS X/i.test(f.userAgent)&&-1<f.userAgent.indexOf("AppleWebKit")){var h=a.document;if(h.querySelector){var c=h.querySelector("meta[name=viewport]"),h=c&&c.getAttribute("content"),
e=h+",maximum-scale=1",b=h+",maximum-scale=10",l=!0,j,k,n,m;c&&(a.addEventListener("orientationchange",g,!1),a.addEventListener("devicemotion",d,!1))}}})(this,navigator);

μπορω να κάνω κάτι εδώ?

=================================================================================

Ρίξτε μια ματια και στο theme/css/responsive.css

/* Copyright (C) YOOtheme GmbH, YOOtheme Proprietary Use License (http://www.yootheme.com/license) */

@import url(../warp/css/responsive.css);


/* Breakpoints
----------------------------------------------------------------------------------------------------*/

/* All except large Screens */
@media (max-width: 1220px) {

}

/* Only Phones and Tablets (Portrait) */
@media (max-width: 959px) {

	/* Layout */
	.wrapper.max-width65,
	.wrapper.max-width80 { max-width: 100%; }

	.bg-colored { padding: 0; }

	/* Modules */
	.grid-h .mod-box-transparent { margin: 0; }

}

/* Only Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 959px) {



}

/* Only Tablets (Portrait) and Phones (Landscape) */
@media (min-width: 480px) and (max-width: 959px) {

	/* Layout */
	#search { display: none; }


}

/* Only Phones */
@media (max-width: 767px) {

	/* Layout */
	#toolbar,
	#headerbar,
	#logo,
	#search,
	#menubar,
	#breadcrumbs  { display: none; }

	#header { margin-bottom: 20px; } 

	/* System */
	.searchbox { border: none; }


}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {



}

/* Only Phones (Portrait) */
@media (max-width: 479px) {

	/* System */
	#system .items .item,
	#system .items .item:first-child {
		margin-top: 12px;
		padding-top: 18px;
		border-top-width: 1px;
	}

	#system .items :first-child .item:first-child {
		margin-top: 0;
		padding-top: 0;
		border-width: 0;
	}

	#system .items .leading .item {
		margin-bottom: 0;
		padding-bottom: 0;
		border-width: 0;
	}

	.searchbox { padding: 0 0 0 38px; }


}

migf1 · 24 Νοεμβρίου 2013

Εμένα μου το χαλάει πολύ οπως το έχω φτιάξει. ενω στο desktop είναι τέλειο. Εν παση περιπτώση θελω να το απενεργοποιήσω. Έκανα disable από το cp του θεματος, αλλα απο οτι μου εγραψαν στην yootheme δεν αρκει αυτο. Ειναι για κάτι άλλο λεει. (δεν ξερω και καλα αγγλικα).

...

Η Yootheme είναι η καταλληλότερη για να σε διαφωτίσει πως να επέμβεις στα Warp'ed themes της, αφού είναι δικά της δημιουργήματα. Οπότε γιατί δεν τους ρωτάς απευθείας;

Από περιέργεια, τι πρόβλημα σου παρουσιάζει σε κινητά & τάμπλετ;

fidolos · 25 Νοεμβρίου 2013

Τους εστειλα μηνυμα και με παρεπεμψαν σε μια λυση που την εχω ηδη κανει αλλα χωρις αποτελεσμα. Εν τω μεταξι εκαναν 4-5 μερες να μου απαντησουν. Τωρα τους ξαναεστειλα. Με αυτα που εχω ανεβασει δεν μπορειτε να βρειτε κατι? Θελω να ειναι στατικο σαν φωτογραφια (οσο αφορα το μεγεθος)

*Σε κινητο και σε ταμπλετ, οταν εχω σε μια σειρα 2-3 position πλαι πλαι (πχ. Στο Top a) στην 1 θεση εχω φωτο, στην 2 και στην 3 κειμενο. Στο pc φαινεται μια χαρα, στο ipad η φωτογραφια πεφτει πανω στο κειμενο της δευτερης θεσης και στην τριτη θεση το κειμενο εχει γινει σε διαστασεις περιπου 20px width και 300px height. Δηλαδη μιση λεξη ανα σειρα.

migf1 · 25 Νοεμβρίου 2013

Πιθανότατα το πρόβλημα να λύνεται με λίγο css3 tweaking (κάποιο inline-block ίσως, ή κάποιος συνδυασμός width με max-width).

Προσωπικά προτιμώ να μας δώσεις ένα link με την προβληματική σελίδα και όταν ευκαιρήσω να το κοιτάξω στα γρήγορα με firebug, παρά να προσπαθήσω να βγάλω άκρη στους κώδικες που δίνεις (με τους οποίους δεν μπορώ καν να πειραματιστώ).

Σε ότι αφορά το μέγεθος του κειμένου που φαίνεται πολύ μεγάλο σε μικρές οθόνες, πιθανότατα θα αρκεί να εντοπίσεις από πιο @media query breakpoint και κάτω σου συμβαίνει, και να πας να μικρύνεις το font-size (π.χ. font-size:smaller;) ή και να αλλάζεις font γενικότερα στα classes/ids που θέλεις.

fidolos · 26 Νοεμβρίου 2013

Πιθανότατα το πρόβλημα να λύνεται με λίγο css3 tweaking (κάποιο inline-block ίσως, ή κάποιος συνδυασμός width με max-width).

Προσωπικά προτιμώ να μας δώσεις ένα link με την προβληματική σελίδα και όταν ευκαιρήσω να το κοιτάξω στα γρήγορα με firebug, παρά να προσπαθήσω να βγάλω άκρη στους κώδικες που δίνεις (με τους οποίους δεν μπορώ καν να πειραματιστώ).

Σε ότι αφορά το μέγεθος του κειμένου που φαίνεται πολύ μεγάλο σε μικρές οθόνες, πιθανότατα θα αρκεί να εντοπίσεις από πιο @media query breakpoint και κάτω σου συμβαίνει, και να πας να μικρύνεις το font-size (π.χ. font-size:smaller;) ή και να αλλάζεις font γενικότερα στα classes/ids που θέλεις.

Υπάρχει ένας πολύ σοβαρός λόγος που δεν μπορώ να δώσω λινκ δηστυχώς. Απο αυτά τα css δεν μπορει να βγάλει κανείς άκρη ε? Τουλάχιστον αν μπορούσα να το κάνω να γινεται responsive κάτω απο ενα συγκεκριμένο width. Δηλαδή μέχρι τα 480px να ειναι κανονικο και πιο κατω να γινεται responsive. Απο την yootheme ακομα καμια απαντηση. Στην τελικη θα φτιάξω ενα άλλο template για ipad και κινητα (αν και δεν θα προτιμουσα αυτη την λυση).

Υ.Γ.1. Γίνεται να επεξεργάζομαι ένα template (widget positions κ.λ.π.) χώρις να το έχω ενεργό? Γιατί από οτι βλέπω μόνο preview μπορώ να κάνω.

Υ.Γ.2. Όλα τα plugin που έχω βρει για να επιλέγουν αυτόματα το θεμα ανάλογα για το αν είναι κινητό ή όχι, έχουν τις επιλογές "Desktop ή mobiles" και "Desktop ή mobiles + tablets". Υπάρχει plugin που να ενεργοποιεί άλλο θέμα για υπολογιστές, άλλο για tablets και άλλο για κινητά? Δηλαδή 3 θέματα.

--------------------------------------------------------------------------------------------------------------

Για ρίξτε μια ματιά και εδώ

/* Copyright (C) YOOtheme GmbH, http://www.gnu.org/licenses/gpl.html GNU/GPL */

/*
 * Responsive Style Sheet - Defines base styles for mobile devices
 */


/* Responsive Utility Classes
----------------------------------------------------------------------------------------------------*/

.hidden-desktop { display: none; }

/* Only Phones */
@media (max-width: 767px) {
	.hidden-desktop { display: block; }
	.hidden-phone { display: none; }
}

/* Only Tablets (Portrait) */
@media (min-width: 768px) and (max-width: 959px) {
	.hidden-desktop { display: block; }
	.hidden-tablet { display: none; }
}


/* Responsive Content
----------------------------------------------------------------------------------------------------*/

#header-responsive { display: none; }


/* Layout Breakpoints
----------------------------------------------------------------------------------------------------*/

/* All except large Screens */
@media (max-width: 1220px) {

	#banner { display: none; }

}

/* Only Phones and Tablets (Portrait) */
@media (max-width: 959px) {

	/* Layout */
	#maininner,
	#sidebar-a,
	#sidebar-b {
		width: 100%;
		left: auto;
		right: auto;
	}

}

/* Only Tablets (Portrait) and Phones (Landscape) */
@media (min-width: 480px) and (max-width: 959px) {

	/* Layout */
	.width16,
	.width20,
	.width25,
	.width40,
	.width60,
	.width75,
	.width80 { width: 50%; }

	.width50 .width50 { width: 100%; }

	.sidebars-1 #sidebar-a .width100,
	.sidebars-1 #sidebar-b .width100 { width: 50%; }

	#sidebar-a .width100:nth-child(odd):last-child,
	#sidebar-b .width100:nth-child(odd):last-child,
	.width20:nth-child(odd):last-child { width: 100%; }

	.sidebars-2 #sidebar-a,
	.sidebars-2 #sidebar-b { width: 50%; }
	.sidebars-2.sidebar-b-left:not(.sidebar-a-left) #sidebar-a { float: right; } /* Keep Sidebar order */

	.grid-gutter > .grid-box:nth-child(n+3) > * { margin-top: 30px; }

	/* Tools */
	.width50 .align-left,
	.width50 .alignleft,
	.width50 .align-right,
	.width50 .alignright {
		margin: 0 auto 15px auto;
		float: none;
	}

}

/* Only Phones */
@media (max-width: 767px) {

	/* Layout */
	.width33,
	.width66 { width: 100%; }

	/* Header */
	#header-responsive { display: block; }

	#header-responsive .logo,
	#header-responsive .searchbox {
		display: inline-block;
		width: 45%;
		vertical-align: middle;
	}

	#header-responsive .logo { margin-right: 10%; }

	#header-responsive .searchbox {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* Menu */
	.menu-responsive {
		width: 100%;
		font-size: 14px;
	}


}

/* Only Phones (Landscape) */
@media (min-width: 480px) and (max-width: 767px) {
}

/* Only Phones (Portrait) */
@media (max-width: 479px) {

	/* Base */
	body { word-wrap: break-word; }

	/* Layout */
	.width16,
	.width20,
	.width25,
	.width40,
	.width50,
	.width60,
	.width75,
	.width80 { width: 100%; }

	.grid-gutter > .grid-box:nth-child(n+2) > * { margin-top: 30px; }

	/* Tools */
	.align-left,
	.alignleft,
	.align-right,
	.alignright {
		margin: 0 auto 15px auto;
		float: none;
	}

}


/* Fix Viewport for IE10 Snap Mode
----------------------------------------------------------------------------------------------------*/

@media (max-width: 400px) {
	@-ms-viewport{
		width: 320px;
	}
}

Επεξ/σία 26 Νοεμβρίου 2013 από fidolos

migf1 · 26 Νοεμβρίου 2013

Δεν είναι δυνατόν να σε βοηθήσουμε χωρίς να έχουμε εικόνα του site, αφού μας είναι αδύνατον να δούμε ποια css classes/ids αντιστοιχούν σε ποια μέρη του layout (και πιο συγκεκριμένα στο μέρος που έχεις πρόβλημα).

Πάντως στη Yootheme εγώ δεν βρήκα θέμα Infinty, βρήκα μόνο ένα Inifite στο demo του οποίου το μόνο πρόβλημα που εντόπισα (από μια γρήγορη ματιά που έριξα) είναι με τα captions του home slider σε μικρές οθόνες. Τα sidebars δείχνουν να λειτουργούν εντάξει, όπως και τα fonts.

Σύνδεση

Προβλημα με responsive theme από yootheme

Προτεινόμενες αναρτήσεις

fidolos

vacilis

fidolos

migf1

fidolos

migf1

fidolos

migf1

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση