Kan min hjemmeside vises ordentligt på en mobil?

Lige udmiddelbart ser det fint ud via mobilen.

Det er godt, at du bruger WordPress, fordi det har mange temaer og plugins, der kan gøre din hjemmeside responsiv. Det betyder, at din hjemmeside automatisk tilpasser sig til forskellige skærmstørrelser og enheder.

Men du kan også gøre nogle ting selv for at forbedre din hjemmesides udseende og brugervenlighed på mobilen. Her er nogle tips:

Brug en zoom-faktor på 100% i din browser, så din hjemmeside ikke bliver for lille eller for stor på mobilen (1).
Brug flydende elementer i dit design, så de kan skifte størrelse og placering afhængigt af skærmen (1). For eksempel kan du bruge procentværdier i stedet for faste pixelværdier til at angive bredden og højden af dine elementer.
Optimer dine billeder, så de ikke er for store eller for tunge at indlæse på mobilen (1). Du kan bruge plugins som Smush eller EWWW Image Optimizer til at komprimere og ændre størrelsen på dine billeder automatisk.
Brug design-specifikke breakpoints til at ændre dit layout på forskellige skærmstørrelser (1). For eksempel kan du bruge media queries i CSS til at vise eller skjule visse elementer eller ændre deres stil på mobilen. Du kan også bruge plugins som Elementor eller Beaver Builder til at oprette forskellige versioner af dit design til forskellige enheder.
Brug responsiv menu, så dine besøgende nemt kan navigere på din hjemmeside på mobilen (1). Du kan bruge plugins som Responsive Menu eller WP Mobile Menu til at oprette en mobilvenlig menu, der kan foldes ud eller ind.
Du kan finde flere oplysninger om, hvordan du gør din WordPress-hjemmeside responsiv, i disse artikler:

How to Make A WordPress Site Mobile Responsive - WP Engine (1)
https://wpengine.com/resources/mobile-responsive-wordpress-sites/

Responsive Website Design: Tips for a Better User Experience - Go WordPress (2)
https://wordpress.com/go/web-design/responsive-website-design/

44 Best Responsive WordPress Themes (2023) - WPBeginner (3)
https://www.wpbeginner.com/showcase/best-responsive-wordpress-themes/

Responsive – WordPress theme | WordPress.org (4)
https://wordpress.org/themes/responsive/

Jeg håber, det hjælper dig med at gøre din hjemmeside mere mobilvenlig. Hvis du har flere spørgsmål, så tror jeg gerne andre kan bidrage noget bedre.👍 Jeg hopper af her 🙃

Megafedt, Jørgen. Tak for den store hjælp. Jeg dykker ned i det

Mvh Herman

Spugte for nyeligt en multimedia designer om han designede så det kunne bruges på alle mobiler. Han startede med at designe så det kunne gøre så på den mobil med mindste skærm og bevægede sig så opad mod telefoner med større skærme for tilsidst at designe så det kunne gøre sig på pc (hvad der heller ikke er entydigt)
I chrome på pc kan man vælge mobil - sikkert også i andre browsere.

Din hjemmeside er helt fin på mobil, dog med et par undtagelser, nævnes nederst.

Dit tema "Avia" er lavet så de 2 kolonner vises efter hinanden på mobil, det er fint. Blev de vist som 2 kolonner på mobil, ville det blive noget "gnideri", ikke alle har en storskærm på mobil, så det ville give helt andre problemer som tekststørrelse osv. osv.

Vedr. mobilvisning af forsiden kunne du med fordel gøre billedet mindre (kun på mobil), således at du får titlen med i første visning.

Det gør du ved at tilføje "Ekstra CSS" som dette:
---------------------------------------------
@media (max-width: 450px) {
.avia-slideshow li img {
    width: 70% !important;
  }
body .unit.alpha, body .units.alpha, body div .first {
padding-top: 0;}
ul.avia-slideshow-inner {
    height: 320px !important;
}
}
----------------------------
70% og de 320px, kan du så selv lege med ;-)

MEN du kunne også beskære billedet i toppen "Kappe vindues lysningen" lidt over dit hoved ...

Forøvrigt bør den viste CSS kun påvirke forsiden, så den skal være således istedet:
________________________________________
@media (max-width: 450px) {
.page-id-1246 .avia-slideshow li img {
    width: 70% !important;
  }
body .unit.alpha, body .units.alpha, body div .first {
padding-top: 0;}
ul.avia-slideshow-inner {
    height: 320px !important;
}
}
----------------------------
70% og de 320px, kan du stadigt selv lege med ;-)