I am sure this is a simple one to answer, if you go to our site www.terabytecomponents.co.uk and open chrome developer tools to switch to mobile view, there's have 2 divs that are creating a white space between the logo and the search bar.

Would you be kind enough to guide me on how to remove that just for the mobile version?


You can find below two css code and remove it margin-top: 10px and min-height: 40px, to fix the wasted white space in mobile version.

@media only screen and (max-width: 639px)
.block-search {
   /* margin-top: 10px; */ //Remove this

@media only screen and (max-width: 767px)
.page-header .logo {
    float: none;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 140px);
    text-align: center;
    max-width: 100%;
    margin: 0 90px 10px 50px;
    /* min-height: 40px; */ //Remove this

After you can run below command.

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento cache:flush

Let me know if any query.

Hope it help!

  • Worked perfectly, thank you. There's still one small space left, i've tried following the same looking for the right part to comment out, could you help with this? and notice the cart icon, it's not in line with the logo and search? Be amazing if you could tell me what to do :) – Mehdi Rafiai Feb 24 '19 at 11:24
  • 1
    Just add this css for set cart icon: a.action.showcart { margin-right: 5px; } – Kirti Nariya Feb 24 '19 at 11:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.