Centreren slideshow

Status
Niet open voor verdere reacties.
damnsharp

damnsharp

Terugkerende gebruiker
Lid geworden
6 jan 2012
Berichten
1.394
Goedemorgen,
Bij een WP site heb ik een slideshow plug-in die ik niet gecentreerd op mobiel krijg.
Ik had via CSS code hem gecentreerd maar ik denk dat de plug-in de code verwerpt. Van allerlei code geprobeerd, dus wellicht doe ik iets niet goed ;-)

Dus graag hulp. ;)

Dit is de site.

Dit is de code die ik heb toegevoegd:
Code: 
.slideshow_container_style-light .slideshow_container {
    margin: 0 auto!important; /* This centers the slideshow, if the slideshow has a maximum width. */
}
'

oh... de slideshow in de balk onder de boek nu knop bedoel ik :)
 
Laatst bewerkt:
De 3 grote foto's die eronder staan zijn ook niet gecentreerd.
 
@bron je bedoeld de wandelarrangement foto's? M.i. zijn die wel gecentreerd :)
 
Je bedoeld de slideshow in de rechter widget?
Die staat redelijk gecentreerd.

Wat niet gecentreerd staat zijn de volgende dingen, zie plaatjes.

Als je de browser kleiner maakt (zoals ik doe en dat ooit lang geleden als tip van Bron heb meegekregen), dan kan je zien hoe het er allemaal voor staat, in verschillende maten. Omdat je de browser steeds smaller kan maken.
Dan zie je dus wat wel en niet gecentreerd staat.

ps. je hebt mij ooit goed geholpen met centreren van plaatjes, zie https://www.helpmij.nl/forum/showthread.php/952943-Website-ziet-er-niet-goed-uit-tablet
Kan jij dat zelf niet gebruiken nu?
 

Bijlagen

  • tegeltje5.jpg
    tegeltje5.jpg
    50 KB · Weergaven: 52
  • tegeltje6.jpg
    tegeltje6.jpg
    28,7 KB · Weergaven: 53
  • tegeltje7.jpg
    tegeltje7.jpg
    7 KB · Weergaven: 36
Laatst bewerkt:
@Femke dank je wel voor je bijdrage. Ik pas om te testen bij de slideshow eerst via bijvoorbeeld inspecteren van element het centreren aan; en zet die code dan in style.css.
Vaak gaat dat goed maar die mooie slideshow plug-in, ook al zet ik het op !important, overschrijft mijn instellingen.
 
Ik zie dat femke al wat dingen heeft aangegeven. Deze foto's bedoelde ik. Misschien een kwestie van width:100% maken

screenshot-01.jpg
 
Kan je hier eens naar kijken. Misschien op .slideshow_container een margin:auto zetten?
Code: 
.slideshow_container {
    width: 300px;
    height: 300px;

.slideshow_content {
    width: 300px;
    height: 300px;

.slideshow_view {
    width: 300px;
    height: 300px;

Of misschien elke widget centreren met
Code: 
#secondary .widget {
    margin: 1em auto;  /* er staat nu margin: 1em; */
}
 
Laatst bewerkt:
Dit werkt denk ik. Zet het vlak boven </head> of in de laatste stylesheet
Code: 
/* center slideshow */
.widget.SlideshowWidget .slideshow_container {
    margin-right: auto !important;
    margin-left: auto !important;
}
/* center aside images */
#secondary img.wandelimage {
    display: block;
    width: 300px;     /* smartphone */
    max-width: 100%;  /* alle schermen */
    height: auto;
    margin-right: auto;
    margin-left: auto;
}
 
Laatst bewerkt:
Noop, het is uitleg tussen /* ... */
Code: 
/* censter aside images */

Oops, het is /* center aside images */ (met dank aan femke)
 
Laatst bewerkt:
oh oké........hm.......wat is dan censter (als ik vragen mag)
 
Het is gebruikelijk om commentaar in het Engels in de code te zetten. Eigenlijk hoort alles in code in het Engels te zijn. Regelmatig zet ik commentaar op helpmij in het Nederlands, dat is afhankelijk van de vraag die een topic starter stelt. Bij damnsharp kan alles gerust in het Engels ;)

Over je vraag "center aside images".
Dit is een ingekort commentaar van "centreer alle <img> afbeeldingen die in het <aside> blok staan".

** hahaha, ik zie ineens de "s" in censter. Nu ik het teruglees zie ik wat je bedoel... :D :D
Het is intussen verbeterd.
 
Laatst bewerkt:
De meeste bugs zijn klein maar doen zich voor als groot :D

Software bugs: Telecommunications, January 2009
Google's search engine erroneously notified users that every website worldwide was potentially malicious, including its own. -- De officiële verklaring van google is dat het een menselijke fout was. Jaja, een programmeerfout is inderdaad een menselijke fout.
 
Laatst bewerkt:
bron zei:
Ik zie dat femke al wat dingen heeft aangegeven. Deze foto's bedoelde ik. Misschien een kwestie van width:100% maken
Klik om te vergroten...

Super @bron, dat heeft geholpen hierbij. Omdat ik hem op max-width 100% had dacht ik dat dit voldoende was.
Ga nu met de andere tips aan de slag.
 
bron zei:
Dit werkt denk ik. Zet het vlak boven </head> of in de laatste stylesheet
Code: 
/* center slideshow */
.widget.SlideshowWidget .slideshow_container {
    margin-right: auto !important;
    margin-left: auto !important;
}
/* center aside images */
#secondary img.wandelimage {
    display: block;
    width: 300px;     /* smartphone */
    max-width: 100%;  /* alle schermen */
    height: auto;
    margin-right: auto;
    margin-left: auto;
}
Klik om te vergroten...

Yes, deze deed het 'm! (de code erboven ook getest) Pfff.. wat kan zoiets lastig zijn :)
Super zeg dat het nu is opgelost!

Dank je wel @femke98 en @bron voor jullie bijdrages en hulp. :love:
 
** hahaha, ik zie ineens de "s" in censter. Nu ik het teruglees zie ik wat je bedoel...
Het is intussen verbeterd.
Klik om te vergroten...

hahahahahahahahahahahahaha!! En ik maar denken vanwege je antwoord, dat het een echt woord is.Natuurlijk weet ik wat center betekend hihihihi, maar censter? Nooit van gehoord!:p:p:p
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan