Title section site header alignment issues

kbevphoto

Hey all -
I have ditched the rotating photos at the top of my page and decided to go with a series of randomly generated banners of photos (collages). thanks to the community (Allen) for showing the way to do it.

I have two lingering issues with my new page that I can't figure out:

1. The alignment of the social buttons (underneath the KBevPhoto icon) is poor. I'd like for it to be directly centered under it, and have the two of them lined up cleanly with the collage. I don't even see where to do this, much less how.

2. On mobile devices, the collage is sizes reasonably well. On computer screens, it is smallish and doesn't grow, although it'll shrink. at 3000px across, I think it is big enough to grow larger, but it seems bound by the HTML box it's in.

Any help would be much appreciated. I had a previous post about removing the collage altogether, but since it shrinks in mobile devices, I'm fine keeping it (although nobody replied with help to that post anyway!)

The site with collages is here: http://kbevphoto.com

Thanks for the help. Always grateful.

Allen

I think to get your social icons like you want you'll probably need to add them and KBevPhoto icon in a
single html box.

You can add all the widgets you want in a row but the tallest widget sets the row height and nothing in
the next row can overlap that. This was brought up almost on day one of new Smug but they never came
up with a solution of layout options like this.

denisegoldberg

kbevphoto wrote: »

2. On mobile devices, the collage is sizes reasonably well. On computer screens, it is smallish and doesn't grow, although it'll shrink. at 3000px across, I think it is big enough to grow larger, but it seems bound by the HTML box it's in.

I just took a look at your site on my phone. I was a bit disconcerted that your logo and collage took up all of the vertical space on my phone (other than the menu entry, that is). That means when I enter a gallery I always need to scroll a full screen before I see any photos. At first I thought there weren't any photos to be seen.

On a large screen monitor with the browser window maximized your header (logo + collage + menu and search box) uses half of the available vertical space.

I know it's likely just my own personal bias, but I prefer to see the site content (not the logo and header) using most of the viewable space.

--- Denise

kbevphoto

denisegoldberg wrote: »

I just took a look at your site on my phone. I was a bit disconcerted that your logo and collage took up all of the vertical space on my phone (other than the menu entry, that is). That means when I enter a gallery I always need to scroll a full screen before I see any photos. At first I thought there weren't any photos to be seen.

On a large screen monitor with the browser window maximized your header (logo + collage + menu and search box) uses half of the available vertical space.

I know it's likely just my own personal bias, but I prefer to see the site content (not the logo and header) using most of the viewable space.

--- Denise

I agree that the "screen 1" on the phone being taken up by all the logo stuff is not great. That was my earlier post about being able to have two different title versions. If I could figure out how to do that, I would. A mobile title would be much slimmer. It look fine on my mac and my pc laptop...

You should have seen it before the Grinners told me how to turn off and hide the 4 slideshow widgets that were rotating photos. you had to scroll 4-5 screens to get to content! It was horrible.

Just our of curiosity, what type of phone are you using and how does it look on a tablet?

kbevphoto

Allen wrote: »

I think to get your social icons like you want you'll probably need to add them and KBevPhoto icon in a
single html box.

You can add all the widgets you want in a row but the tallest widget sets the row height and nothing in
the next row can overlap that. This was brought up almost on day one of new Smug but they never came
up with a solution of layout options like this.

They're not clickable if I put them in the HTML widget though, right? I can set the one image with the icons embedded, but then the click will all point to the same spot.

Or are you saying i can add all 4 (logo plus 3 social icons) in the same HTML widget?

Allen

kbevphoto wrote: »

They're not clickable if I put them in the HTML widget though, right? I can set the one image with the icons embedded, but then the click will all point to the same spot.

Or are you saying i can add all 4 (logo plus 3 social icons) in the same HTML widget?

I would think you can add all in the one widget.

denisegoldberg

kbevphoto wrote: »

I agree that the "screen 1" on the phone being taken up by all the logo stuff is not great. That was my earlier post about being able to have two different title versions. If I could figure out how to do that, I would. A mobile title would be much slimmer. It look fine on my mac and my pc laptop...

I would argue that it doesn't look fine on a computer given that your logo, collage and menu take up half of the available vertical space. Again, it looks like you are trying to highlight your header instead of your photos.

I know, I know, that's a personal feeling. But again, what you are trying to highlight?

kbevphoto wrote: »

Just our of curiosity, what type of phone are you using and how does it look on a tablet?

I am using a Windows phone.

To see how your site looks on different sized devices you might try this tool - http://quirktools.com/screenfly/.

--- Denise

kbevphoto

denisegoldberg wrote: »

I would argue that it doesn't look fine on a computer given that your logo, collage and menu take up half of the available vertical space. Again, it looks like you are trying to highlight your header instead of your photos.


--- Denise

Can you post a screen shot of what you see? On both of my screens, the "banner" isn't that large. i'm just curious what you see.

This way I can tell if you're crazy or not (kidding)

denisegoldberg

kbevphoto wrote: »

Can you post a screen shot of what you see? On both of my screens, the "banner" isn't that large. i'm just curious what you see.

This way I can tell if you're crazy or not (kidding)

Did you try the tool I suggested in my last post? That allows you to see your site using different sized monitors, phones, and tablets.

Again, half of the vertical space it taken up by your logo and banner. The viewer's eyes are drawn to the top of the screen, not to your photos. Obviously it's your choice; I was just pointing out something that I believes takes away from the presentation of our photos.

--- Denise

kbevphoto

denisegoldberg wrote: »

Did you try the tool I suggested in my last post? That allows you to see your site using different sized monitors, phones, and tablets.

Again, half of the vertical space it taken up by your logo and banner. The viewer's eyes are drawn to the top of the screen, not to your photos. Obviously it's your choice; I was just pointing out something that I believes takes away from the presentation of our photos.

--- Denise

Thanks. I will, but haven't yet. I used up my free time last night redoing the title to put it all in a single HTML widget. That solution works much better. I just need to go back and add the social icons to it.

Honestly, I have so much variety on the site that I don't mind the "choose your own path" nature of it. Not everyone wants to see my "showcase" right up front - which is for the best given the range of subjects. The links from my separate IG feeds (for my main topics) lead directly to the right subpages, which helps.

denisegoldberg

kbevphoto wrote: »

Thanks. I will, but haven't yet. I used up my free time last night redoing the title to put it all in a single HTML widget. That solution works much better. I just need to go back and add the social icons to it.

Honestly, I have so much variety on the site that I don't mind the "choose your own path" nature of it. Not everyone wants to see my "showcase" right up front - which is for the best given the range of subjects. The links from my separate IG feeds (for my main topics) lead directly to the right subpages, which helps.

Here's a screen shot from my phone.

--- Denise

denisegoldberg

And here's a screen shot with the browser maximized on my large monitor.

This was after you had reworked your header. Note that the header still uses half of the available vertical space.

kbevphoto

denisegoldberg wrote: »

And here's a screen shot with the browser maximized on my large monitor.

This was after you had reworked your header. Note that the header still uses half of the available vertical space.

Thanks. I'm not sure why your phone looks that way, mine does look a lot different. I'm OK with the way it looks on the screen (my giant monitor doesn't give a normal POV though).

I appreciate you posting those. I'll peek on that site too. I'll post a phone pic when I get a moment.