How can I center my online shop logo on mobile devices?

Technical Q&A
6

Hello There,

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media screen and (max-width: 749px){
.logo-align–left .site-header__logo {
position: absolute;
top: 0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
}
header.site-header.border-bottom.logo–left {
padding-top: 6px;
}

.logo-align–left .site-header__logo a.site-header__logo-image img {
max-width: 110px !important;
}

div#PageContainer {
padding-top: 60px;
}
.site-header__icons .site-header__icon.site-header__menu.js-mobile-nav-toggle {
position: absolute;
left: 0;
}

.grid__item.site-header__icons,
.grid__item.site-header__icons .site-header__icons-wrapper {
position: unset;
}
}

1 Like