Re: Responsive design?

From	Morten Bonderup <morten2good@gmail.com>
Newsgroups	dk.edb.internet.webdesign
Subject	Re: Responsive design?
Date	2019-06-04 20:33 +0200
Organization	Aioe.org NNTP Server
Message-ID	<qd6dhm$1sp1$1@gioia.aioe.org> (permalink)
References	<qd08d2$gmr$1@dont-email.me> <qd18eo$p0k$1@gioia.aioe.org> <qd539g$5p6$1@dont-email.me>

Show all headers | View raw

> Jeg vil gerne kvittere og sige tak, men er gået i spekulationsbox: Skal 
> eller skal jeg ikke kaste mig ud i at skræddersy noget i hånden, eller 
> skal jeg finde en skabelon der passer (nogenlunde) til mit formål?

Har du tiden og lysten, så vil jeg mene, at du ved at påtage dig opgaven 
med at skræddersy en løsning, vil få en relevant og værdsat kompetence 
inden for moderne web-design.

Du kan sikkert godt google dig til en skabelon som, med en let 
modificering, vil kunne opfylde dit mål om en responsiv produktside.

Jeg har ændret mit tidligere eksempel til at bruge grid. Jeg kan se at 
det er det som bruges på danacord. Håber det kan tjene til inspiration ;-)


-----------------------------------------------------------------

<!DOCTYPE html>
<html>

<head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Mortens min-width eksempel</title>


     <style>
         /* Centrerer indholdet */

	/* Mobilt CSS */

         .wrapper {
             display: grid;
             grid-template-columns: auto;
             grid-template-rows: auto;
             grid-template-areas:
                 "boks1"
                 "boks2"
                 "boks3";
             width: 700px;
             margin: 0 auto;
             border: 1px solid blue;
         }

         .boks1,
         .boks2 {
             margin-top: 15px;
             width: 340px;
             border: 1px solid red;
             margin-bottom: 15px;
         }

         .boks1 {
             grid-area: boks1;
         }

         .boks2 {
             grid-area: boks2;
             margin-left: 0;
         }

         .boks3 {
             grid-area: boks3;
             width: 100%;
             border: 1px solid cyan;
             margin-bottom: 15px;
         }

	/* iPad og større skærme */

         @media only screen and (min-width: 800px) {

             .wrapper {
                 grid-template-columns: auto auto;
                 grid-template-rows: auto;
                 grid-template-areas:
                     "boks1 boks2"
                     "boks3 boks3";
             }

             .boks2 {
                 margin-left: 15px;
             }

         }

     </style>

</head>

<body>
     <div class="wrapper">
         <div class="boks1">
             <h3>Boks 1</h3>
             <ul>
                 <li>Jens</li>
                 <li>Lise</li>
                 <li>Hans</li>
                 <li>Bente</li>
             </ul>
         </div>

         <div class="boks2">
             <h3>Boks 2</h3>
             <ul>
                 <li>Jens</li>
                 <li>Lise</li>
                 <li>Hans</li>
                 <li>Bente</li>
             </ul>
         </div>

         <div class="boks3">
             <h3>Boks 3</h3>
             <ul>
                 <li>Jens han sad på en knold og sang</li>
                 <li>Lise hun sad på en knold og sang</li>
                 <li>Hans han sad på en knold og sang</li>
                 <li>Bente hun sad på en knold og sang</li>
             </ul>
         </div>
     </div>
</body>

</html>


-- 
Med venlig hilsen
Morten Bonderup
http://www.mortenbonderup.eu

Back to dk.edb.internet.webdesign | Previous | Next — Previous in thread | Next in thread | Find similar

Thread

Responsive design? Kurt Hansen <kurt@invalid.dk> - 2019-06-02 12:28 +0200
  Re: Responsive design? Kim Ludvigsen <kim@kimsside.dk> - 2019-06-02 18:26 +0200
  Re: Responsive design? "Dennis Munding" <nospa@mplease.dk> - 2019-06-02 16:49 +0000
  Re: Responsive design? Morten Bonderup <morten2good@gmail.com> - 2019-06-02 21:35 +0200
    Re: Responsive design? Kurt Hansen <kurt@invalid.dk> - 2019-06-04 08:32 +0200
      Re: Responsive design? Morten Bonderup <morten2good@gmail.com> - 2019-06-04 20:33 +0200
        Re: Responsive design? "Dennis Munding" <nospa@mplease.dk> - 2019-06-05 03:49 +0000
          Re: Responsive design? Morten Bonderup <morten2good@gmail.com> - 2019-06-05 11:47 +0200
            Re: Responsive design? Kurt Hansen <kurt@invalid.dk> - 2019-06-05 12:36 +0200

csiph-web