Aanpassen weergave op mobiel

Status
Niet open voor verdere reacties.
R

rob1970

Gebruiker
Lid geworden
14 jan 2012
Berichten
296
De website van mijn klant is helemaal klaar en naar tevredenheid van de klant.

Er is 1 ding wat hij nog graag veranderd zou willen zien en ik krijg het niet voor elkaar.
Ben ook bang dat dit niet makkelijk zal zijn.

Het gaat over deze pagina: http://met-rob.com/d3signo2/basic.html

Als men de pagina op een computer bekijkt is deze prima.

Als men de pagina op een mobiel bekijkt is het in principe ook wel goed maar mijn klant zou graag het witte vlak boven de foto ook in het zwart willen hebben.

Niet op een computer maar alleen als men het bekijkt op een telefoon.

Schermafbeelding-2020-05-25-om-11.21.17.jpg
 
Laatst bewerkt:
Ik raad aan om je site even goed op te schonen. Ik krijg hier een melding van een Trojan Horse!
het kan zeker geen kwaad om een integrity toe te voegen aan je JS-files, met de juiste filehash. Als ze ergens gemanipuleerd zijn, en de hash is dus anders, dan weigert de browser ze in te laden.
 
Laatst bewerkt:
Ik heb geen idee wat een integrity is. Hetzelfde geldt voor filehash.

Misschien ligt het eraan dat ik op het domein waar de website nu even opstaat nog geen ssl certificaat heb?
 
Geen idee, maar mijn Malwarebytes zal niet zomaar alarm slaan.
Dat zal niet aan SSL liggen, anders had ik die al vaker horen schreeuwen.

Lees ook dit: https://developer.mozilla.org/nl/docs/Web/Security/Subresource_Integrity
Bij elke download van een JS-library file staat vaak een MD5-hash of filehash genoemd. Als je deze opneemt in je in je integrity attribute dan voorkom je dat je site malware uitvoert als dat in de JS-files staat. In dat geval is de hash (de vingerafdruk) namelijk veranderd.
 
Laatst bewerkt:
Er is veel "vervuiling" in de html (overbodige code en enkele foutjes)

Op smartphone kan je de achtergrond donker maken door dit onderaan in je stylesheet te zetten
Code: 
@media (max-width: 900px) {
    #page-title,
    .content-outer {
        background-color: #333;
    }
}

Er wordt in de html een 12 kolommen systeem gebruikt.
Doordat je elke tabel in 5/12 deel van de breedte zet komen de tabellen naast elkaar te staan. Hierdoor zijn de tabellen te breed op élk scherm. Tabellen mogen niet worden gebruikt om een indeling te maken, dit zal op smartphone nooit gaan werken. Wat je hieronder nu hebt werkt dus niet !!
Code: 
<div class="two columns"> <!-- 2/12 van totale breedte
    <h4>KLEUREN<br>
</div>
<div class="five columns"> <!-- 5/12 van totale breedte
    <table>
	<!-- 3 kolommen -->
    </table>
</div>
<div class="five columns"> <!-- 5/12 van totale breedte
    <table>
	<!-- 3 kolommen -->
    </table>
</div>
 
Laatst bewerkt:
Als ik die code gebruik dan wordt volgens mij de hele achtergrond #333.
En dat is niet de bedoeling. Het gaat alleen om dat bovenste kleine stukje.

En over die tabellen. Ik zal het wel niet goed uitleggen maar ga het toch proberen.
De tabellen staan in een "<div class="five columns">"
En in die "div" staat een tabel op width 100%
Volgens mij kan dat verder zonder problemen.
Ik weet niet of jij het al hebt bekeken op een telefoon maar bij mij zien die tabellen er prima uit. (zie screenshot)

Schermafbeelding 2020-05-25 om 16.35.30.png
 
Alvast over die <table> die eruit moet. De structuur hoort er zo uit te zien, je werkt met class="row" en met class="... columns"
Code: 
<div class="five columns">
  <div class="row">
    <div class="five columns">
      ...
    </div>
    <div class="two columns">
    </div>
    <div class="five columns">
      ...
    </div>
  </div>
  <div class="row">
    <div class="five columns">
      ...
    </div>
    <div class="two columns">
    </div>
    <div class="five columns">
      ...
    </div>
  </div>
</div>
Als je alles in een row optelt hoort het altijd 12 te zijn.
 
Laatst bewerkt:
Maar heb jij het al bekeken op een telefoon?
Er mankeert toch helemaal niks aan de weergave?
 
Haha, ik zie het niet op jouw telefoon. Maar het hoort op elke telefoon/tablet/laptop/desktop er goed uit te zien. Omdat de 12-grid (indeling met row en columns) een responsive structuur is zal het daarmee wel lukken zonder dat je alle telefoons die er bestaan hoeft te testen.

je werkt met class="row" en met class="... columns"
Klik om te vergroten...
Dit zijn de vervangers van <tr> (de row) en <td> (de column) en met one t/m twelve geef je de breedte van column aan.

Over de witruimte, bedoel je dit?
Code: 
@media (max-width: 900px) {
    #page-title img {
        vertical-align: middle;
    }
    #page-content {
        padding-top: 0;
    }
    .add-bottom {
        margin-bottom: 0 !important;
        height: 35px;
        background-color: #333;
    }
    /* hieronder: wit onder foto weghalen */
    .add-bottom + .row > div:first-child {
        padding-bottom: 10px;
    }
}

Die 35px is de hoogte van de "zwart ruimte".
Om de !important weg te krijgen moet ik teveel in de stylesheet duiken, dat is teveel tijd.

** edit: stukje css toegevoegd om wit onder foto weg te halen.
 
Laatst bewerkt:
Als ik die code gebruik dan wordt volgens mij de hele achtergrond #333.
En dat is niet de bedoeling. Het gaat alleen om dat bovenste kleine stukje.

En over die tabellen. Ik zal het wel niet goed uitleggen maar ga het toch proberen.
De tabellen staan in een "<div class="five columns">"
En in die "div" staat een tabel op width 100%
Volgens mij kan dat verder zonder problemen.
Ik weet niet of jij het al hebt bekeken op een telefoon maar bij mij zien die tabellen er prima uit. (zie screenshot)

Bekijk bijlage 348181
 
Het onderste deel is bij mij niet #333 maar gewoon wit

De 2e afbeelding is van een lo-res tablet.
 

Bijlagen

  • Clipboard01.jpg
    Clipboard01.jpg
    76,8 KB · Weergaven: 53
  • tablet-768.jpg
    tablet-768.jpg
    76,9 KB · Weergaven: 39
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan