• Resolved recoil9

    (@recoil9)


    I really liked the design of the suki wordpress theme as shown in the template picture so I thought I would download and play around with it. My site is live so im just working on the live preview to see how things look and one big issue Im facing is My header image is not responsive live most other themes.

    Why do I have to enter a mobile size header image? With tablets and smart phones being in varying sizes wouldnt a responsive desktop header image be the most user friendly choice?

    Im still learning alot about wordpress and really like this theme but this mobile header image issue is really giving me a hard time. and with my site being live I cant just leave this theme active and have people see it on mobile device not properly sized. Any help with this please?

    p.s. Would it be nice to have the header image responsive to full width of any mobile decive / tablet and have the menu link underneath it?

    • This topic was modified 5 years ago by recoil9.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author sukiwp

    (@sukiwp)

    Hi @recoil9

    Thanks for using Suki and we’re really glad that you like it.

    Can you share the site URL that you are currently working on?

    Yes, we encourage users to input logo width, both for desktop header logo and mobile header logo. There are some reasons why:

    – Suki supports SVG logo (using SVG for logo is really recommended because of its best quality). And specifying the logo width is required in this case. Otherwise the SVG logo width would be uncontrolled.

    – Retina image. People want to have a really sharp logo (because it’s their branding). Thus, they will upload the retina version. So let’s say you want the logo to be 100px width, you could upload 200px logo image but set the width option to 100px. This way, your logo would look sharp on both normal and retina devices.

    – We want consistency and defining logo width in “px” is the right approach in our opinion. If you use “%” or let the logo fluidly resize on smaller browsers, that would make your logo looks too small on some devices.

    Let me know if you still need help with this. It would be better if you can share the site URL so we can point out how the solution would be.

    Regards,
    David

    Thread Starter recoil9

    (@recoil9)

    Ah, thank you David for the quick informative reply. I tried resizing the logo for mobile device but if i make it the width of my mobile phone, for example, it pushes the three bars for drop down menu off the screen. I also wanted custom html so phone number would display at top but that gets pushed off screen as well and doesn’t wrap underneath the logo.???

    Thread Starter recoil9

    (@recoil9)

    Here is a link to explain and show the problem I have with your mobile logo forced pixel width. Please see images and explanation. Thank you. Click Here

    Theme Author sukiwp

    (@sukiwp)

    Hi,

    So what kind of mobile header layout that you want? Is there any design draft? Maybe you can use a bit of custom CSS.

    The way we organize the layout on desktop header and mobile header is like this:

    – Each section has a fixed height value (for further implementation, e.g. Sticky Header module on our Suki Pro addon).
    – Header elements are put into each different column.

    In your example, you put the logo on left column, and mobile menu toggle on right column. It’s expected that the mobile menu toggle will never wrapped down below the logo.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Why isnt Header image responsive?’ is closed to new replies.