Website mobile friendly maken

[Black Tiger]

Ik ben bezig een website mobiel friendly te maken.

Nu had ik een test gedaan en dan krijg ik het volgende te zien:

Mobile- and other Chrome-Checks​

	width	height
visual Viewport	396	716
content Size	850	1560

Fatal: Horizontal scrollbar detected. Content-size width is greater then visual Viewport width.

Hieruit blijkt dus dat er een horizontale scroll komt en dat content size te breed is waardoor er op mobiel ene horizontale scroll balk ontstaat. Het gaat hier volgens mij om de achtergrond afbeelding.

Nu weet ik wel dat je die horizontale balk kunt uitschakelen maar dan ziet die afbeelding niet uit.
Op dit moment heb ik deze instelling op de pagina staan, want het gaat om een gewone php site, geen CMS dus.

<meta name="viewport" content="width=device-width, initial-scale=1">

Schijnbaar helpt dit niet voor de afbeelding, schijnbaar niet voor de hele website, dus vermoedelijk staat er ergens anders nog iets verkeerd.
Hoe krijg ik dit gefixed?

 

[eendenteam]

ik feite wil je dus dat de website zich aanpast aan het scherm van de gebruiker. Dat wordt “responsive layout” of “responsive design” genoemd. Wellicht helpt een “Google” naar beide termen

 

[Black Tiger]

Dank, maar die termen zijn me al lang bekend. De site is ook responsive, maar dat helpt niet altijd bij mobiel.
Echter ik ben ook niet goed bekend met PHP. Ik dacht dat er hier op het forum ook wel iemand zat die aan webdesign deed of er iets van wist. Misschien @Maxstar? Anders ga ik eens elders proberen.

 

[Maxstar]

Als het enkel de background van de website betreft zou dit middels CSS te fixen moeten zijn. Zonder CSS zal het in de php-code een ander verhaal worden denk ik?

 /* Smaller than 600px: */
body {
  background-image: url('back_small.jpg');
}

/* 600px and larger: */
@media only screen and (min-width: 600px) {
  body {
    background-image: url('back_normals.jpg');
  }
}

 

[Black Tiger]

Ik heb wel CSS maar weet niet precies hoe ik dat moet doen. Op dit moment ziet dat er zo uit, naam van de afbeelding even aangepast.

html {
// background-color : #283CCD;
  background: url('../images/achtergrond.jpg') top left #f8f8f8;
            background-size: cover;
                background-attachment: fixed;
}
body {
font-family : Arial, Helvetica, sans-serif;
padding : 0;
margin : 50px;
font-size : small;
}
img {
border : none;
}

Dat heb ik volgens mij zo moeten doen om te zorgen dat hij op pagina's waarin de afbeelding op de voorgrond pastte de pagina niet verticaal ging scrollen en als de afbeelding op de voorgrond lange was, dat wel die voorgrond kon scrollen, maar de achtergrondafbeelding bleef staan.

Als ik me het goed herinner.

 

[Maxstar]

Kijk eens bij de volgende link, mogelijk is dit de oplossing voor het probleem.

Some mobile devices have a problem with background-attachment being fixed, so to fix this, you just need to use media queries to turn off the parallax effect for mobile devices by setting background-attachment to scroll.

Responsive Background Image Using CSS

Recently, I've been working on my portfolio (shameless plug 😅) and learning about how to make it more...

dev.to

 

[Black Tiger]

Ik begrijp daar geen bal van eerlijk gezegd. Nooit op toegelegd.

Moet dit er dan los staan of moet ik dit ergens bij zetten onder die html tag?

@media only screen and (max-device-width: 1366px) {
  .bg {
    background-attachment: scroll;
  }
}

En gaat dit er niet voor zorgen dat er op een pc opnieuw een verticale scrollbalk komt? Die device width lijkt me ook niet lekker.
Kan het wel eens proberen maar dan moet ik weten waar ik dit zetten moet.

 

[Maxstar]

Hoe zie de opmaak van de php-site er verder uit, dan maakt het een en ander wellicht wat duidelijker hoe je de stylesheet kan aanpassen.

Edit:
Mogelijk is dit de oplossing.

html {
 position: fixed;
 background-image: url('../images/achtergrond.jpg') top left #f8f8f8;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%:
 z-index: 0;
}

body {
font-family : Arial, Helvetica, sans-serif;
padding : 0;
margin : 50px;
font-size : small;
}
img {
border : none;
}

 

[Black Tiger]

De body en img tag is hetzelfde als bij mij dus daar hoeft niets aan veranderd te worden.

Ik heb even getest zoals jij het weer geeft, dan is er geen horizontale scrollbalk meer, maar op de mobiel resized er ook niets.
Andere pagina's zijn opeens heel klein. Weet niet zeker of dat voorheen ook zo was.

Ik geef je even een adres per pm dan kun je zien wat ik bedoel.

 

[Maxstar]

Ik geef je even een adres per pm dan kun je zien wat ik bedoel.

Top, want nu is het een beetje gokken hoe je de CSS moet vormgeven.

 

[Black Tiger]

Ja dat klopt, ik kan je ook de hele .css wel toesturen, er is nog een aparte site.webmanifest met deze content:

{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Ben vergeten waarom die er in moest. En het headerlogo heeft nog wat javascript.
Dus er is nog een slideshow.js aanwezig voor dat headerlogo. Via pm weet je de site dus zie je ook wel wat dat doet als het goed is.