Fastnat i utvecklandet av responsiv design. HTML/CSS. Tips?

Permalänk
Medlem

Fastnat i utvecklandet av responsiv design. HTML/CSS. Tips?

Tjena!

Jag håller på och gör responsiv design till en webbplats jag har skapat. Jag har dock fastnat lite..

När jag i det minsta läget på den responsiva designen ska fixa navbaren så hamnar innehållet i main på menyn. Jag har försökt på flera olika sätt att inget ska överlappa navbaren när den är öppen men har fastnat.

Det måste ju alltså vara någonstans i CSS som jag ska ändra...

Här är min kod: https://jsfiddle.net/b56zaa5a/ .

Och det är som sagt i det responsiva läget (max 400px) som jag har problem.

Någon som kan ge tips på hur jag ska lösa detta?
Tack på förhand!

Permalänk
Medlem

Jag har ingen direkt lösning för detta men för framtida problem och övrig information kring responsiv design så kan du ju ta en titt på Bootstrap och dess dokumentation. https://www.w3schools.com/bootstrap/default.asp

Permalänk
Medlem

Tänker du att vi ska gissa oss till hur din källkod ser ut? Gör en jsfiddle eller liknande som illustrerar problemet.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
Medlem
Skrivet av LemonIllusion:

Tänker du att vi ska gissa oss till hur din källkod ser ut? Gör en jsfiddle eller liknande som illustrerar problemet.

Jag ber om ursäkt. Är ganska ny inom detta och just nu är det skolarbete jag håller på med. Hade t.ex. aldrig hört talas om jsfiddle men det verkar ju skitsmidigt.

Här är min kod: https://jsfiddle.net/b56zaa5a/ .

Och det är som sagt i det responsiva läget (max 400px) som jag har problem.

Permalänk
Medlem

Ta bort

@media (max-width: 400px) nav { height: 100px; }

Permalänk
Medlem
Skrivet av murre_:

Jag ber om ursäkt. Är ganska ny inom detta och just nu är det skolarbete jag håller på med. Hade t.ex. aldrig hört talas om jsfiddle men det verkar ju skitsmidigt.

Här är min kod: https://jsfiddle.net/b56zaa5a/ .

Och det är som sagt i det responsiva läget (max 400px) som jag har problem.

Med hjälp av webbläsarens utvecklarverktyg man snabbt skaffa sig en överblick av varför saker beter sig som de gör. I ditt fall är det ditt nav-elementet som fått en fast höjd på 100px. Då kommer den inte anpassa höjden efter innehållet och eftersom ul-elementet tar upp mer än 100px i höjdled hamnar det utanför naven och överlappar det som kommer efter. Låt bli att ändra höjden så kommer det fungera.

Visa signatur

Spela Swemantle! Du vet att du vill.

Ibland har jag fel, men då är det någon annans fel.

Permalänk
Medlem
Skrivet av LemonIllusion:

Med hjälp av webbläsarens utvecklarverktyg man snabbt skaffa sig en överblick av varför saker beter sig som de gör. I ditt fall är det ditt nav-elementet som fått en fast höjd på 100px. Då kommer den inte anpassa höjden efter innehållet och eftersom ul-elementet tar upp mer än 100px i höjdled hamnar det utanför naven och överlappar det som kommer efter. Låt bli att ändra höjden så kommer det fungera.
https://i.imgur.com/Vehk4kL.png

TACK!
Fick två riktigt bra tips i JSFiddle och webbläsaren utvecklarverktyg där med. Det kommer jag att ha stor nytta av framöver.

Fortsatt trevlig helg!

Permalänk

@murre_: Har du funderat på att använda dig utav css grid eller flexbox något? Grid framförallt gör det väldigt enkelt att designa responsiva webbsidor!

Permalänk
Medlem

Fick du till det? Kan annars rekommendera att kolla in den här SO-tråden: https://stackoverflow.com/a/32301823
Ett till tips är att köra bootstrap för responsiv design i framtiden.