Avatar billede Helbo-DK Juniormester
18. juni 2014 - 23:32 Der er 5 kommentarer og
1 løsning

CSS responsive til webshop

Hej Eksperter

Sidder og assisterer lidt på http://smoke-it.dk, men der er nogle problemer, som jeg ville høre om der var en som kunne hjælpe mig med at løse.

#1 - Footer
I bunden af siden findes footeren. Den indeholder 4 bokse, som hver har en bredde på 25%. Selve footeren er 1170px i stylesheet. Når man anvender siden på fx ipad, iphone, android osv. så er footeren meget bred, i forhold til resten af indholdet.
Er der en som kan guide mig til, hvilke css-koder jeg skal indsætte?

#2 - Søgefelt i toppen
I toppen er der et søgefelt. Dette ser ikke godt ud på mobile enheder, og skal derfor tilpasses ind, så den passer med placeringen af menubjælken.
Hvike koder skal jeg indsætte i CSS-filen, for at dette kan lade sig gøre?
Avatar billede keysersoze Guru
19. juni 2014 - 00:15 #1
28 javascript-filer, 28 css-filer, masser af 400 og 404 request og over 3,5MB filer til download - jeg tror der mangler lidt mere optimering end bare lidt responsivt. Det siger jeg ikke kun for at "drille" men fordi det er ret alvorligt både i forhold til seo og generel brugeroplevelse.

1) lofadvafooterfooter er sat til altid at være 1170px - fjern den Width og sæt i stedet class container ekstra på. De fire blocks i bunden fjerner du den hardcodede style på og så, når nu bootstrap alligevel er inde, benytter du passende classes herfra; http://getbootstrap.com/css/#grid

2) den kræver vist lidt større beslutninger end bare lidt css - mobilt ser den fin ud hos mig mens den fx på tablet landscape helt ødelægger menuen og måske bør placeret helt anderledes. Bruger http://lab.maltewassermann.com/viewport-resizer/ til at teste med og tag nogle beslutninger ud fra det.
Avatar billede Helbo-DK Juniormester
19. juni 2014 - 11:32 #2
#keysersoze
Jeg har nu fjernet width på 1170px, så footer nu fylder hele bunden (tester på http://smokeit.erpbasen.dk). Jeg har fjernet hardcoded 25% bredde i prestashops kontrolpanel på footer modulet.

Jeg kan dog ikke lige se, hvilke jeg skal bruge fra http://getbootstrap.com/css/#grid?
Avatar billede keysersoze Guru
19. juni 2014 - 11:44 #3
Husk alle detaljer - som skrevet så skal du sætte class container på også, ikke kun fjerne width.

Det du skal bruge fra bootstrap grid er deres klasser - se fx "Example: Mobile and desktop" hvormed du uden at skrive css selv men altså bare ved at sætte nogle klasser på kan styre hvor mange kolonner der skal vises i forskellige views.
Avatar billede Helbo-DK Juniormester
19. juni 2014 - 11:49 #4
Ok, så egentlig skal den i CSS se således ud?

#lofadvafooterfooter .container {]
Avatar billede keysersoze Guru
19. juni 2014 - 12:28 #5
nej - klasser er noget du sætter på dine html-elementer;

class="container"

elementet havde vist allerede en klasse i forvejen.
Avatar billede Helbo-DK Juniormester
19. juni 2014 - 12:41 #6
Arhh yes. Har nu indsat:

<div id="lofadvafooter{$pos}" class="container">

YES, det virker sku :D Takker Du får point.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Kurser inden for grundlæggende programmering

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester