Support » Theme: Blue Planet » Modifying header for mobile viewing

  • Hi there! I’m modifying the CSS a little of your theme for a client. it’s been super easy. The only issue I’m having is with the header image. I tried uploading the header via the WP control panel, with the recommended dimensions, and it overlapped the nav menu, so I went into the actual css and did it myself and it worked just fine. The only issue is when viewing the site on a mobile device, the header image is cropped in half. I’ve gone through the CSS and even the responsive css, I can’t seem to find a way to modify it. I created my own @media query for it and it wouldn’t recognize it when publishing to the site. I’ve got to be missing something here! What should I modify so I can make the header image fit nicely in the mobile version of the site? Thanks! Great theme, well done!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Nilambar Sharma


    Can you give us the site link so that I can inspect the site?

    Thank you for getting back to me so quickly! Here it is below, still very much in progress. I removed the @media queries I put in, not sure if you have something different to recommend? I thought about making a second, smaller header and an @media query for small device (smartphones) so it would show a smaller/entire view of the logo on a smartphone. Again, this is looking great in every other way, just the logo on the smartphone is an issue.

    @nilambar Sharma, Theme Author
    I recommend you to add feature to upload two different images for logo from theme option. If you can add feature to upload logo for desktop and responsive devices separately, such problem (ingrid517’s issue) will be solved.

    Theme Author Nilambar Sharma


    @maneshtimilsina According to Guidelines of WP, there should not be options for uploading logos in the theme. Initially I had kept that. But when reviewing, that option was removed.

    @Nilamba Sharma

    Hello there,

    I was wondering if you could actually implement the suggestion made by maneshtimilsina, and create an option for uploading three different headers so that the header looks good on responsive devices too.

    Do you think you could do it?
    Please let me know.

    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Modifying header for mobile viewing’ is closed to new replies.