Making my Website responsive (in any phone,desktops)

Question

I am new to HTML, CSS I am trying to create a website for my project however one of the requirements is it should be the responsive website. for some reason, my yellow box becomes smaller and smaller unlike my red and blue box which are big when I clicked smartphone to view, laptop view and different another view it just the yellow box became small and thin. I wanted o to ask for help or advice to make it a responsive website thank you

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="row">
    <div class="col-md-4" style="margin-left: 3%"  >
      <div class="color">Column 1</div>
      <div class="color" >Column 2</div>
    </div>
    <div class="col-md-8">Column 3</div>
  </div>
  <style type="text/css">
    .color:nth-child(1) {
    background:red; 
    height:40%;
    margin-top:5%;
    margin-left: 2%;
    border-radius: 4%;
    width: 100%;    
}
 .color:nth-child(2) {
    margin-top: 3%;
    border-radius: 4%;
    background:blue; height:260px;
} 
.col-md-8 {
    background:yellow; height:628px;
    width: 38%;
    margin-left: 15%;
    margin-top: 1%;
    border-radius: 9%;
}

  </style>

Why is this tagged Bootstrap 4? What exactly is the question/issue? — Carol Skelly, Aug 14 '18 at 12:57
Sorry my question is just only how to make it responsive in phone — lec, Aug 14 '18 at 13:00
If it's not responsive on phones, make sure you've included the meta viewport tag: https://stackoverflow.com/a/19158781/171456 — Carol Skelly, Aug 14 '18 at 13:02

score 0 · Answer 1 · answered Aug 14 '18 at 13:02

0

I dont know what kind of Website this is gonna be, but try "min-width" instead of the normal "width" in the yellow column

answered Aug 14 '18 at 13:02

Dogukan A

83
1
10

just add "min-" infornt of the width from yellow but im not sure if that is what you want like this: .col-md-8 { background:yellow; height:628px; min-width: 38%; margin-left: 15%; margin-top: 1%; border-radius: 9%; } – Dogukan A Aug 14 '18 at 13:49

score 0 · Answer 2 · answered Aug 14 '18 at 13:06

0

Both the red and blue are actually responsive but because they are set to 100% width it looks like they're not doing anything. Try setting their width to the same width as the yellow and you'll see they do work.

answered Aug 14 '18 at 13:06

sMiLEy sLOth

128
9

with the code you provided it does work. your .color:nth-child(1) has a width of 100%, change this to 50% and set a width of 50% to your .color:nth-child(2) – sMiLEy sLOth Aug 14 '18 at 13:16

score 0 · Answer 3 · answered Aug 14 '18 at 13:09

Short answer:

Everything works as expected, due to width:38% css property in col-md-8 override.

Long answer:

First option: What you would like to do is to create own separate classes so you don't override bootstrap classes directly

Second option: Bootstrap most probably has all the classes ready for your use-case so try not to write your own css at all and reuse utility classes from bootstrap, please see: https://getbootstrap.com/docs/4.0/layout/grid/

https://getbootstrap.com/docs/4.1/layout/utilities-for-layout/

https://getbootstrap.com/docs/4.1/utilities/spacing/

Please remember about proper html document layout, for your convenience here's bootstrap starter template:

https://getbootstrap.com/docs/4.0/getting-started/introduction/#starter-template

And to place css in apropriate places within the document: https://www.w3schools.com/css/css_howto.asp

score 0 · Answer 4 · answered Aug 14 '18 at 13:25

I advise going through the HTML and CSS courses on the following sites:

https://www.freecodecamp.org/ and https://www.codecademy.com/catalog/language/html-css

They're both free so familiarise yourself with basic HTML and CSS before using bootstrap. These courses also explain how to make a page responsive in the way you want and you'll gain more of an understanding of what you're trying to do and how to do it.

Making my Website responsive (in any phone,desktops)

4 Answers4