Title: [SOLVED] Mobile Custom Header Resizing Last modified: August 22, 2016 --- # [SOLVED] Mobile Custom Header Resizing * Resolved [Gaylude](https://wordpress.org/support/users/gaylude/) * (@gaylude) * [11 years, 3 months ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/) * I am posting this because I have searched relentlessly for a solution to this problem and have figured it out myself. I am working on .evolve on a clients website, and I created a custom header image, that has their logo in the center, however whenever you view the website from a mobile device, the entire page resizes, spare the custom header, leaving you with dead space to the right of every page and a strange third of the header I created. * the website is [reauxchiropractic.com](http://reauxchiropractic.com) * To fix this, navigate yourself to: Appearance > Editor > custom-css.php * and run a search for this style class: `.custom-header` * The width, for me, was 980px, but you can change that value to 100%, so that it fills the parent container entirely. Your code should have looked like this: `. custom-header {padding:40px 20px 5px 20px!important;width: 980px;...;}';` * But now looks like this `.custom-header {padding:40px 20px 5px 20px!important; width: 100%...;}';` * I hope I helped anybody, because I struggled with this for a while Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/page/2/?output_format=md) [→](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/page/2/?output_format=md) * Thread Starter [Gaylude](https://wordpress.org/support/users/gaylude/) * (@gaylude) * [11 years, 3 months ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787298) * i wonder why my doesn’t work :v is strong the new industry standard? * It should be noted that I did not actually ‘resize’ the header image, rather resize it’s container but left the image centered, so that resizing of the window allowed the logo in the center to stay in the center. If anybody would like to know how to actually resize the header image itself, I could figure that out. * [Lilianna_Antipikal](https://wordpress.org/support/users/lilianna_antipikal/) * (@lilianna_antipikal) * [11 years ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787681) * Hi there, I have a problem with custom header resizing and maybe you can help. It looks great on PC but on mobile it shrinks. I’ve searched and searched but nothing 🙁 All i have found is when the image is too big, but no word about the image being too small… * [Lilianna_Antipikal](https://wordpress.org/support/users/lilianna_antipikal/) * (@lilianna_antipikal) * [11 years ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787682) * my address is lilioweprojekty.pl * [emranemranx](https://wordpress.org/support/users/emranemranx/) * (@emranemranx) * [11 years ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787683) * Hi there, * Thanks for writing in, * I’ve seen the problem and If we’re not wrong then are you asking to increase the header banner size when it goes on mobile mode so it looks more prominent for viewers. * It’s basically your image is too big but meantime I’ve managed some way to make it look bigger. * You can go to: **Appearance > Theme Options > Custom CSS** and put the following code: * ``` @media only screen and (max-width: 768px) #logo-image { float: none!important; margin: 10px 0!important; min-width: 138% !important; display: inline-block; } ``` * Hope this helps, Thanks. * [Lilianna_Antipikal](https://wordpress.org/support/users/lilianna_antipikal/) * (@lilianna_antipikal) * [11 years ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787684) * Hi, thank you for your help. I know the image is too big for a logo, but I couldn’t get it to work with header image either. With header image the mobile version crops the image on both sides, so I figured it’s better to have the entire picture but small, rather than just a piece big. * [emranemranx](https://wordpress.org/support/users/emranemranx/) * (@emranemranx) * [11 years ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787685) * Hi there, * In order to attain big image into mobile mode you may design another bigger image for mobile version so you can use couple for two different sizes. * Thanks. * [Lilianna_Antipikal](https://wordpress.org/support/users/lilianna_antipikal/) * (@lilianna_antipikal) * [11 years ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787686) * Hi, * I would love to prepare a bigger version for mobile mode, but a) I don’t know how big it should be, and b) even if I have it ready, I don’t know how to insert it. I’m totally new to wordpress.. * [emranemranx](https://wordpress.org/support/users/emranemranx/) * (@emranemranx) * [11 years ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787687) * Hi there, * If you’re having bigger image for the mobile version please provide us and I will put it in to make it look more prominent. * Thanks. * [Lilianna_Antipikal](https://wordpress.org/support/users/lilianna_antipikal/) * (@lilianna_antipikal) * [11 years ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787688) * Hi, how big the image for mobile version should be? Right now I’m using 1200 ×170. You said it yourself that my image is too big for a logo, and that’s why it shows poorly on mobile version. I’m confused, sorry! 🙂 * [emranemranx](https://wordpress.org/support/users/emranemranx/) * (@emranemranx) * [11 years ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787689) * Hi there, * Thanks for writing in, * It can be **960×114**. But I misunderstood before that you were having the smaller image even before with you. I tried to make image bigger by manually putting CSS code but here your style.css file is not running on your website. * [http://prntscr.com/71cma5](http://prntscr.com/71cma5) * Thanks. * [Lilianna_Antipikal](https://wordpress.org/support/users/lilianna_antipikal/) * (@lilianna_antipikal) * [11 years ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787690) * Hi, the image should be 960×114? How does it work, if the entire page is 1200? Also, what do you mean my site is not running styles.css. It does have this file.. * [emranemranx](https://wordpress.org/support/users/emranemranx/) * (@emranemranx) * [11 years ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787691) * Hi there, * Thanks for writing in, * It could be some problem into the server that time when I tried to approach your styling of website. * In order to make your current image should look bigger and better on mobile devices so you may can avail that with this given CSS code down below: * ``` @media only screen and (max-width: 768px) #logo-image { width: 960px !important; max-width: 133%; } ``` * By this given code you can get a better look on smart devices of your header image. In contrast you can have a look something like this. * [http://prntscr.com/73xuwt](http://prntscr.com/73xuwt) * However with certain given code you can get a look like this more prominent looking. * [http://prntscr.com/73xv8w](http://prntscr.com/73xv8w) * Thanks. * [EUTS](https://wordpress.org/support/users/euts/) * (@euts) * [10 years, 8 months ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787716) * I was updating my website today. Now out of nowhere my horizontal logo for header is not the same size and partial blue is showing from behind…? * [Denzel Chia](https://wordpress.org/support/users/denzel_chia/) * (@denzel_chia) * [10 years, 8 months ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787717) * Hi EUTS, * Please open your own thread and do not post in a resolved thread. Your question might never be read in a resolved thread, since users mostly don’t click on it. * You also need to post your website url, so that users here can see it and provide a possible solution. * Thanks! * [rocketsciencedigital](https://wordpress.org/support/users/rocketsciencedigital/) * (@rocketsciencedigital) * [10 years, 5 months ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/#post-5787728) * Hi there, * I tried editing the php file with the 100% fix described above. I got an error message telling me there was an unexpected ‘ ‘ in line 14 – this line: * ‘default-image’ => ”, * I checked the code and that’s exactly how it appears in the original template. * Any suggestions gratefully received. * Thanks. Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/page/2/?output_format=md) [→](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/page/2/?output_format=md) The topic ‘[SOLVED] Mobile Custom Header Resizing’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/evolve/4.3.7/screenshot.png) * evolve * [Support Threads](https://wordpress.org/support/theme/evolve/) * [Active Topics](https://wordpress.org/support/theme/evolve/active/) * [Unresolved Topics](https://wordpress.org/support/theme/evolve/unresolved/) * [Reviews](https://wordpress.org/support/theme/evolve/reviews/) ## Tags * [custom](https://wordpress.org/support/topic-tag/custom/) * [header](https://wordpress.org/support/topic-tag/header/) * [image](https://wordpress.org/support/topic-tag/image/) * 17 replies * 8 participants * Last reply from: [Cameron79](https://wordpress.org/support/users/cameron79/) * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/solved-mobile-custom-header-resizing/page/2/#post-5787730) * Status: resolved