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

HTML & CSS, html block size is reducing as making the page small

I have a problem as following:
i hope you will get it what is my problem here
and I don’t understand why this happens.

i think the problem is in header and nav
I thought it is more likely to happen due to pictures but i am very sure that is not because of the logo, because it is on 24px sizes each. Apologize if my English is bad.

<header>
  <nav>
    <div class="container-fluid">
      <div class="row">
        <div class="col-2">
          <div class="logo">
            <a href="https://www.samsung.com/us/" target="_blank">
              <img
                src="../src/assets/img/gnb-desktop-120x32.png"
                alt="Samsung"
              />
            </a>
          </div>
        </div>
        <div class="col-9">
          <div class="navlist">
            <ul class="inner">
              <li>
                <button><span>Shop</span></button>
              </li>
              <li>
                <button><span>Mobile</span></button>
              </li>
              <li>
                <button><span>TV & Audio</span></button>
              </li>
              <li>
                <button><span>Appliances</span></button>
              </li>
              <li>
                <button><span>Computing</span></button>
              </li>
              <li>
                <button><span>Displays</span></button>
              </li>
              <li>
                <button><span>Accessories</span></button>
              </li>
              <li>
                <button><span>SmartThings</span></button>
              </li>
            </ul>
            <ul class="inner">
              <li>
                <button><span>Explore</span></button>
              </li>
              <li>
                <button><span>Support</span></button>
              </li>
              <li>
                <button><span>For Business</span></button>
              </li>
            </ul>
          </div>
        </div>
        <div class="col-1">
          <ul class="tools">
            <li>
              <button>
                <span>
                  (search icon)
                </span>
              </button>
            </li>
            <li>
              <button>
                <span>
                  (shopping icon)
                </span>
              </button>
            </li>
            <li>
              <button>
                <span>
                  (user icon)
                </span>
              </button>
            </li>
            <li class="d-none">
              <button>
                <span>
                  (bars icon)
                </span>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    i have solved the problem. I have remembered that i did change the value of bootstrap container-fluid class. And i commented it out, then it has been solved.

    thank you all!


  2. 0

    See your CSS if there is anything that force HTML element to have max width.

    If you did not find and it’s work on any screen but when you use browser responsive check tool you getting that, I think it’s a bug from your browser resize tool. It happens for me too many times.

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

Back To Top
Search