[Wordpress] Verwijderen van responsive functie

[Chalk]

Hallo Tweakers,

Ik ben op zoek naar een manier om de responsive functie van mijn thema uit te schakelen.
Laat ik voorop stellen dat ik geen ervaring heb met HTML of CSS. Deze wordpress website is mijn eerste ervaring met het maken van een website. Veel heb ik dan ook gedaan door trial-and-error! Echter, ik ben er op het responsive gebeuren na helemaal blij mee.

Wat ik zelf al gedaan heb om tot een oplossing te komen:
- Verschillende topics in de wordpress support doorgespit, maar vaak zijn de topics toegespitst op één bepaald thema, en het thema dat ik gebruik heb ik nog niet terug kunnen vinden.
- Aan de hand van dit topic heb ik echter al enige vooruitgang geboekt.
- Ik heb aan de hand van dit topic de volgende code eruit gecomment:

code:

/*wp_enqueue_script( 'jquery.mobilemenu', get_template_directory_uri().'/js/jquery.mobilemenu.js',array('jquery'),"1.0.0",TRUE );*/
/*wp_enqueue_style( "bootstrap-responsive", get_template_directory_uri()."/css/bootstrap-responsive.min.css");*/

Het resultaat is de responsive functie niet meer start, echter kan ik aan de hand van dit topic niet vinden hoe ik ervoor moet zorgen dat de desktopnavigatie op mobiele schermen terug komt.


In het topic heeft de user "Phil" het over het volgende:

I also removed the mobile code where the html for the menu was, leaving just this:

code:

<nav  class="main-navigation" role="navigation">
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->

Maar hier komt ik niet echt verder mee aangezien hij het heeft over het verwijderen hiervan. Dus moet ik dit aanpassen? Het enige dat ik hiervan kan vinden in mijn thema is het volgende:

code:

<nav id="mainmenu">
                <?php wp_nav_menu( array('theme_location' => 'main-menu', 'container' => 'false','depth' => 3  )); ?>
            </nav>

Hopelijk kan iemand aan de hand hiervan mij in de goede richting sturen! Als er meer info/code benodigd is laat het me dan weten!
Alvast bedankt!

[TheNephilim]

Ik gok dat er in de header.php van je thema iets staat als:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Die moet je weghalen, inderdaad ook de responsive styles, dan zou je een heel eind moeten zijn.

[Barryvdh]

Is het mobile first? Dan moet je juist niet de media queries weghalen, maar zorgen dat ze altijd worden weergegeven..

[Chalk]

TheNephilim schreef op woensdag 04 december 2013 @ 13:25:
Ik gok dat er in de header.php van je thema iets staat als:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Die moet je weghalen, inderdaad ook de responsive styles, dan zou je een heel eind moeten zijn.

Na het weghalen van deze code verschijnt het menu inderdaad ook in de lagere resoluties!
Echter kom ik er net achter dat door de onderstaande code weg te laten de submenu's niet meer zichtbaar zijn.

code:

/*wp_enqueue_script( 'jquery.mobilemenu', get_template_directory_uri().'/js/jquery.mobilemenu.js',array('jquery'),"1.0.0",TRUE );*/
/*wp_enqueue_style( "bootstrap-responsive", get_template_directory_uri()."/css/bootstrap-responsive.min.css");*/

Bijvoorbeeld, onder diensten heb ik als submenu "werkzaamheden" en "werkwijze". Maar die dropdown laat zich niet zien als ik die code weghaal.

---

Barryvdh schreef op woensdag 04 december 2013 @ 13:46:
Is het mobile first? Dan moet je juist niet de media queries weghalen, maar zorgen dat ze altijd worden weergegeven..

Wat bedoel je precies met mobile first?

[ Voor 12% gewijzigd door Chalk op 04-12-2013 14:23 ]

[Barryvdh]

Nou, als je template 'desktop first' is, wil dat zeggen dat ze uitgaan van een breedte van (meestal) 960px en schrijven ze media queries zodat het ook werkt op mobiel/grote schermen.
Maar je kan ook 'mobile first' hebben, zodat je uitgaat van de laagste resolutie en dan aanpast voor grotere schermen. Desktop first is dus wat makkelijker aan te passen, aangezien je dan gewoon de mediaqueries weg kan halen, en eventueel een wrapper van 960px om je website heen zet.

[Chalk]

Ik denk dat het een 'desktop first' theme is. In de CSS vind ik in ieder geval het volgende terug:

code:

@media screen and (min-width : 0px) and (max-width : 600px)  {  

#sidebar .sidebar-box {
    padding:0;
}

nav#mainmenu {
    visibility:hidden;
    display:none;
}
.select-menu {
    display: inherit;
    visibility:inherit;
    width: 100%;
    height: auto;
    padding: 8px 10px;
    background: #fafafa;
    color: #333;
    font-family: "Abel", Times, serif; 
}

en ook:

code:

@media screen and (min-width : 0px) and (max-width : 479px)  {  

.pin-article h1.title {
    font-size:22px;
}
.pin-article .quote blockquote p {
    font-size: 16px;
}

Kun je hier iets mee?

[Urithar]

Je geeft aan veel via trial and error te hebben gedaan, in dat straatje past de volgende opmerking wel:
Kijk is wat er gebeurd als je
@media screen and (min-width : 0px) and (max-width : 600px)
veranderd naar iets van:
@media screen and (min-width : 0px) and (max-width : 10px)
en dan je scherm resized.

beetje een gokje na snel je post gelezen te hebben, misschien heb je er iets aan

[Chalk]

Urithar schreef op vrijdag 06 december 2013 @ 14:12:
Je geeft aan veel via trial and error te hebben gedaan, in dat straatje past de volgende opmerking wel:
Kijk is wat er gebeurd als je
@media screen and (min-width : 0px) and (max-width : 600px)
veranderd naar iets van:
@media screen and (min-width : 0px) and (max-width : 10px)
en dan je scherm resized.

beetje een gokje na snel je post gelezen te hebben, misschien heb je er iets aan

We komen er wel! Door het aanpassen van die waarden bleef het hoofdmenu + submenu dropdown inderdaad staan in de lagere resoluties. En door het weglaten van

code:

wp_enqueue_style( "bootstrap-responsive", get_template_directory_uri()."/css/bootstrap-responsive.min.css");

kon ik voorkomen dat de responsive functie inschakeld.

Rest er nog één fix; de footer schaalt niet mee. Ofja, hij schaalt wel mee maar hij vult niet uit tot het einde aan de rechterkant.


Hiervoor heb ik al gezocht in de "footer.php" en de "stylesheet.css" maar daar kom ik niet echt verder mee. Ik zie zelf in ieder geval geen waarden waar ik aan kan sleutelen, maar dat ligt meer bij mij denk ik
Iemand suggesties?

[Urithar]

Als je uitzoekt hoe breed je footer maximaal is (firebug / developer tools Chrome etc)
en zoekt in je CSS op iets van: Max-width: ****px; of Width: ****px;
onder footer oid dan kan ik me voorstellen dat dat de boosdoener is.
Tenzij je footer natuurlijk eerst wel schaalde en nu niet meer, dan heb je eerder iets verkeerds aangepast

[Chalk]

Urithar schreef op dinsdag 10 december 2013 @ 10:43:
Als je uitzoekt hoe breed je footer maximaal is (firebug / developer tools Chrome etc)
en zoekt in je CSS op iets van: Max-width: ****px; of Width: ****px;
onder footer oid dan kan ik me voorstellen dat dat de boosdoener is.
Tenzij je footer natuurlijk eerst wel schaalde en nu niet meer, dan heb je eerder iets verkeerds aangepast

Ik kan niks vinden van een gespecificeerde width die gekoppeld is aan de footer. Wel vond ik dit:

code:

#footer{ 
    margin-top:25px;
}
.pin-article article.article 
{ 
    padding:20px;
}

.wp-caption { width:100% !important; }
.wp-caption img { margin: auto }

[Rekcor]

@TS: Ik probeerde vanochtend in het donker (want mijn vrouw sliep nog) iets te zoeken in onze klerenkast. Met als gevolg dat die nu een puinhoop is, mijn vrouw wakker werd van een naar beneden vallende make-up doos en ik nog steeds niet vond wat ik wilde hebben.

Laat ik voorop stellen dat ik geen ervaring heb met HTML of CSS. Deze wordpress website is mijn eerste ervaring met het maken van een website.

Het kan natuurlijk dat het jou beter vergaat, maar het lijkt me effectiever om je eerst wat in te lezen.

[Chalk]

Rekcor schreef op donderdag 12 december 2013 @ 08:42:
@TS: Ik probeerde vanochtend in het donker (want mijn vrouw sliep nog) iets te zoeken in onze klerenkast. Met als gevolg dat die nu een puinhoop is, mijn vrouw wakker werd van een naar beneden vallende make-up doos en ik nog steeds niet vond wat ik wilde hebben.


[...]


Het kan natuurlijk dat het jou beter vergaat, maar het lijkt me effectiever om je eerst wat in te lezen.

Goede tip, echter ga ik niet een hele html/css cursus volgen om één onderdeel naar mijn hand te zetten. En al doende leert men toch?

[Urithar]

Volgens mij mis je het punt wat gemaakt wordt. Al wil je 1 onderdeel aan passen, als je niet weet waar, hoe en wat je moet zoeken gaat dat niet lukken. Zoals eerder aangegeven kan je met bv firebug uitzoeken waar de breedte beperking zich bevind. Dan is kennis van HTML/CSS niet alleen relevant maar simpelweg noodzakelijk.

Als je niet bereid bent om je in te lezen maar verwacht dat mensen je kant en klare antwoorden geven, zoals ook al een beetje uit je post-geschiedenis blijkt dan is V&A misschien een manier om iemand te vinden die je hiermee wilt helpen?