[SOLVED] Mobile Custom Header Resizing

  • Resolved Gaylude

    (@gaylude)


    10 years ago

    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

    To fix this, navigate yourself to:
    <b>Appearance > Editor > custom-css.php</b>

    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 2 replies - 16 through 17 (of 17 total)

  • i have my header problem and i and i tried every thing but i am having the same problem.
    its looks like okay on desktop but on mobile small screen goes zoom and the white spaces around the image now i droped this idea and now i am inserting logo as my header , i uploaded image sized 906 by 114.
    but i want that my logo apears as just left but its apearing near middle and still white spaces above and below the image on mobile small screen.
    Kindly do something about that, below is my website adress thanks.
    https://www.anwarjewelers.com

    Hello,

    My website is as follows: https://www.GJJFtWayne.com
    Theme: iTek

    The header image does not shrink proportionally using mobile (in fact it doesn’t shrink that well on desktop either). I’ve tried to follow the original poster’s advice but received a syntax error and had to revert the change using FTP.

    My editor info looked slightly different (probably because i’m using a different theme?).. but i was editing the “.custom-header” file and I changed the header ‘width’ from 1600, to 100%, as suggested.

    Any help with this would be GREATLY appreciated.

    Thank you in advance, regards -Cameron

Viewing 2 replies - 16 through 17 (of 17 total)
  • The topic ‘[SOLVED] Mobile Custom Header Resizing’ is closed to new replies.