Question 252656 in Html Question posted in
Some basic documentation can be found here.

Html/Css desktop to mobile view

I am new to programming. I wrote code that looks fine on desktop but not on mobile.Does anyone have any sugesstions?

    <style>
       body{
        margin: 0;
       }

       .container {
        width: 100vw;
        height: 100vh;
        font-family: 'Quicksand',sans-serif;
        font-weight: bold;
        font-size: 20px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        box-sizing: border-box;
       }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="content-large"><img src="images/tribe-wanderer.png" style="margin-left: 390px; width: 35px; margin-top: 150px;"></div>
    <div>
    <div class="content-large" style="font-size: 40px; margin-top: 150px;">Wanderer</div>
    <p style="font-size: 12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor   incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,<br>  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
    </div>
    <div class="content-large"><img src="images/IMG_5499.jpg" style="width: 400px; padding-top: 100px; padding-left: 50px;"></div>
    </div>
    </body>
    </html>
Tags:

2

Answers


  1. 0

    I recommend doing mobile first design. This is when you write your code for mobile devices and then use media queries to design for tablet and desktop. Here’s an example of a media querie:

    @media only screen and (min-width: 576px) {
// apply the styles here from this minimum width of 
// 576px (medium screen sized devices)}
    Login or Signup to reply.
  2. 0

    in the header add the viewport meta tag like this

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

    and learn about screen media in css, so you can create custom displays on mobile

           @media screen and (max-width: 768px) {
      .container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
      }

    and learn more about grid-template-columns because it affects the screen fit you want

    grid-template-columns

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search