Title: Center Custom Logo Responsive Last modified: May 23, 2019 --- # Center Custom Logo Responsive * [nowlanjor](https://wordpress.org/support/users/nowlanjor/) * (@nowlanjor) * [7 years, 1 month ago](https://wordpress.org/support/topic/center-custom-logo-responsive/) * I made a previous post here: * [https://wordpress.org/support/topic/center-custom-logo-2/#post-11431931](https://wordpress.org/support/topic/center-custom-logo-2/#post-11431931) * I thought it resolved my issue (maybe I was wrong), but right before launch, I noticed the mobile (on phones) was not centered any more. * It seems fine in portrait view on tablet, so I don’t know if I inserted any code that is blocking it from centering on phones or not. * Code is below: * ``` .woocommerce-page .page-title { display: none; } #access { margin-bottom: 0; } body.post-type-archive-product #content { margin-top: -150px; } body.home #content { margin-top: -255px; } .page-id-12 #content { margin-top: -50px; } .page-id-5 #content { margin-top: -50px; } .page-id-13 #content { margin-top: -40px; } .page-id-23 #content { margin-top: -100px; } .page-id-378 #content { margin-top: -40px; } .has-large-font-size { margin-top: 20px; } .storefront-recent-products { margin-top: -70px; margin-bottom: 0; } .site-branding { margin-bottom: -40px } .storefront-handheld-footer-bar ul li.home > a:before { content: "\f015"; } header#masthead { background-image: url(cropped-Post-and-Stud-6.png); background-repeat: no-repeat; background-position: left; } .custom-logo {display: none;} #site-navigation { width: 100%; display: inline-block; } .term-custom-orders #content { margin-top: -135px; } .term-dangles #content { margin-top: -135px; } .term-novelty-studs #content { margin-top: -135px; } .term-studs #content { margin-top: -135px; } .page-id-22 #content { margin-top: -110px; } a:focus, .focus a { outline: none !important; } @media screen and (max-width: 1112px) and (min-width: 740px) {body.home #content {margin-top: -140px;}} @media screen and (max-width: 1040px) and (min-width: 740px) {.menu { text-align:center } .menu li { display:inline-block; float:none; margin-left: -5px; } .menu li li { display:block; text-align:left }} @media screen and (max-width: 1112px) {Img.wp-image-191 {display:none;}} @media screen and (min-width: 740px) {header#masthead { background-image: url(cropped-Post-and-Stud-6.png); background-repeat: no-repeat; background-position: left; }} @media screen and (max-width: 740px) { .site-branding { margin: 0 auto;} button.menu-toggle { margin: 0 auto; float: none; display: block;} .woocommerce-active .site-branding { float: none; text-align: center; } .storefront-recent-products { margin-top: 10px; } .woocommerce-active .site-branding img { display: inline-block; margin-top: -15px; margin-bottom: 5px; } .page-id-5 #content { margin-top: -15px; } .woocommerce-cart-form { margin-top: 90px;} .woocommerce-info { margin-top: 90px; } .woocommerce-pagination { margin-top: 50px; } .woocommerce-ordering select {margin-top: 125px;} .woocommerce-result-count { margin-top: 25px; } .woocommerce-breadcrumb { margin-top: -30px; } header#masthead { background-image: url(cropped-Post-and-Stud-6.png); background: none !important;} .woocommerce-order-received #content {margin-top: -30px;} } @media screen and (min-width: 812px) {button.menu-toggle { display: none;}} ``` * Thanks for your help. * Jordan * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcenter-custom-logo-responsive%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 5 replies - 1 through 5 (of 5 total) * [Riaan K.](https://wordpress.org/support/users/riaanknoetze/) * (@riaanknoetze) * [7 years ago](https://wordpress.org/support/topic/center-custom-logo-responsive/#post-11583038) * Hi there, * The site at [http://www.postandstud.com/](http://www.postandstud.com/) is currently sitting behind a landing page and we’re not able to double-check your code. If troubleshooting this before launch is absolutely necessary, you’ll need to get in touch with a dedicated web developer and provide them with login details to take a closer look 🙂 * Thread Starter [nowlanjor](https://wordpress.org/support/users/nowlanjor/) * (@nowlanjor) * [7 years ago](https://wordpress.org/support/topic/center-custom-logo-responsive/#post-11584757) * Hi RK, * Apologies. Closed the site to fix the bugs post soft launch. * I reopened it with limited access – only homepage visible. * Thanks, * J - This reply was modified 7 years ago by [nowlanjor](https://wordpress.org/support/users/nowlanjor/). - This reply was modified 7 years ago by [nowlanjor](https://wordpress.org/support/users/nowlanjor/). * [Riaan K.](https://wordpress.org/support/users/riaanknoetze/) * (@riaanknoetze) * [7 years ago](https://wordpress.org/support/topic/center-custom-logo-responsive/#post-11586854) * Thanks for that 🙂 * I’ve just had another look and I’m not sure whether we’re troubleshooting the same thing. Here’s what that logo looks like on mobile on my side: * **Portrait** * Link to image: [https://cld.wthms.co/LztDmK](https://cld.wthms.co/LztDmK) * **Landscape** * Link to image: [https://cld.wthms.co/AiIsHL](https://cld.wthms.co/AiIsHL) * Can you share a screenshot of what you’re getting in your side? * Thread Starter [nowlanjor](https://wordpress.org/support/users/nowlanjor/) * (@nowlanjor) * [7 years ago](https://wordpress.org/support/topic/center-custom-logo-responsive/#post-11587841) * Ah, strange. Maybe my media queries are off for mobile (phone). * This is what I’m getting on my end (both on my device and the mobile preview on desktop). * [https://i.imgur.com/auycH28.jpg](https://i.imgur.com/auycH28.jpg) * EDIT: Using an old iPhone 5 FYI. - This reply was modified 7 years ago by [nowlanjor](https://wordpress.org/support/users/nowlanjor/). * [Ryan Ray](https://wordpress.org/support/users/ryanr14/) * (@ryanr14) * [7 years ago](https://wordpress.org/support/topic/center-custom-logo-responsive/#post-11614030) * Hi [@nowlanjor](https://wordpress.org/support/users/nowlanjor/), * Perhaps this is fixed now, but I also see the same thing that Riaan had seen. Right up to 740px wide I see a centered logo above the mobile hamburger menu. * ⌊Centered mobile⌉⌊Centered mobile⌉ Link to image: [https://cld.wthms.co/5TcBKR](https://cld.wthms.co/5TcBKR) * I assume you’ve got your own media query/breakpoint there at 740px. Just as an extra FYI, these are the two breakpoints for Storefront by default. It starts out mobile optimized then as screens get wider it changes the CSS depending on these widths. * ⌊Storefront breakpoints⌉⌊Storefront breakpoints⌉ Link to image: [https://cld.wthms.co/KoX4db](https://cld.wthms.co/KoX4db) Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘Center Custom Logo Responsive’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/storefront/4.6.2/screenshot.png) * Storefront * [Support Threads](https://wordpress.org/support/theme/storefront/) * [Active Topics](https://wordpress.org/support/theme/storefront/active/) * [Unresolved Topics](https://wordpress.org/support/theme/storefront/unresolved/) * [Reviews](https://wordpress.org/support/theme/storefront/reviews/) * 5 replies * 3 participants * Last reply from: [Ryan Ray](https://wordpress.org/support/users/ryanr14/) * Last activity: [7 years ago](https://wordpress.org/support/topic/center-custom-logo-responsive/#post-11614030) * Status: not resolved