Question 43569 in Html Question posted in
Some basic documentation can be found here.

HTML / CSS: Image turns bigger

I am trying to make this website, and I want the logo to look like in the image (the logo is in the top left corner), I had it working before, but after figuring out how to get the links? (list elements) to the other side of the wrapper, the image suddenly became bigger (https://codepen.io/kyan0045/pen/ZEMVGdW) I was unable to figure out how to fix it, but if anyone would be able to help me, it would be much appreciated.

The css I added & after which the links were moved & the logo turned bigger is:

.navigation-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.navigation-container ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation-container li {
  margin-left: 20px;
}

@media (max-width: 767px) {
  .navigation-container {
    justify-content: center;
  }

  .navigation-container ul {
    flex-direction: column;
    align-items: flex-end;
  }

  .navigation-container li {
    margin-left: 0;
    margin-bottom: 10px;
  }
}

#logoheadurl {
  position: absolute;
  left: 0;
}

.container.accordion {
  padding-right: 0;
}

.container.accordion .row {
  margin-right: 0;
}

.container.accordion .navigation-container {
  width: 100%;
  justify-content: flex-end;
}

.row {
  display: flex;
  align-items: center;
  line-height: 69px;
}

.mobile-toggler-wrapper {
  display: flex;
  justify-content: space-between;
}


    .row {
      display: flex;
      align-items: center;
    }

    nav .container .row [class^=col-] {
      line-height: 69px;
    }

    .mobile-toggler-wrapper {
    display: flex;
    justify-content: space-between;
}

I tried to move the "Home" "Xex" & "Xex" list elements to the other side of the wrapper, while keeping the logo in place. I managed to get it to work, but somewhere along the line I did something that also made the logo bigger. I expected it to stay the same and don’t know what I did wrong..

Tags:

2

Answers


  1. 0 
    The logo turned bigger:

I have gone through your code and found a solution.
I have also attached a screenshot how what it looks like: 
https://prnt.sc/lRTbwVhshJ5R

Please remove the following CSS from your code:
(This Css is in your HTML file)

#logoheadurl {
  position: absolute;
  left: 0;
}
    Login or Signup to reply.
  2. 0

    https://codepen.io/Mr-Developer26/pen/JjawKKM

    Remove this on your css

    #logoheadurl {
  position: absolute;
  left: 0;
}

    in your code i also found body tag 2 times

    body {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      background-color: #e0f6f9;
    }

    body{
    line-height:inherit;
    margin:0
}

    So I edit this code as well, adding h1,h2,h3,h4,h5 tags twice. so you may set them according to your requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search