Site is niet geheel responsive

  • Jelle_letterpress

    (@jelle_letterpress)


    9 jaren, 5 maanden geleden

    Beste lezer(s),

    Al een tijdje werk ik aan een digitaal portfolio (http://www.lautje-letterpress.nl). Het lukt op zich aardig maar ik loop tegen wat problemen op. Ik heb een responsive template (Infinity) gekocht bij Theme Trust.

    De template werkt over het geheel prima. M’n portfolio ziet er alleen op een telefoon of tablet niet zo uit als ik graag zou willen. Links staat het logo, het menu en daaronder de meeste recente posts. Boven staan de verschillende technieken. Dit gedeelte komt door elkaar te staan als je het scherm kleiner maakt of een een telefoon of tablet bekijkt. Ik heb al het een en ander geprobeerd met een aangepaste CSS code. Maar het geeft niet het gewenste resultaat.

    Misschien weet iemand me weer op weg te helpen?
    Alvast super-bedankt.

    Groet,
    Jelle

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • matt10

    (@matt10)

    9 jaren, 5 maanden geleden

    Hoi,
    Het thema lijkt te werken zoals bedoeld.

    De menus komen niet door elkaar te staan maar te dicht achter elkaar. Daardoor wordt het inderdaad een beetje warrig.

    Misschien kun je een dropdown menu maken van het Top-menu.
    De gebruiker zal er dan makkelijker uit komen.

    Thread starter Jelle_letterpress

    (@jelle_letterpress)

    9 jaren, 5 maanden geleden

    Bedankt voor je bericht.
    Via welke weg maak ik zo’n dropdown menu?

    matt10

    (@matt10)

    9 jaren, 5 maanden geleden

    Via media queries in css.

    Bijv.:
    @media screen and (max-width: 700px) {

    #content #filterNav {
    margin-bottom: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 100px;
    padding: 0 !important;
    }

    #filterNav li {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    xfloat: left;
    margin: 0 4px 5px 0;
    padding: 1px 0 0;
    }
    }

    Als je dat plakt onderaan je .css file wordt het al iets anders.
    Een menu aanpassen kost vaak wel even. Je kunt me eventueel mailen. (mheeren55@hotmail.com)
    Succes!

    Thread starter Jelle_letterpress

    (@jelle_letterpress)

    9 jaren, 5 maanden geleden

    Erg bedankt voor de tip.
    Ik ga hiermee aan de slag.
    Uiteraard laat ik van me horen als ik vast loop of als het gelukt is natuurlijk:)

    Thread starter Jelle_letterpress

    (@jelle_letterpress)

    9 jaren, 5 maanden geleden

    Beste matt10,

    Deze onderstaande CSS heb ik gevonden in de template, heb met verschillende waarden getest maar nog niet echt verder gekomen. Ben erachter dat je hiermee ook onderdelen uit kunt zetten als je overgaat van landscape naar portrait mode. Het mooiste zou zijn dat alles zichtbaar is. Zo’n dropdown menu zou super zijn :).

    Bedankt voor je tijd.
    Groet, Jelle

    /* iPad Landscape */

    @media only screen and (max-width: 1024px) {
    #main, #header .inside {max-width: 64.5em;}
    #header { width: 21%; }
    .skillList li span a{
    padding: 10px 6px 10px !important;
    }
    }

    /* iPad Portrait */

    @media only screen and (max-width: 768px) {

    #header {
    text-align: center;
    float: none;
    position: relative;
    margin: 0px;
    width: 94%;
    padding: 0px 0 0px 0;
    }

    #header #logo {
    margin: 0px;
    width: 100px;
    }

    #header #logo img{
    max-width: 100%;
    height: auto;
    }

    #header #sideWidgets{
    margin: 0px;
    }

    #mainNav{
    right: 20px;
    position:absolute; top:50%; height:20px; margin-top:-10px;
    }

    #mainNav li{
    margin: 0 0 0 1.5em;
    display: inline-block;
    padding: 0;
    }

    #main {
    width: 94%;
    margin: 0 auto 30px auto;
    padding-top: 0;
    float: none;
    }

    #homeMessage p {
    font-size: 1.0em!important;
    }

    .sidebarBox {
    float: left;
    margin: 0 3% 30px 0;
    }

    #homeMessage p{
    font-size: 2.7em !important;
    }

    #projects {
    margin-left: 15px;
    }

    .flex-direction-nav {display: none !important;}

    #comments { width: 100%;}

    #footer {
    width: 94%;
    float: none;
    margin: 0 0 30px 25px;
    }

    }

    /*layouts smaller than 600px, iPhone and mobiles*/
    @media only screen and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {

    html {
    -webkit-text-size-adjust: none;
    }

    h1 { font-size: 1.2em;}
    h2 { font-size: 1.1em;}
    h3 { font-size: 1.0em;}
    h4 { font-size: .9em;}
    h5 { font-size: .8em;}

    #header {
    text-align: center;
    width: 99%;
    padding-bottom: 15px;
    margin: 0px;
    position: relative;
    }

    #header #logo {
    text-align: center;
    float: none;
    width: 60px;
    margin: 15px;
    }

    #pageHead h1 { font-size: 1.0em;}
    #pageHead {
    padding: 10px 0 20px 0;
    }

    #homeMessage{
    font-size: .5em;
    margin-bottom: 20px;
    }

    #homeMessage p {
    text-align: center;
    }

    #main {
    width: 94%;

    padding-top: 5px;
    }

    #mainNav {
    position: relative;
    margin-top: 0;
    top:0;
    right: 0;
    width: 100%;
    margin: 0 0 5px 0;
    display: block;
    }

    #mainNav li{
    margin: 0 0 0 0;
    display: inline-block;
    padding: 0 5px 0 5px;
    }

    #content .post {
    margin-bottom: 20px;
    padding-bottom: 0!important;
    }

    #projects {
    margin-left: 15px;
    }

    #footer {
    width: 92%;
    margin: 0 auto 0 auto;
    }

    #footer .widgetBox {
    width: 100%;
    float: none;
    margin-bottom: 20px;
    }

    #footer #flickrBox .flickrImage {
    margin: 0 5px 5px 0;
    }

    #footer .secondary {
    width: 100%;
    padding-bottom: 10px;
    text-align: center;
    }

    #footer .secondary p{
    margin: 0px;
    padding: 0px;
    }

    #footer .secondary .left,
    #footer .secondary .right{
    float: none;
    padding-bottom: 10px;
    }

    #commentForm input[type=”text”], #comments input[type=”text”] {
    width: 40% !important;
    margin-right: 5px !important;
    }

    #commentForm label, #comments label {
    font-size: .8em;
    }

    Thread starter Jelle_letterpress

    (@jelle_letterpress)

    9 jaren, 5 maanden geleden

    Heeft iemand misschien een idee hoe ik dit kan oplossen?

6 reacties aan het bekijken - 1 tot 6 (van in totaal 6)
  • Het onderwerp ‘Site is niet geheel responsive’ is gesloten voor nieuwe reacties.