Ondersteuning » Thema en CSS/opmaak » Blog responsive maken (smartphone portrait)

  • Opgelost Sasseke

    (@sasseke)


    Hoi mensen
    ik heb een goed werkende website gemaakt http://www.bienekebiensart.com/ alleen er is nog 1 dingetje: de blog (entry-meta) is niet responsive op een smartphone in portrait mode. Op landscape wel en ook op de tablet (portrait en landscape) en de pc. De post details van de blog posts zijn niet (geheel) zichtbaar op de smartphone in portrait mode.

    Dit is de CSS code m.b.t. entry-meta:

    .entry-meta{
        position: absolute;
        bottom: 0;
        width: 100%;
        background: #444;
        background: rgba(0, 0, 0, .5);
        padding: 15px;
    }
    
    .entry-meta a, .meta-info-comment{
    	color: #b0afaf;
    	font-size: 16px;
    	margin-right: 10px;
    }
    
    .entry-meta a .fa{
    	font-size: 14px;	
    }

    en

    .entry-header .entry-meta{
    	background: none;
        position: inherit;
        padding: 0;
        text-align: left;
    }
    
    .entry-header .entry-meta a, 
    .entry-header .meta-info-comment{
    	color: #b0afaf;
    }

    en dit heb ik toegevoegd als code:

    @media only screen and (max-width:250px){
    .entry-meta .posted-on .byline .meta-info-comment {
    margin-top: 60px;
    }
    }

    Ik heb het aantal pixels telkens veranderd (ook naar 200 gedaan) maar er lijkt niks te veranderen aan de positie van de blog post details (entry-meta). Ik wil (dus) dat deze geheel zichtbaar op de smartphone in portrait modus.

    Wie kan mij helpen?
    Groet
    Sasseke

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Geen idee wat nu precies het probleem is want als ik met mijn telefoon kijk dan zie ik alles duidelijk. En op deze website kan je in de vensters surfen dus kan je het ook zelf nakijken.

    Kijk alleen of je deze, http://www.bienekebiensart.com/wp-content/uploads/2016/12/cropped-cropped-banner-1.png, afbeelding kan aanpassen naar een achtergrondafbeelding want op die manier kan je verschillende maten inladen bij de beeldformaten. En in de mobiele weergave zou ik datzelfde blok niet zo hoog laten zijn. Dan zien ze eerder je foto en dat maakt nieuwsgierig.

    Nog 1 opmerking/vraag; Waarom een png als je geen transparantie hebt? Scheelt 89 kB om in te laden door de bezoeker terwijl die geen verschil ziet.

    Thread starter Sasseke

    (@sasseke)

    Hoi Arjan
    bedankt voor je antwoord.
    Middels de classes .entry-meta en .entry-header (in de media queries) heb ik de boel goed weten te krijgen.

    Bedankt voor de tip van de .png ik heb er een .jpg van gemaakt en die als banner ingesteld. Hoe minder kB hoe beter 🙂
    Nog een fijne dag!

    Topic is solved!

2 reacties aan het bekijken - 1 tot 2 (van in totaal 2)
  • Het onderwerp ‘Blog responsive maken (smartphone portrait)’ is gesloten voor nieuwe reacties.