Image header displaying super small (105×24) with Angular CLI

I’m in a SAAS class and we’re building a website with Bootstrap and Angular. This is my first time using Angular Cli and I’m having an issue with my website header. When I ran things statically before setting up the Angular components the header image displayed fine, but now it’s rendering super tiny when I launch it using the Angular ng serve command. I’ve tried forcing the image to use 100% width and 100% height just to see if it would work. I’ve also tried putting the header in app.component.html but the same issue occurs. The header image itself is 2048×649. I feel like there’s something silly that I’m missing but I can’t figure it out.


  <!-- nav bar & header -->
  <nav class="navbar fixed-top navbar-expand-md navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand navlogo" href="#">Space Place</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0 pe-2 pt-1">
          <li class="nav-item">
            <a href="#" class="nav-link active">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
              <li><a class="dropdown-item navitems" href="#">Calendar</a></li>
              <li><a class="dropdown-item navitems" href="#">Image Upload</a></li>
              <li><a class="dropdown-item navitems" href="#">Weather</a></li>
              <li><a class="dropdown-item navitems" href="#">Settings</a></li>
          <li class="nav-item">
            <a href="#" class="nav-link">
              Image Gallery
          <li class="nav-item">
            <a href="signin/" class="nav-link" id="signInLink" data-bs-toggle="modal" data-bs-target="#signInModal">
              Sign in
        <form class="d-flex">
          <input class="form-control me-2" type="text" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-light my-sm-0" type="submit">Search</button>

  <!-- problem image -->
  <img src="/images/orion.png" class="img-fluid" alt="orion nebula">


/* Global styles */

  background-color: black;

  font-family: 'Roboto Flex', sans-serif;
  font-size: 3vw;
  font-max-size: 50px !important;
  color: white;

  margin-right: 1em;
  margin-left: 1em;

  margin-left: 1.5em;

  font-family: 'Roboto Flex', sans-serif;
  font-size: 3vw !important;
  color: white;
  margin-left: 1em;

  text-align: end !important;

.navbar-nav .active 
  text-decoration: underline;

  font-family: 'Roboto Flex', sans-serif;
  align-content: end;

  align-self: end;

  border: transparent;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;

  font-family: 'Roboto Flex', sans-serif;
  font-size: medium;

  font-family: 'Roboto Flex', sans-serif;
  text-decoration: underline;
  font-size: x-large;
  font-weight: bold;
  color: black !important;

  font-family: 'Roboto Flex', sans-serif;
  text-decoration: underline;
  font-size: x-large;
  font-weight: bold;
  color: black !important;

  max-width: 216px;

  border-top:3px solid #874670;
  border-left: 3px solid #874670;
  border-right: 7px solid #874670;
  border-bottom: 7px solid #874670;
  border-radius: 25px;

  /* fallback for old browsers */
  background: #6a11cb;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))

Source link

Leave a Reply

Your email address will not be published.

Previous Article

Skullcandy’s Mod earbuds cost $60 and have a 34-hour battery life

Next Article

Fluorescence Measurement Approach Speeds Process, Quality Control

Related Posts