Inlägg av twari

Av twari 2020-08-07 00:04

Permalänk

Skrivet av huttala:

My bad.

@media screen and (max-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

@media screen and (max-width: 720px) and (min-width: 481px) {
  body {
    background-color: yellow;
  }
}

@media screen and (max-width: 900px) and (min-width: 721px) {
  body {
    background-color: brown;
  }
}

Har ingen editor framför mig just nu, men nu borde det bli rätt. Den bakgrund du har satt som standard längst upp i din css är den som kommer bli när du går över 900px

Gå till inlägget

Oh nu fungerade det, nu ändras färgerna med när jag drar. Tusen tack. Nu kan jag nog knappa ihop något med det. Tusen tack för hjälpen!

Citera

Gå till inlägget

Mobilanpassa hemsida

Av twari 2020-08-06 23:34

Permalänk

Skrivet av TwentyØnePenguins:

Håller helt med, blir i slutändan så mycket enklare att jobba om du (TS) delar upp din kod. Även om det i det här fallet inte rör sig om särskilt mycket kommer det förr eller senare att märkas, trust me, det blir alltid superrörigt. Bättre då att dela upp i små men flera filer, översikten och tänkandet blir enormt mycket enklare, även om det inte verkar så först!

Gå till inlägget

Alltså ja, tack ni har rätt. Jag vet att man ska göra stilmall och bla bla bla.. Jag började det hela med en stilmall för längesedan. Sedan har den använts till att "träna" vidare längst med olika uppgifter jag haft. Så stilmallen var inte "up to date" så slutade med att jag för enkelhetens skulle plockade bort den och arbetade utifrån en intern mall istället. Jag VET att det inte är optimalt eller bästa sättet att göra det. Och i framtiden lovar jag er alla att jag ska arbeta på annat sätt. Men nu sitter jag här med en färdig hemsida som jag bara vill lämna ifrån mig så jag slipper tänka på det mer. Jag vill börja med nya uppgiften, där jag "börjar om på noll" och kan rätta "rätt".

Men det jag behöver just nu, är att få en lösning på att få till en någerlunda mobilanpassning på sidan. Det behöver inte vara det snyggaste eller renaste sättet i kodningen, jag vill bara gå vidare med livet, ungefär.

Citera

Gå till inlägget

Mobilanpassa hemsida

Av twari 2020-08-06 23:29

Permalänk

Skrivet av huttala:

testa släng in detta i din css:

@media screen and (max-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

@media screen and (max-width: 720px) {
  body {
    background-color: yellow;
  }
}

@media screen and (max-width: 900px) {
  body {
    background-color: brown;
  }
}

@media screen and (min-width: 901px) {
  body {
    background-color: white;
  }
}

Sen ändrar du storlek på viewporten genom att ta fram dev-tools i webläsaren och justera bredden.

Då borde bakgrunden ändra färger, och du ser därmed att det fungerar. När du vet att storleksanpassningen fungerar kan du börja slänga in justerad css för varje bredd.

Gå till inlägget

Tusen tack för hjälp
Har lagt in och när jag kollar i developern så blir det en röd/brun bakgrund. Men ingenting påverkas eller ändras av att jag ändrar i storlekarna på skärmen. Den fortsätter ha en röd/brun bakgrund och opassande storlek... :S

Citera

Gå till inlägget

Mobilanpassa hemsida

Av twari 2020-08-06 22:52

Permalänk

Skrivet av ChrisDev:

Posta koden här, lättare att se vad som kan vara fel då.

Gå till inlägget

La upp det här, dock utan någon form av @media nu för har tagit bort det (igen) för att hitta något annat ställe..
XXX är istället för hemsidans text, så inget att bry sig om.

Citera

Gå till inlägget

Mobilanpassa hemsida

Av twari 2020-08-06 22:50

Permalänk

@ChrisDev:

<!DOCTYPE html>
<html lang = "SV">
<head>
<meta charset="UTF-8">
<title> xxx </title>
<meta name="description" content="xxxxxxxx">
<meta name="robots" content="noinde, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">

#totalbox {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

header {
background-color: #c6ebd9;
font-family: "Times New Roman", Arial;
float: left;
width: 100%;
height: 170px;
text-align: center;
}

aside {
background-color: #d1e0e0;
width: 20%;
height: 550px;
float: left;
}

.round_corner {
border-radius: 100px;
}

section {
background: #d9f2e6;
overflow: scroll;
float: right;
width: 80%;
height:550px;
}

footer {
background-color: #D0F7DD;
height: 30px;
width: 100%;
clear: both;
}

p {
font-family: "Times New Roman", Arial;
}

ul {
margin: 1px;
color: black;
text-decoration: none;
}

#text {
width:80%;
margin: left;
padding: 30px;
}

</style>
</head>

Citera

Gå till inlägget

Mobilanpassa hemsida

Av twari 2020-08-06 22:48

Permalänk

Skrivet av ChrisDev:

@twari:

@media (max-width: 600px) {
klasser/regler....
}

Gå till inlägget

Vart placerar du det? Jag har provat att lägga det lite var som men trots det så verkar koden komma fram till mindre skärmar..

Citera

Gå till inlägget

Mobilanpassa hemsida

Av twari 2020-08-06 22:44

Permalänk

@adzer: Försökte mig på boots men känns allt för avancerat för mig att hänga med på för tillfället (framför allt efter ha slitit i ett dygn för att få något att fungera utan resutlat, då försvinner tålamodet haha )

Citera

Gå till inlägget

Mobilanpassa hemsida

Av twari 2020-08-06 22:43

Permalänk

@ChrisDev: När jag skriver det så fungerar det inte.. ingenting ändras när jag kollar via mobilen...

Citera

Gå till inlägget

Mobilanpassa hemsida

Av twari 2020-08-06 22:05

Permalänk

@ChrisDev: Ja den metataggen är med.
CSS skriver jag direkt i style, alltså inte en extern som jag länkar till.
Men får inte till hur jag skriva skriva i själva CSSdelen? Hur och vart formar jag det enklast?

Citera

Gå till inlägget

Mobilanpassa hemsida

Av twari 2020-08-06 21:58

Permalänk

Mobilanpassa hemsida

Har gjort en väldigt snabb och enkel hemsida åt en vän, var lat och gjorde den utan stilmallar, ansåg inte det vara behövligt då hemsidan enbart har 4 sidor totalt.
Men slog mig plötsligt att den inte är mobilanpassad vilket såklart är ett måste.
Har tyvärr inte kommit så långt i min undervisning att jag hanterar det kapitlet än och jag har försökt på alla sätt och vis att använda meta taggar och @media och allt jag kan komma på. Antingen så skriver jag ut de på fel ställen eller så felformulerar jag på något sätt.

Hur ska jag få hemsidan mobilanpassad på enklaste sätt?
Kan någon förklara?

Citera

Gå till inlägget

Inlägg

Mobilanpassa hemsida

Externa nyheter

Spelnyheter från FZ