Search code examples
htmltwitter-bootstrapviewport

making a div the same on phone and desktop

i have a bar at the top of my page, it should basically take up the whole page and looks fine on desktop, but i also want it to look good on phones.

heres an example of the problem

enter image description here

this is the element that matters

<div class="jumbotron text-center" id = "top_bar">
  <img class="rounded-circle shadow-4-strong" alt="avatar" src="{% static 'avatar2.png' %}" style="width:100px; height:100px; border-radius: 50%;" />
</div>

and the css

  #top_bar{
    border-radius: 0px 0px 25px 25px;
    background-color:#696969;
    width:100%;
  }

if you google this problem youll find people saying putting this in your head should magically fix everything

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

it doesn't.

what should i try to fix this? i want the div to stretch across the width of the screen on both desktop and phones.

update, heres a bunch of the html, everything below this is irrelevant

<!DOCTYPE html>

<html lang="en" dir="ltr">

  {% load static %}
  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <meta charset="utf-8">

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

    <title></title>

    <style>

      .card-img-top{
        width: 100px;
        height: 100px;
        position: absolute;
        border-radius: 25px;
        left: 50%;
        top:60px;
        transform: translate(-50%, -50%);
      }

      .card{
        background-color:#f5eeee;
        width: 36rem;
        height: 30rem;
        border-radius: 25px;
        padding: 20px;

        position: relative;
          }

      .card-body{
        position: absolute;
        top:130px;
      }

      .card-text{
        text-align: left;
      }

        a {
      color: black;
      text-decoration: none !important;
          }


      .quick_skill{
        float: left;
        width: 150px;
        height: 50px;
      }
      .quick_skill_img{
        width: 36px;
        height: 30px;
      }

      body {
        background-color:#424743;
        color:white;
      }

      #top_bar{
        border-radius: 0px 0px 25px 25px;
        background-color:#696969;
        width:100%;
      }

      #intro {
             text-align: center;
             margin-left:21%;
             margin-right:200px;
             width:55%;
      }
      #right_box{
        left:23%;
      }
      #left_box{
        left:10%;
      }


    </style>

  </head>
  <body>

    <div class="jumbotron text-center" id = "top_bar">
      <img class="rounded-circle shadow-4-strong" alt="avatar" src="{% static 'avatar2.png' %}" style="width:100px; height:100px; border-radius: 50%;" />
    </div>

    <br>

<!--    <div style = "text-align: center; margin-left:35rem;margin-right:200px; width:80rem;">   -->
    <div id = "intro">
        Welcome to my portfolio website! My name is Jack Flavell, and I am excited to share my work with you. This website serves as a showcase of my professional
        and personal projects, as well as a way for you to get to know me better. As you browse through my portfolio, I hope you'll gain insight into my skills,
        passions, and experiences. Thank you for taking the time to visit my website, and please don't hesitate to reach out if you have any questions or feedback.
    </div>

    <br><br>

    <div class="container">
      <div class="row">

        <div class="col-sm-4" id="left_box">
          <a href="{% url 'personal_projects' %}">
            <div class="card">
              <img class="card-img-top" src="{% static 'n_personal_stuff.png' %}" alt="personal projects images">
              <div class="card-body">
                <h4 class="card-title">Personal projects</h4>
                <p class="card-text">Projects ive worked on in my personal time. Either for fun, out of interest or for self improvement. </p>
              </div>
            </div>
          </a>
        </div>

        <div class="col-sm-4" id="right_box">
          <a href="{% url 'professional_projects' %}">
            <div class="card">
              <img class="card-img-top" src="{% static 'proffesional_stuff2.png' %}" alt="professional experience">
              <div class="card-body">
                <h4 class="card-title">Proffesional projects</h4>
                <p class="card-text">Some things ive done in a proffesional capacity.</p>
              </div>
            </div>
          </a>
        </div>
      </div>
Solution

  • Few bits of advice, 1st off design/code the page for a mobile device 1st

    The framework you're using is MOBILE 1st then scale everything up. You wont need to keep crating custom classes and using inline styles to get it to work on all device sizes.

    You're using a out of date version of the Bootstrap Framework. From the link in your CDN you're using bootstrap 3(try using 5.. or at the very least BS4)

    The newer versions of the framework contain much better layout classes built in and you can use the inbuilt classes to do almost any layout you want.

    Don't use inline styles unless you have no other option. Also don't overwrite classes how you have you are adding in extra spacing padding etc which will break the bootstrap grid and lead to problems youre having on different device sizing.

    Use SASS to compile your changes for example if you want all cards to all have a background colour of electric pink use sass to make the .card class to have a bgcolor of #eb34db then compile your new boostrap.min.css

    When you next use <div class="card"></div> the cards background will be electric pink on every instance. You can do the same for borders, border radius, padding, margin, text color etc.