Social buttons op mobiele site verkeerd uitgelijnd.

  • Opgelost SterBraak

    (@sterbraak)


    11 jaren, 10 maanden geleden

    Beste leden,

    Ik ben bezig met de website van mijn buurman: ch*ill4*u.nl (zonder *)
    Op de gebruikte theme i-transform zaten geen mooie (klein en onduidelijke) social buttons.
    De huidige buttons heb ik daarom zelf gemaakt en geplaatst.
    Maar nu wil het feit dat deze op een desktop versie netjes gecentreerd naast elkaar staan. Maar op de mobiele versie staan deze onder elkaar.
    Dit is vervelend omdat (door de meescrollende menu) de tekst niet meer leesbaar is.

    Heeft iemand een idee hoe ik deze ook mobiel naast elkaar krijg?
    Hier de CSS:

    .social { list-style:none; margin:0px 220px 0px 0px;}
.social li { display:inline; float:right; margin:20px 3px 0px;}
.social li a { display:block; width:48px; height:48px; position:relative; }

li.youtube { background-image:url("http://www.ch*ill4*u.nl/wp-content/themes/i-transform/images/youtube-48x48.png"); }
li.google { background-image:url("http://www.ch*ill4*u.nl/wp-content/themes/i-transform/images/google+-48x48.png"); }
li.facebook { background-image:url("http://www.ch*ill4*u.nl/wp-content/themes/i-transform/images/facebook-48x48.png"); }

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • LianneL

    (@liannel)

    11 jaren, 10 maanden geleden

    Je zult hiervoor een mediaquerie moeten inzetten. Dit doe je het beste onderin je css-document. Ik denk dat de margins dwars zitten; je zult het aantal px moeten reduceren. En misschien is het beter om een float: left; te geven aan .social li.
    @media only screen and (max-width: 767px): betekent: pas deze css toe, als het scherm smaller dan 767px is (=smaller dan iPad staand). Misschien wil je een andere breedte inzetten als grens: hierin ben je vrij!

    @media only screen and (max-width: 767px) {
  .social { list-style:none; margin:0px 220px0px 0px;}
  .social li { display:inline; float:right; margin:20px 3px 0px;}
}

    groet,
    Lianne

    Thread starter SterBraak

    (@sterbraak)

    11 jaren, 10 maanden geleden

    Hey Lianne,

    Bedankt voor je reactie, Ik had het probleem net gevonden.
    Ik had geen width mee gegeven..

    Ik heb nu dit (en het is opgelost):

    .social { list-style:none; width:300px; margin: 0 0 20px 0; float: left;}
.social li { display:inline; float:right; margin:20px 3px 0px; width:49px;}
.social li a { display:block; width:48px; height:48px; position: relative;}

    Toch bedankt! xx

    LianneL

    (@liannel)

    11 jaren, 10 maanden geleden

    Ja, ik zie je oplossing, die enorm marges waren ook raar en onnodig.

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)

Het onderwerp ‘Social buttons op mobiele site verkeerd uitgelijnd.’ is gesloten voor nieuwe reacties.