Banner Height Size and Slogan Text Placement

My newly published web site (https://1Bataan.fnkn.org) has many people complaining about the ugly appearance of the banner… They say that it shouldn’t take up the entire display and that they should not have to “scroll down” to begin seeing text. I went with the recommended size in the setup and it literally fills the entire page. I need to shrink it down to 1/3rd the height and I did apply a shorter image file as a test, but it expands to the same large size! Further, the slogan (our motto) seems to look sloppy in just appearing about mid-way through the graphic. I cannot figure out how to position the text to sit properly on top of the graphic. Any suggestions?

That link you gave https://1bataan.fnkn.org/ doesn’t work.

Might want to give us a valid link, and maybe the theme you are using.

I am so sorry… but the site was temporarily down while a new set of pages were published… The link is good and it is definitely up and running right now. Sorry about that Doug! Really looking forward to getting a few things “tightened up” and looking good… I work with truly slow (think 4kb in speed) upload speeds… a 54MB site cannot be published because my Internet in the Philippines is super slow… so I have to zip up the export, FTP it to the serve, expand it there. We’re talking about anywhere from 5 hours to 9 hours to upload 54MB… One day, I hope to have better Internet. Fiber at 50MB download and 10MB upload is in my neighborhood, but only the wire is there… no service yet.

Your banner Gif (6mb) is nice but very large, if you export it as a jpeg and resize and optimize it that would help with your upload speeds :wink:

Yes, I know about the downsizing… that is a REAL issue because my graphic designer turned out a GIF, PNP, and JPG that were TWICE the weight of what I sent him… and the purpose was to get my 2MB size down… So, he will be working on that
tomorrow or the following day. In the interim, the problem for me is that the banner is HUGE with regard to taking up too much space… We need a banner that is “trim” – about a few inches in height, just enough to capture part of our background/banner
image, our logo that is embedded, and enough room left for the “slogan” to be labeled there. I have asked the graphic artist to embed the slogan… So, if he accommodates my requests, then my only remaining question to you is HOW to import that image that he
produces so that it stays the same size as what he sends me (which would be, ultimately, 1/3rd the height of what it is now). For shits and grins, I already trimmed that graphic down to 1/3rd the size and it still expanded to take up
too much space. The goal is for our visitors to our site to see a nice, clean graphical header with our logo AND the menus across the top as they are displayed now and immediately see the text pop up below. As it stands, there is so much graphic that you
don’t see ANY text whatsoever unless you manually scroll down. That is kind of not intuitive. Overall, I’m liking RapidWeaver… but I found it pretty much useless without Stacks… Stacks made the program much more flexible and I’m quickly becoming a big fan.
YOUR responsiveness in this forum is mind-blowingly fast! Thank you for being so responsive. I was able to get this far before hitting a wall… before I had to raise my hand for assistance… but I’m also there and this is a BIG part of my finalizing of the
project.

With much appreciation… James

First, I don’t recommend embedding the slogan in the image. The text won’t be indexed by search engines, and it won’t be read by screen readers used by sight-impaired visitors.

As far as your image size, since you are using a darkened overlay over the image, you can have him compress the image quite a bit. The overlay will hide any softness introduced. It should also be sized to about 1200px wide.

Part of the struggle you’re having is you’re using the Mountains theme, which is designed to have a full screen height image at the top of the website. That’s ok. You can add some CSS to get it sized the way you want.

It’ll be easier to help with the CSS once we see your next image. You can read through this previous thread about the same issue:

In that thread, Doug (@teefers) provided CSS that would also work in your case. You may have to tweak it a bit for your image and slogan.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.