-1

Can you say why do this code is not adapt to different mobile devices? I am HTML beginner and can not figure it out. I'm using Bootstrap 4 framework.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="xxxxx.css">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Gloria+Hallelujah|Indie+Flower" rel="stylesheet"> 

    <title>xxxxx</title>
  </head>
  <body>
  <div class = "container">
   <hr class = "spec-hr">
  <div class = "row justify-content-md-center">
    <div class = "col-md-6 text-left name">
  xxxxxx
  </div>
  <hr class = "spec-hr">
 </div>
  <div class="row justify-content-md-center intro">
    <div class="col-md-3 text-center">
      Photo
    </div>

    <div class="col-md-3 text-center">
      Kontakt<br>
      <p class = "email">xxxxx@gmail.com<br>
      mobile: xxxx<br>
      facebook: xxxxx</p>
    </div>
  </div>
  <hr class = "spec-hr">

  <!--Motto-->

  <div class="row justify-content-md-center motto">
    <div class="col-md-6 text-center">
      <p class="motto">Every day is a chance to get better<br></p>
       <p class = "podpis" >(Lukasz Fabianski, goalkeeper Sweansy City)</p>
    </div>
  </div>
  <hr class = "spec-hr">

  </div>
  </body>

 </html>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Mateusz1981
  • 1,817
  • 17
  • 33

3 Answers3

1

You use classes such as col-md-6 and col-md-3, these are for medium sized screens., for mobiles, you need classes such as col-6 and col-3. See here for examples and definitions

mast3rd3mon
  • 8,229
  • 2
  • 22
  • 46
  • The page will never be responsive without the correct meta tag! [Read the documentation](https://getbootstrap.com/docs/4.0/getting-started/introduction/#responsive-meta-tag) – Carol Skelly May 21 '18 at 09:26
  • however, if the correct classes arent used, you will never get the correct layout within the grid – mast3rd3mon May 21 '18 at 09:28
  • I have to test different options! Can I use something that will make the page flexible??? I mean that will look fine on screan, mobile, ipad, ect – Mateusz1981 May 21 '18 at 09:33
  • You don't need to specify `col-*` classes. If you for example use `col-md-*`, the grid will automatically collapse on smaller screens than medium. – Klooven May 21 '18 at 09:35
  • you can use something like `class="col-12 col-md-6"`, this will take up all the width on phones and small tablets, then on larger tablets and computer screens, it will only take up half the width – mast3rd3mon May 21 '18 at 09:35
  • @Klooven you do need to specify `col-*` classes else you can encounter weird behavior on smaller screen sizes – mast3rd3mon May 21 '18 at 09:36
  • 1
    `col-12 col-md-6` is completely same as `col-md-6` – Klooven May 21 '18 at 09:37
  • that was solely an example, the OP may want `col-8 col-md-6` – mast3rd3mon May 21 '18 at 09:37
  • 1
    The OP doesn't tell. I'm just assuming "responsive" means that the columns collapse on small screens for him. – Klooven May 21 '18 at 09:40
  • responsive could also mean resizing accordingly – mast3rd3mon May 21 '18 at 09:40
  • @mast3rd3mon - layout and responsiveness aren't the same thing. In some cases stacking the cols would be the desired responsive layout. As I said, it will never work on mobile devices w/o the correct meta tag. – Carol Skelly May 21 '18 at 09:49
  • @ZimSystem i know they arent the same, and i never said they were – mast3rd3mon May 21 '18 at 09:52
0

"Can you say why do this code is not adapt to different mobile devices?"

The meta tag is wrong. It should be:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

The page will never be responsive without the correct meta tag. Please read the documentation...

"To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>."


Also see:

Simple Bootstrap page is not responsive on the iPhone
Responsive website zoomed out to full width on mobile

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • the issue is that the column classes that are used are wrong for mobile devices, they are all for tablet sized screens – mast3rd3mon May 21 '18 at 09:22
  • 1
    @mast3rd3mon - The page will **never** be responsive without the correct meta tag! [Read the documentation](https://getbootstrap.com/docs/4.0/getting-started/introduction/#responsive-meta-tag) – Carol Skelly May 21 '18 at 09:26
-1

For design to be responsive for mobile devices, use bootstrap classes like col-xs-3, col-xs-6. "col-xs-*" is used to target mobile devices having width greater than 230 and less than 768. Also use @media screen {} to target specific style to specific width mobile device.

Ahmed Jahanzaib
  • 71
  • 1