Website hosten

  • Onderwerp starter Onderwerp starter heula
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
RE: Waarschijnlijk ligt het dan aan de resolutie van een beeldscherm en daar kan ik niets aan doen.
Het ligt niet aan de resolutie van de monitor, tablet of smartphone. De website bouwer bepaalt in de css op welke resoluties een pagina goed wordt weergegeven.

Helaas zit het probleempje er nog in. In de css die ik gaf heb ik de afmetingen van jouw website gebruikt. Ik heb niet uitgezocht waar de css in de stylesheet moet komen. Misschien moeten er op andere plekken ook nog wat dingen in de css worden aangepast, dat heb ik niet uitgezocht.

De theme van deze website heb ik van 0 af aan zelf gemaakt. Zet op je pc de browser breed en maak de browser steeds smaller (de breedte; niet de hoogte) dan zie je wat er gebeurt bij elke resolutie.

Misschien toch iets om uit te pluizen. Het zou niet passen bij het onderwerp van je website als op bepaalde apparaten (low-res tablets) de website niet goed wordt weergegeven.
 
Hm, ik wil niet veel zeggen hoor :o, maar als ik doe wat jij zegt en ik maak dus de browser (Firefox) steeds smaller met jouw website, krijg ik dit:

Outlook5.jpg

Je ziet dat het er niet goed uit ziet.
Dit is wel als ik aan de linkerkant mijn bladwijzers open heb staan, en die staan altijd open ;)

Mijn website in Chrome, zie mijn eerdere plaatje ziet er wel goed uit ;)
Daar staan geen bladwijzers open aan de linkerkant. Dus ja, ik zie niet wat daar niet goed aan is.

Outlook4.jpg

Ik laat het wel zo...ik hoor er verder niemand over.
Het theme is juist een responsive theme (het is een betaal theme geweest).
 
RE: Hm, ik wil niet veel zeggen hoor , maar als ik doe wat jij zegt en ik maak dus de browser (Firefox) steeds smaller met jouw website, krijg ik dit:
Klopt. Je hebt de view namelijk smaller gemaakt dan 320px. De laagste view resolutie, de smartphone, is 320px! Het heeft dus geen nut om een website voor lagere resoluties te maken. Je hebt in ieder geval door hoe je het kan testen voor verschillende resoluties; dan heb je bij je website het probleem van de rechter kolom kunnen vinden denk ik.

RE: Het theme is juist een responsive theme
Noop, het is geen responsive theme want responsive betekent juist dat het op alle apparaten zich goed aanpast.

Ik heb voor je gekeken hoe het bij jouw site opgelost kan worden. Daarvoor moet direct onder deze regel:
Code: 
<link rel='stylesheet' id='fancybox-css'  href='http://steunpunt-almere.nl/wp-content/plugins/fancybox-for-wordpress/fancybox/fancybox.css?ver=4.6.1' type='text/css' media='all' />
deze css worden gezet:
Code: 
/* low-res tablets met resolutie 768px t/m 979px */
@media (min-width: 768px) and (max-width: 979px) {
	/* container width zodat content en sidebar passen */
	#container {
		width: 740px;
	}
	/* content wat smaller */
	#content {
		width: 450px;
	}
	/* rechter kolom wat smaller */
	#sidebar-primary {
		width: 245px;
	}
	/* social en search positioneren */
	.header-right {
		padding: 0 10px 20px 0;
	}
}
/* in eerste instantie het mobile menu... */
.menu-secondary-container {
	display: none;
}
/* ...in plaats van het gewone menu */
.menu-secondary-responsive-container {
	display: block;
}
@media (min-width: 980px) {
	/* bij hi-res schermen vanaf 980px het gewone menu... */
	.menu-secondary-container {
		display: block;
	}
	/* ...in plaats van het mobile menu */
	.menu-secondary-responsive-container {
		display: none;
	}
}
Ik heb er commentaar bij gezet zodat je weet wat het doet. Bij mij werkt je website hiermee goed voor alle resoluties. Uiteraard ook weer vanaf 320px want dat is de laagst voorkomende resolutie. Klik even op de plaatjes dan zie je de verschillende breedtes ;)

almere-phone.png

almere-lo-res.png

almere-hi-res.png

Suc6.
 
Laatst bewerkt:
Hartelijk dank.
Kan alleen die regel nergens in vinden. Niet in de style, page, functions, niet in de header, nergens in. :confused:
zie hem wel in view-source.

ps. het theme is ooit aangekocht als zijnde responsive ;)
<div class='tt-form-element'><div class='tt-form-label'>Theme Features List</div>
<div class='tt-element-content'><p>
$themater_current_theme->Name comes with a bunch of special features!
<ul style='list-style: disc; padding-left: 25px;'>
<li>Featured Posts Slider</li>
<li>Responsive Design (Mobole Phone &amp; Tablet Friendly)</li>
<li>Page templates (Contact Form, Archives Page, Full Width Page, Sitemap)</li>
<li>WooCommerce Shopping Cart Support</li>
<li>7+ Custom Widgets</li>
</ul>
</p></div>
Klik om te vergroten...
Ik ga er dus van uit dat het een responsive theme is, en dat is het ook naar mijn mening.

Overigens van dezelfde maker als deze http://bouke-blog.nl

Edit 2: in Chrome zie ik echt niet wat er mis is. Ook niet nu ik de pagina vanaf 320px bekijk.
In FF is het naar mijn mening ook oké.

Outlook7.jpg

Heb overigens je code in Custom CSS gezet.
 

Bijlagen

  • Outlook6.jpg
    Outlook6.jpg
    96,2 KB · Weergaven: 42
Laatst bewerkt:
Als ik naar je home pagina ga en de html bekijk zie ik vanaf regel 55 dit
Code: 
<link rel='stylesheet' id='formidable-css'  href='http://steunpunt-almere.nl/wp-content/uploads/formidable/css/formidablepro.css?ver=1061110' type='text/css' media='all' />
<link rel='stylesheet' id='fancybox-css'  href='http://steunpunt-almere.nl/wp-content/plugins/fancybox-for-wordpress/fancybox/fancybox.css?ver=4.6.1' type='text/css' media='all' />
<!-- op deze plek moet de css komen (direct boven jquery.js) -->
<script type='text/javascript' src='http://steunpunt-almere.nl/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://steunpunt-almere.nl/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
Kun je hier iets mee?
 
Ja, dat schrijf ik toch, ik zie de regel staan in de view-source. .
Maar vind die regels nergens in de files in de DirectAdmin terug.
 
Die kunnen ook dynamisch via een WP-functie gegenereerd worden.

PS: De filemanager is geen volwaardige editor.
 
RE: van dezelfde maker als deze
Die theme is ook niet responsive, het ligt dus aan die maker van die theme. Er staat "Tablet Friendly"... dat kan je weghalen dus :eek:

RE: Ook niet nu ik de pagina vanaf 320px bekijk
Klopt: je site is responsive tussen 320 en 767, echter niet van 768 tot 979, maar gelukkig weer wel vanaf 980. Met de css van hierboven is de site in elk bereik responsive.

Ik begrijp dat je in de file manager van Direct Admin zoekt.
Zet de css van #23 hierboven dan eens helemaal onderaan in bestand /wp-content/themes/Creativex/style.css
Ik heb het niet getest maar zo op het eerste gezicht zou het kunnen werken.

@php4u
Yep. wat regeltjes erbij plakken via edit linkje gaat nog net.
 
Laatst bewerkt:
echter niet van 768 tot 979
Klik om te vergroten...
Zijn er veel apparaten met deze resolutie?

En het is dus nog niet goed begrijp ik ondanks dat ik het in de Custom CSS gezet heb.

Edit: heb het nu in de style.css gezet. Ben benieuwd. Als dit gewerkt heeft, zal ik de andere site ook aanpassen.
 
Laatst bewerkt:
Yeahhh. Het is nu in orde :thumb:
Bij de andere website(s) kan je het nu ook aanpassen.

RE: Zijn er veel apparaten met deze resolutie?
Dat doet er niet toe. Responsive is Responsive. Je weet niet hoeveel potentiele klanten het hebben laten afweten omdat zij op een goedkope tablet naar je website hebben gekeken. Als je websites voor anderen maakt dan is je eigen website bepalend voor de kwaliteit die je levert. Lees: je eigen websites moet op-en-top in orde zijn, op elk apparaat en in elke moderne browser.

Kijk de volgende keer ook eens naar Bootstrap responsive themes. (voorbeelden). Dan heb je meer zekerheid dat de theme beter repsonsive is.

Veel suc6 met je websites!
 
Laatst bewerkt:
Toch raar hè.
Je neemt een theme (betaald voor een aantal), het is responsive zegt men, dus je verwacht dat het zo is.
Als ik verder niemand erover hoor dat het niet goed eruit ziet, tja.
Ik heb de website al jaren, dus......
http://bouke-blog.bl bestaat ook al jaren en die wordt echt heel goed bekeken. Net zoals http://hsvnb.nl en http://vimebe.nl
Ik zal die dan ook aanpassen met je code.;)

Yeahhh. Het is nu in orde :thumb:
Klik om te vergroten...
Thanx voor je meedenken! Weer wat geleerd, hoewel ik zelf nooit heb gezien aangezien het in FF er goed uitziet.
IE heb ik gelukkig niet ;)
 
Nu ik langere tijd responsive websites maak valt het mij op dat er toch best wel wat van de zgn. responsive themes en add-ons niet 100% responsive zijn alhoewel ze dat wel claimen. Het lijkt wel alsof het is getest op een smartphone, tablet en pc die ze toevallig zelf hebben maar het niet echt universeel hebben gemaakt voor alle apparaten. Het is een gewoonte van mij geworden om bij mooie websites even m'n browser smaller te maken :) Daarom ben ik de eerste die het opviel denk ik.

bouke-blog.nl en vimebe.nl zijn niet volledig responsive; hsvnb.nl is wel responsive behalve menu. Maar je kunt zelf nu goed beoordelen waarmee je te maken hebt. Het onderwerp bepaalt of een website goed wordt bekeken, niet of het wel/niet responsive is.

RE: Thanx voor je meedenken!
Heel graag gedaan. We zijn er om mekaar te helpen, toch?

TS, we hebben je een beetje in de kou laten staan... sorry.
 
Laatst bewerkt:
Je bent een kei. bouke-blog.nl werkt. En trudyhekkert.nl ziet er bij mij ook prima uit.

De video op trudyhekkert.nl is niet responsive. Kijk even naar deze website die ik heb gemaakt en maak je browser smaller voor de responsive YouTube
Code: 
HTML
<p class="embed-16-9"><iframe src="https://www.youtube.com/embed/YOUTUBECODE" frameborder="0" width="560" height="315" allowfullscreen></iframe></p>

CSS
.embed-16-9, .embed-4-3 {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
}
.embed-16-9 {
	padding-bottom: 56.25% !important;
}
.embed-4-3 {
	padding-bottom: 75% !important;
}
.embed-16-9 > *, .embed-4-3 > * {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
De css komt uit Bootstrap. Je kunt de css voor 16:9 filmpjes of 4:3 filmpjes van YouTube gebruiken. Meestal werkt 16:9 goed.

Suc6.
 
Laatst bewerkt:
Het filmpje komt van YouTube met insluiten frame. (ze heeft die er zelf op gezet, ik doe alleen maar plug-ins en updates ;) )
Ik heb daar dus geen aandeel in gehad.

Ik zal eens kijken of het anders kan. Maar zoals gezegd, daar ga ik niet helemaal over bij deze website. ;)

<iframe width="500" height="281" src="https://www.youtube.com/embed/mWzmEd2JXVw" frameborder="0" allowfullscreen></iframe>
Klik om te vergroten...

Die is gebruikt zie ik.

Als ik die van jouw gebruik <p class="embed-16-9"><iframe src="https://www.youtube.com/embed/mWzmEd2JXVw" frameborder="0" width="560" height="315" allowfullscreen></iframe></p>
dan is het filmpje veel te groot ;)
Dus 560 x 315 klopt niet, daar heb ik 420x236 van gemaakt.
Ik neem aan dat ik die code daaronder weer bij de css moet zetten?
 
RE: de YouTube code voor insluiten frame
De code van de YouTube site is niet responsive, dat moet je dus zelf in de css doen. Zie css boven.

RE: Ik neem aan dat ik die code daaronder weer bij de css moet zetten?
Yep. de css komt idd in de stylesheet.

RE: Ik zal eens kijken of het anders kan
Sommige wysiwyg editors zoals TinyMce kunnen classes (in dit geval .embed-16-9) voor de gebruiker beschikbaar maken. Als de gebruiker dan op de iframe klikt dan kan hij/zij zelf de class toevoegen dan hoef jij het niet te doen.

RE: Als ik die code van jouw gebruik dan is het filmpje veel te groot
Het gaat om de verhouding. Je hebt width="500" height="281", dat is 16:9 (500 : 16 x 9 = 281). Dus 420x236 is ook goed. De afmeting mag je zelf bepalen. Omdat de iframe met deze css responsive is kan het zijn dat je bij een kleinere iframe de width in % moet opgeven:
<p class="embed-16-9" style="width: 80%;"><iframe .....></p>
 
Laatst bewerkt:
Gelukt!
Dank je wel, zo leer ik weer bij!!
En nooit meer aannemen dat responsive themes daadwerkelijk ook responsive zijn, maar zelf testen.
Dat is een hele goede les!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan