Wordpress. Vissa element har flyttat sig?

Permalänk
Medlem

Wordpress. Vissa element har flyttat sig?

Har lite problem i Wordpress

Meny och nån typ av block har flyttat sig. Bifogar skärmdump på hur det ser ut. När man är inloggad å kan redigera ser allt okej ut. Är det marginalen för menyn som fått fnatt?

/Mathias

Permalänk
Skrivet av thias79:

Har lite problem i Wordpress

Meny och nån typ av block har flyttat sig. Bifogar skärmdump på hur det ser ut. När man är inloggad å kan redigera ser allt okej ut. Är det marginalen för menyn som fått fnatt?

/Mathias

<Uppladdad bildlänk>

Först ser jag att:

html, body{height: 100%;}

Sedan ser jag först att:

body{max-width:700px;}

När dessa inaktiveras inuti Inspect Element så försvinner problemet med de förflyttade elementen.

Samtidigt tror jag att tanken är att den vita bakgrundsfärgen ska vara intryckt så att en del av html:s gråa bakgrund syns?

Att då ge html{max-width:100%;} (och stryka height: 100%) och ge body{max-width:95%;} löser inte problemet med bildelementen som klipps längs raderna när webbfönstret förminskas.

Att bara ta bort {max-width: 700px;} för body-selektorn och {height: 100%;} för html- & body-selektorerna löser dock det problemet eftersom du då inte kan se att det klipper. Frågan är om det är den önskade designen eller om den gråa bakgrunden även ska synas på webbplatsens vänster- & högersidor?

EDIT: Några andra sidor verkar också ha samma problem med body{max-width:700px;}. Kan det vara något förinställt för responsiv design? Sidor med sidebar-element verkar ej ha problemet och där finns ingen CSS-regel max-width:700px; för body-selektorn.

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Permalänk
Medlem

När sidan är som den ska.

Så här ska sidan se ut.

Permalänk
Medlem
Skrivet av WebbkodsFrilansaren:

Först ser jag att:

html, body{height: 100%;}

Sedan ser jag först att:

body{max-width:700px;}

När dessa inaktiveras inuti Inspect Element så försvinner problemet med de förflyttade elementen.

Samtidigt tror jag att tanken är att den vita bakgrundsfärgen ska vara intryckt så att en del av html:s gråa bakgrund syns?

Att då ge html{max-width:100%;} (och stryka height: 100%) och ge body{max-width:95%;} löser inte problemet med bildelementen som klipps längs raderna när webbfönstret förminskas.

Att bara ta bort {max-width: 700px;} för body-selektorn och {height: 100%;} för html- & body-selektorerna löser dock det problemet eftersom du då inte kan se att det klipper. Frågan är om det är den önskade designen eller om den gråa bakgrunden även ska synas på webbplatsens vänster- & högersidor?

EDIT: Några andra sidor verkar också ha samma problem med body{max-width:700px;}. Kan det vara något förinställt för responsiv design? Sidor med sidebar-element verkar ej ha problemet och där finns ingen CSS-regel max-width:700px; för body-selektorn.

Vilken Detta skall alltså ligga i style.css? Under body taggen?

Permalänk
Skrivet av thias79:

Vilken Detta skall alltså ligga i style.css? Under body taggen?

Prova. Jag kan tänka mig att många olika .css-filer används samtidigt för CMS:et du kör med?

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Permalänk
Medlem
Skrivet av WebbkodsFrilansaren:

Prova. Jag kan tänka mig att många olika .css-filer används samtidigt för CMS:et du kör med?

Jag provade att lägga det i body {

Men gjorde nog något fel för den tar inte ändringen. När jag gör den i webbläsarens inspekterings läge så funkar det fint.

Kör med Wordpress och Child Tema

Permalänk
Skrivet av thias79:

Jag provade att lägga det i body {

Men gjorde nog något fel för den tar inte ändringen. När jag gör den i webbläsarens inspekterings läge så funkar det fint.

Kör med Wordpress och Child Tema

Det måste vara någon säkerhetsaspekt i WP antar jag då om den nekar din ändring.

Jag har inte pluggat CMS-webbutveckling så jag har ingen riktig koll på hur WP fungerar än så länge!

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Permalänk
Medlem

Vad jag kunde se på din hemsida så har du flera css-filer och flera ställen med samma css i. Det är inte lätt för någon utomstående att se var du ska ta bort max-width på body.

Permalänk
Medlem
Skrivet av Jaevel:

Vad jag kunde se på din hemsida så har du flera css-filer och flera ställen med samma css i. Det är inte lätt för någon utomstående att se var du ska ta bort max-width på body.

Löste det lade till följande kod.

body {
max-width: none !important;
height: none !important;

}

Permalänk
Skrivet av thias79:

Löste det lade till följande kod.

body {
max-width: none !important;
height: none !important;

}

Hoppas det löser problemet nu!

En intressant sak så här i efterhand är hur det kunde ha inträffat från första början? Fanns det något val någonstans i WP att slå på "responsiv design" så den fick för sig att köra "Mobile First" och därmed satte en mobilvänlig maxbredd?

Visa signatur

(V)ulnerabilities
(I)n
(B)asically
(E)verything
Programming

Permalänk
Medlem
Skrivet av thias79:

Löste det lade till följande kod.

body {
max-width: none !important;
height: none !important;

}

Du använder !important för att du har css som skriver över varandra. Jag ser att du regelbundet postar css-relaterade frågor kring märkligt beteende. Jag skulle tro att ditt nyttjande av !important, position absolute och relative samt att du generellt inte verkar ha stenkoll på hur css-regler fungerar innebär att du får massvis med att du ändrar på ett ställe och får ändringar på ett annat ställe.

När du bestämde att max-width none skall gälla så kan det eventuellt förstöra exempelvis din meny som du hade problem med i din andra nystartade tråd.

Jag kan varmt rekommendera dig att lära dig hur man normalt arbetar med css, exempelvis genom w3schools:
https://www.w3schools.com/css/default.asp