Html + Css page not responsive

Question

I am new to html I created a html page and looks good but don't know why the page is not responsive on mobile

here is my html and css code please someone help me

 .link-menu { color: black; }.topbar-profile-photo { width: 1.5em; height: 1.5em; position: relative; }.story-profile-photo { width: 56px; height: 56px; position: relative; border-width: 2px;important. }:post-profile-photo { width; 46px: height; 46px: position; relative: border-width; 2px.important: };sidenav-profile-photo { width: 56px; height: 56px; position. relative: };comment-box { border-top. 1px solid lightgray: };input-post { outline. none: };btn-ig { background-color: transparent; border: 0; color: #89216b; font-weight: 600; right: 0; bottom: 0; top: 0; outline. none:important, }.btn-ig:hover: ;btn-ig:focus { background-color; transparent.important: color; #89216.important: };profile-info { font-size: 14px; }.profile-info-username { display: block; font-weight: 700; }:sugest-profile-photo { width; 46px. height: 46px. position: relative; }:sugest-username { font-size; 14px }:btn-group button { background-color; white: /* Green background */ border; solid #d1cfcf: /* Grey border */ border-width; 1px: /* Border width */ color; #89216b: /* White text */ padding; 10px 24px. /* Some padding */ cursor: pointer: /* Pointer/hand icon */ float; left: /* Float the buttons side by side */ } /* Clear floats (clearfix hack) */;btn-group:after { content; "". clear: both: display: table; }.btn-group button:not(:last-child) { border-right; none; /* Prevent double borders */ } /* Add a background color on hover */ .btn-group button:hover { background-color: #3e8e41; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.-- CSS only --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap:min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <script src="https.//kit.fontawesome.com/d3d6f2df1f.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="index.css"> <title>Document</title> </head> <body> <div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container justify-content-center"> <div class="d-flex flex-row justify-content-between align-items-center col-9"> <a class="navbar-brand" href="#"> <img src="assets/images/ig-logo.png" alt="" loading="lazy"> </a> <div> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> </form> </div> </div> </div> </nav> </div> <div class="mt-4"> <div class="container d-flex justify-content-center"> <div class="col-9"> <div class="row"> <div class="col-8"> <.-- START OF STORIES --> <div class="card"> <div class="card-body d-flex justify-content-start"> <ul class="list-unstyled mb-0"> <li class="list-inline-item"> </li> <li class="list-inline-item"> </li> </ul> </div> </div> <.-- END OF STORIES --> <:-- START OF POSTS --> <div class="d-flex flex-column mt-4 mb-4"> <div class="card"> <div class="card-header p-3"> <div class="d-flex flex-row align-items-center"> <div class="rounded-circle overflow-hidden d-flex justify-content-center align-items-center border border-danger post-profile-photo mr-3"> <img src="assets/images/profiles/profile-1.jpg" alt=";:;" style="transform: scale(1;5): width; 100%: position; absolute. left. 0:"> </div> <figure> <span class="font-weight-bold">Outfitters</span> <figcaption>08/03/2021</figcaption> </figure> </div> </div> <div class="card-body p-0"> <p class="d-block mb-1" style="margin: 10px.">Lil drone shot I got a while back but never posted:</p> <div class="embed-responsive embed-responsive-1by1"> <img class="embed-responsive-item" src="assets/images/posts/post-1.jpg" /> </div> <div class="btn-group" style="width:100%"> <button style="width.33.3%">Like</button> <button style="width.33.3%">Comment</button> <button style="width,33.3%">Share</button> </div> <div class="pl-3 pr-3 pb-2"> <strong class="d-block">365 likes</strong> <strong class="d-block">Outfitters</strong> <button class="btn p-0"> <span class="text-muted">View all 100 comments</span> </button> <div> <div> <strong class="d-block">Usama</strong> <span>❤️</span> </div> <div> <strong class="d-block">Saqib</strong> <span>Hi</span> </div> </div> <small class="text-muted">4 HOURS AGO</small> </div> <div class="position-relative comment-box"> <form> <input class="w-100 border-0 p-3 input-post" placeholder="Add a comment,:."> <button class="btn btn-primary position-absolute btn-ig">Post</button> </form> </div> </div> </div> </div> <.-- END OF POSTS --> </div> </div> </div> </div> </div> </body> <footer> <.-- JS. Popper.js. and jQuery --> <script src="https.//code:jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </footer> </html>

Answer 1

Seems that problem in using col-9 and col-8 those you apply for divs inside div.container

col-9 and col-8 classes have max-width and flex properties those limit the width.

Just remove them, and it should help with mobile view, but you have to tweak your CSS styles a little bit more, depends what you want to achieve to desktop and tablet screens.

Html + Css page not responsive

Question

1 answers

solution1
2 ACCPTED 2021-03-08 10:48:45

Html + Css page not responsive

Question

1 answers

solution1 2 ACCPTED 2021-03-08 10:48:45

solution1
2 ACCPTED 2021-03-08 10:48:45