what is required header image width to still maintain mobile friendly site in blogsmu

I either need to lengthen my header image width or shorten the menu bar to match the one I am installing now at 960. What is the required header image length that will still maintain a mobile friendlysite? and if not this way, is there a way to change the menu bar so that it does not go across the page?

here is the site: http://www.yourvitaledge.com

I have enabled access and I will also install "my custom css" if there is a css fix for this.

Thanks in advance! Linda @iempoweru

  • Michelle Shull

    Hi Linda! How are you?

    I fixed 'er all up for you. I added this to the custom CSS plugin:

    #top-bg .top-bg-inner .alignleft img {
    width: 100%;

    This makes the banner image automagically fill 100% of the container around it, which will shrink/expand depending on the size of the screen. Using percents instead of pixels is one of the tricks to getting a responsive site. :slight_smile:

    Have a great weekend!

  • Michelle Shull

    Hey there, Linda!

    It's hard to find the ideal size for desktop, there are so many monitor sizes and resolutions out there. My monitor is pretty big, it's 2500px wide, and there are even bigger monitors out there. Creating a logo that's 2500px wide will cover most of your bases, but that's going to be a huge file, it's going to take a little bit to load on slower connections.

    What if instead of using an image there, we did this with CSS? It wouldn't be unpossible, and you're already using a child theme, so making a few tweaks to the header file itself wouldn't be a big deal at all. That way all your text would be actual text, not a picture of text, so it would be readable by visually impaired users who use screen readers. Then we can go crazy with the CSS and make it work on any size monitor. (A red bar created in CSS can be any size it needs to be without losing quality, unlike an image.) We'd need to still use an image for your strapping healthy guy in the yellow icon, but I think we can imitate everything else with some Google fonts and some clever CSS.

    I won't dig in unless you think this sounds like a good idea, and I see you've got another thread open my co-worker Adam is working on RE: BlogsMU, so we can wait until those issues are resolved as well.

    Let me know!

  • iempoweru

    I am not 100% positive what you are talking about, but, let's go for it. Here's what I think you mean. That we create a red bar to go across the top instead of the header image. Can the text and title be added in in a similar fashion? And how would we add in the super guy? I can crop it down so it is just the image with no bar etc.

    Let me know what I need to do to help. Also, I wasn't sure if I should start another thread for my other questions, as they didn't really relate to this question. Thanks in advance for your help for sure! Linda @iempoweru

    The color code for that red is #ed1b24

  • iempoweru

    @Michelle Shull - hi, it's me again. I have a different way to phrase problem/solution.

    On the blogsmu site that we have been talking about, I still can't make any progress with the header.

    I created a header that is 2475 wide, and it appears that there is a set width for this theme of 960 for headers, as that is the size it ends up being cropped down to. Actually I am ok with that.

    What I am not okay with is that the menu bar stretches the width of the full screen.

    So, rather than messing with headers, can I instead get a snippet of code to shorten the menu to 960 as well. I think this would solve the problem. Thanks for your help. Linda @iempoweru

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.