Website niet mooi op mobiel

[michael64142]

Hi,

Ik ben bewust van responsive, en wat het is etc. Echter weet ik niet hoe ik moet beginnen, omdat het op PC wel gewoon goed uitziet.
Het gaat om de website groenester.nl. De box 'Volgende wedstrijd' staat op PC naast de foto slider. Via mobiele staat deze bovenaan, en de sponsor logo's gaan eroverheen. Tevens is de groene rand van de foto slider op mobiel veel te groot.

Echter, omdat het op PC dus goed werkt, en dat ook zo moet blijven, weet ik niet hoe ik dit moet doen. Het 'Volgende wedstrijd' en de foto slider zijn custom made (zelf gemaakt). De rest is gewoon van het Wordpress thema, dat wel responsive is. Wat ik dus zelf maakte is niet responsive.

Op mobiel ziet het dus zo uit: http://www.viewlike.us/operator/#u=http://www.groenester.nl/|388|1322
De CSS is hier te vinden.

Het zou héél fijn zijn als iemand me hierbij kan helpen.

Alvast bedankt!

 

[femke98]

Als je een responsive thema hebt en je zet daar foto's in, dan moet dat thema dat gewoon oppikken.

Als het thema een foto slider aankan dan zou dat uit zichzelf responsive moeten worden.
Misschien toch een ander thema zoeken die responsieve is en een slider heeft? Er zijn duizenden thema's die je gratis kan gebruiken.

 

[michael64142]

Daar gaat het niet om. De foto slider is prima, alleen de rand (die ik zelf gemaakt heb in CSS) is bij de foto slider niet goed. Deze is veeeeeel te groot op mobiel.

De 'Volgende wedstrijd' box is ook zelf gemaakt, heb ik ook niet responsive gedaan omdat ik geen idee heb waar te beginnen. Zonder die box en de groene rand werkt het prima, maar ze (de voetbalclub) willen deze heel graag dus vandaar dat ik het niet weg kan laten.

 

[femke98]

dan zou je in de css de border van de slider moeten aanpassen.
Bij SLIDER STYLES zou je dat moeten zoeken en uitproberen.

Maar of dat gaat werken, geen idee.
Succes.

 

[damnsharp]

Hoi,
Waarom laat je niet bij mobiel die merken carousel weg?
Ik zou de volgende CSS aanpassingen voor mobiel doen.

/* volgende wedstrijd */
.bx-viewport {
    min-height: 13em;
}


/* merken carousel weg */
.lshowcase-wrap-carousel-0 {
display: none;
}


.grnbar {
    display: none;
}

.homeborder {
    min-height: 0;
}

Dan moet je nog wel e.e.a. doen met de .homeside box.

 

[Magneticweb]

Beste,

Hebt u geprobeerd om bootstrap toe te voegen?