responsive

Status
Niet open voor verdere reacties.

hithotline

Gebruiker
Lid geworden
17 jun 2003
Berichten
213
We hebben een website gemaakt met aristeer (niet door mijzelf) deze is als template ingezet in wordpress. De site bevat een responsive.css want die zie ik staan in de editor. De site opent nu ook op mobiel maar resized niet naar het scherm wat sites zonder responsive css wel doen. Ik krijg dus een scherm met de site als het ware ingezoomt, en we kunnen dus alleen maar schuiven over de site. Inmiddels is door wat probeersels in het style.css en responsive.css de menu balk uit het midden komen te liggen op een desktop scherm. We hebben n.l getracht om div fixed waarden om te zetten naar procentuele waarden. Ik wil het menu weer terug in het midden en de site hoeft niet responsive te zijn zodat hij normaal volledig te zien is op een mobiel, mensen kunnen dan zelf wel inzoomen. dat is dus alles maar ik zie door bomen bos niet meer. Heb met element controle getracht om het te vinden en vindt wel iets met float left etc. maar als ik dit center dan gebeurd er niets op de desktop. Ook de plugin voor mobiele sites werkt niet ok dus die staat nu gedeactiveerd. Als we deze activeren vallen pagina's naast het scherm en kunnen dat gedeelte helemaal niet zien ook niet zoomen en of sliden.

Wie het weet is heel slim.

Het betreft http://www.radiopaloma.com/
 
Copy/paste deze viewport 'ns
Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
en kijk dan of de site zich responsive aanpast.
 
En verder is het maken van een responsive site niet zomaar gedaan met het toevoegen van een leuk CSS'je die je ergens gedownloadt hebt.

Je zult deze ook moeten aansluiten aan je HTML-code.
 
Grinnik, de eerste paar regels in de responsive css
Code:
.responsive body
{
   min-width: 480px;
}
Vertaald: op een smartphone zal je altijd moeten schuiven :) Verder heb ik niet gekeken omdat het geen reponsive theme is.
Wederom een theme bouwer die 'responsive' claimed maar niet weet hoe en wat, helaas.
 
We willen dat wel proberen met viewport maar waar zet ik dat. Het responsive.css is trouwens met aristeer gemaakt. Eventueel mag de site ook onresponsive worden maar ik durf dat .css niet weg te halen omdat er in het reguliere css ook regels staan die er mee te maken hebben
 
Het is een meta-tag, dus in de head-sectie van je HTML.
 
RE: We willen dat wel proberen met viewport maar waar zet ik dat.
Dat heb ik even geprobeerd zonder succes. Het is dus niet de oplossing.

RE: Het responsive.css is trouwens met aristeer gemaakt
Dat zien we in de html : Created by Artisteer v4.0.0.58475

RE: Eventueel mag de site ook onresponsive worden maar ik durf dat .css niet weg te halen
Maak altijd eerst een backup van je stylesheets voordat je er dingen in gaat veranderen. Na de backup kun je de css uit style.responsive.css weghalen en dan kijken of alles in je website nog goed werkt.
 
Ik zie ook geen classes van .responsive uit je CSS terug komen in je HTML.
 
Ik zie ook geen classes van .responsive uit je CSS terug komen in je HTML.
Er zit ergens een UA sniffer #zie edit# script, ook hier weer... verre van responsive :rolleyes:

screenshot.jpg

Haha, de css is aangepast zie ik
Code:
.responsive body
{
   min-width: 320px;
}
Hiermee maak je meer kans op goede weergave op smartphone, maar hoe de rest van de css is heb ik niet bekeken.

**edit: het is geen UA sniffer maar een stukje JS/jQuery die de classes toevoegt aan de html tag
Code:
var responsiveDesign = {
    isResponsive: false,
    isDesktop: false,
    isTablet: false,
    isPhone: false,
    windowWidth: 0,
    responsive: function () {
        'use strict';
        var html = jQuery("html");
        this.windowWidth = jQuery(window).width();
        var triggerEvent = false;
        var isRespVisible = jQuery("#art-resp").is(":visible");
        if (isRespVisible && !this.isResponsive) {
            html.addClass("responsive").removeClass("desktop");
            this.isResponsive = true;
            this.isDesktop = false;
            triggerEvent = true;
        } else if (!isRespVisible && !this.isDesktop) {
            html.addClass("desktop").removeClass("responsive responsive-tablet responsive-phone");
            this.isResponsive = this.isTablet = this.isPhone = false;
            this.isDesktop = true;
            triggerEvent = true;
        }

        if (this.isResponsive) {
            if (jQuery("#art-resp-t").is(":visible") && !this.isTablet) {
                html.addClass("responsive-tablet").removeClass("responsive-phone");
                this.isTablet = true;
                this.isPhone = false;
                triggerEvent = true;
            } else if (jQuery("#art-resp-m").is(":visible") && !this.isPhone) {
                html.addClass("responsive-phone").removeClass("responsive-tablet");
                this.isTablet = false;
                this.isPhone = true;
                triggerEvent = true;
            }
        }

        if (triggerEvent) {
            jQuery(window).trigger("responsive", this);
        }

        jQuery(window).trigger("responsiveResize", this);
    },
    initialize: function () {
        "use strict";
        jQuery("<div id=\"art-resp\"><div id=\"art-resp-m\"></div><div id=\"art-resp-t\"></div></div>").appendTo("body");
        jQuery(window).resize(function () {
            responsiveDesign.responsive();
        });
        jQuery(window).trigger("resize");
    }
};
maar het blijft geen responsive design.
 
Laatst bewerkt:
Zelf adviseer ik voor goede flexibele RWD's (Responsive Webdesigns) altijd een goed grid-framework die je vanaf begin er in bouwt.
Mijn voorkeur gaat uit naar de Bootstrap.
 
Yep. Mee eens! Mijn websites bestaan uit een subset van Bootstrap. Html en css maak ik het liefst in Notepad++ maar voor javascript zou ik wel een eenvoudige ontwikkelomgeving willen hebben.
 
heb in de header de viewport regel aangepast hij stond op initial 1 en max ook 1 , dat is nu respectievelijk 1 en 2 . En bij de regel user scalable stond no , nu dus yes, en voila op phoon en tablet nu goed genoeg.
Ik ben maar een noob op dit gebied maar de rest weet nog minder en geld voor een extern iemand is er niet, we zijn maar een kleine lokale omroep.

Via deze weg allemaal bedankt voor het meedenken
 
@hithotline
Top gedaan :thumb: Succes met radio maken.

@php4u, @venga
Net heb ik Visual Studio Code gedownload. Deze VS versie (code editor) kende ik niet. Gratis, eenvoudig en krachtig. Geschikt voor het maken van web apps maar ook andere talen worden ondersteund. En er zitten handige debug en help tools in. Ook TypeScript zit er in waarmee je op "high level" de code kan schrijven die door de compiler cross-browser, cross-platform wordt gecompileerd naar Javascript. Het bekijken zeker waard.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan