Html structure Not working on different devices

Question

I am new to the web-Development. Here, I am trying to develop,

This is a modal body. So, what I did is

<div className="row modalRowMargin textStyle" >
              <div className="col-1 col-md-1 border border-primary text-vertical-center" >
                <h5 className="textStyleOfQuestionLabel">Q{props.questionNo} </h5>
              </div >

              <div className="col-11 col-md-11 border" >
                < textarea className="form-control textarea border-0" style={{ resize: 'none' }} onChange={(e) => { props.onChangeQuestion(e, "question") }} > </textarea>
              </div >
            </div>

            <div className="row modalRowMargin rowTopMargin" >
              <div >
                <span >
                  Answer Choice </span> </div > </div>

            <div className="row modalRowMargin rowTopMargin " >
              <div className="col-6 col-md-6" >

                <div className="row " >

                  <div className="col-2  border border-primary text-vertical-center"
                    style={{ borderColor: props.setDefaultColor(0), color: props.setDefaultColor(0) }} >

                    <h6 className="textStyleOfLabel">A </h6>
                  </div > <div className="col-7  border"
                    style={
                      { background: props.setDefaultColor(0) }
                    } >

                    < textarea class="form-control  border-0" onChange={
                      (e) => { props.onChangeQuestion(e, "opt1") }
                    }
                      style={
                        { background: props.setDefaultColor(0), resize: 'none' }
                      } > </textarea>
                  </div>
                  <div className="col-3 ">
                    <span > Correct </span>
                    <label className="row containerOfcustomCheckbox">
                      <input checked={props.activeOption === 0} onClick={() => { props.changeColor(0) }} type="checkbox" id="blankCheckbox" />
                      <span class="checkmark"></span>
                    </label>
                  </div>
                  {/* <span > Correct </span> 
        <div className="row marginforCheckbox">
        <input checked={props.activeOption === 0} onClick={() => { props.changeColor(0)}} type="checkbox" id="blankCheckbox" />               
        </div>                                                                                                    */}
                </div>
              </div >

              <div className="col-6 col-md-6" >
                <div className="row" >
                  <div className="col-2  border border-primary  text-center text-vertical-center" style={{ borderColor: props.setDefaultColor(1), color: props.setDefaultColor(1) }} >
                    <h6 className="textStyleOfLabel">  B </h6>

                  </div >
                  <div className="col-7  border" style={{ background: props.setDefaultColor(1) }} >
                    <textarea class="form-control border-0" onChange={(e) => { props.onChangeQuestion(e, "opt2") }} style={{ background: props.setDefaultColor(1), resize: 'none' }} ></textarea>

                  </div>
                  <div className="col-3 ">
                    <span > Correct </span>
                    <label className="row containerOfcustomCheckbox">
                      <input checked={props.activeOption === 1} onClick={() => { props.changeColor(1) }} type="checkbox" id="blankCheckbox" />
                      <span class="checkmark"></span>
                    </label>
                  </div>

                </div> </ div >

            </div>

            <div className="row ml-0 mr-0 d-flex justify-content-around rowTopMargin" >

              <div className="col-6 col-md-6" >

                <div className="row" >

                  <div className="col-2  border border-primary  text-center text-vertical-center" style={{ borderColor: props.setDefaultColor(2), color: props.setDefaultColor(2) }} >

                    <h6 className="textStyleOfLabel">  C </h6>
                  </div>
                  <div className="col-7 border" style={{ background: props.setDefaultColor(2) }} >
                    <textarea class="form-control border-0" onChange={(e) => { props.onChangeQuestion(e, "opt3") }} style={{ background: props.setDefaultColor(2), resize: 'none' }} aria-label="With textarea" > </textarea>
                  </div >

                  <div className="col-3 ">
                    <span > Correct </span>
                    <label className="row containerOfcustomCheckbox">
                      <input checked={props.activeOption === 2} onClick={() => { props.changeColor(2) }} type="checkbox" id="blankCheckbox" />
                      <span class="checkmark"></span>
                    </label>
                  </div>
                </div>
              </div >
              <div className="col-6 col-md-6" >
                <div className="row" >
                  <div className="col-2  border border-primary  text-center text-vertical-center" style={{ borderColor: props.setDefaultColor(3), color: props.setDefaultColor(3) }} >
                    <h6 className="textStyleOfLabel"> D </h6>
                  </div >
                  <div className="col-7  border" style={{ background: props.setDefaultColor(3), resize: 'none' }} >
                    <textarea class="form-control border-0" onChange={(e) => { props.onChangeQuestion(e, "opt4") }} style={{ background: props.setDefaultColor(3), resize: 'none' }} > </textarea>
                  </div >
                  <div className="col-3 ">
                    <span > Correct </span>
                    <label className="row containerOfcustomCheckbox">
                      <input checked={props.activeOption === 3} onClick={() => { props.changeColor(3) }} type="checkbox" id="blankCheckbox" />
                      <span class="checkmark"></span>
                    </label>
                  </div>
                </div>
              </div >
            </div>
          </div>

My css

saveButtonStyle{
background-color: #20B2AA;
color: white;
margin:0 auto;
    display:block;
}

.text-vertical-center{
    display:flex;
    align-items:center ;
    justify-content: center;
}

.textStyleOfLabel{
    font-size:22px;
    font-weight:bold;
}

.textStyleOfQuestionLabel{
    font-size:26px;
    font-weight:bold;
}

.checkboxStyle{
    display:flex;
    justify-content: center;
}
.containerOfcustomCheckbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 16px;
}

/* Hide the browser's default checkbox */
.containerOfcustomCheckbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    outline: 2px solid #20B2AA;
}

/* On mouse-over, add a grey background color */
.containerOfcustomCheckbox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a new background */
.containerOfcustomCheckbox input:checked ~ .checkmark {
    background-color: #20B2AA;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.containerOfcustomCheckbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.containerOfcustomCheckbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.questionInput{
    text-align: center;
}
.textarea {
    display:inline-block;
    vertical-align:middle;
}
.modalfetchedInfoStyle{
    background-color: white;
}

So Here I have done this using the bootstrap grid system.

But I actually facing issues with the tablet view . I just want to have the idea how I can achieve this structure using the html css and bootstrap.

This is what I have tried.

Can any one help me with this ?

Any suggestion will be really helpful

Thanks.

can you add the meta tags that you are using in the head of the html ? — Pranay Tripathi, Nov 22 '18 at 09:57
@ganesh any specific reason of having `shrink-to-fit=no` ? you have to remove this incase you want the `device-width`. — Pranay Tripathi, Nov 22 '18 at 10:17

score 0 · Answer 1 · answered Nov 22 '18 at 11:41

As per the code you have shared, meta tag has attribute shrink-to-fit=no is causing your viewport to not adjust at different device-width. Just remove shrink-to-fit=no from the meta tag and it should fix the issue. For detailed explanation have a look at this link.

Html structure Not working on different devices

1 Answers1