Your site's design is the 3rd part of your site's and business's "Personality" (if you do not remember the first 2 parts, see DAY 5). Ideas for customizing Solo Build It!'s Site Designer templates, including total customization to build your own unique Site Design.

Moderators: A J from Somewhere Hot, Laura from Chautauqua

#1367186 by Mark from Lakewood, CA
Sun Mar 19, 2017 5:52 am
Hello,

I've uploaded a custom header to my new site and the header image gets cut off depending on what device it is being viewed in.

How do we make our custom headers responsive?

Thanks in advance!
#1367194 by Debs from SiteSell
Sun Mar 19, 2017 1:36 pm
Hi Mark,

Have you tried making a mobile header and uploading that to the mobile version of your site?

If not, try it and see if it works.

Mobile version is accessible by selecting it from the dropdown in Site Designer. It sits just
after the "Switch to Gallery" and "Info" buttons upper left.

You want to be sure your mobile header isn't very tall, you need to show content above the
fold and it is harder to do on mobile.

Debs

P.S. I moved your thread to here from BB2 as this is about
Site Designer.
#1367228 by Mark from Lakewood, CA
Sun Mar 19, 2017 9:54 pm
Hi Deb,

Thanks for the reply. How do I differentiate the header images? Is there a special code that designates a mobile header versus a desktop header?
#1367240 by Mark from Lakewood, CA
Mon Mar 20, 2017 12:11 am
Hi Will,

The site is [Domain Private]

I read through some other (dozens) of posts and found information on the auto/cover/contain sizing. I chose the "contain" size and it seemed to do the trick but it begs another question.

My header now seems to adjust based on the mobile device, but in some device browsers, it is significantly small and looks awkward.

Is this normal? Also, I'm now concerned about my information 'above the fold'.

Here's to trying to solve these problems...BEFORFE my site is built.

Thanks in advance, and apologies for my lack of knowledge.
#1367247 by Will from Los Ojos
Mon Mar 20, 2017 1:07 am
Hi Mark,

I was going to suggest "contain or cover" :)

You've played with the website name and tagline, by turning them white and then to zero opacity. This means you can't see them anymore, but they still take up physical transparent space This is pushing your Header down the page, and is responsible for the white gap at the top. You need to remove the words and set all margin and padding to zero.

The image blocks also mean you haven't got any text information above the fold. It's difficult to know what this page is about on a mobile, without scrolling a long way. I think you need some words just below the H1 heading to make people feel they've come to the right page. At the moment, it takes 4 screens down before you get any text. This leads to uncertainty - all you're offering when they arrive is a link off to somewhere else. I reckon only 50% of your mobile visitors will get as far as the second or third screens down. Mobile is tough.

Will
#1367270 by Mark from Lakewood, CA
Mon Mar 20, 2017 4:55 am
Will,

First off - thank you for the advice. Definitely useful. If you could, I wanted to clarify a couple of things:

1. I set top and bottom margins and padding to 0.
2. I left the left/right margins and padding at default.
3. I went to each device and adjusted the header size to fit.
4. All devices have the header set to "contain".

Does this sound like I did it correctly?

Also - I noticed your site provides services. What is your standard rate?

Thanks!
#1367329 by Will from Los Ojos
Mon Mar 20, 2017 10:57 pm
Hi Mark,

Yes, it looks like you're on the right track :) The mobile certainly looks better. That bit of text makes all the difference. I looked back at some old Heatmaps of mobile pages that I've got on file, and the drop off down the page is very marked. Whether someone scrolls down the page depends enormously on whether they judge that the page answers their search intent. So you need to give them that cue right there when they land on the first screen.

I'm also a member of SiteSell Pros, and, if you're interested in getting any work done, you'll find the rates are available through this link.
http://pros.sitesell.com/

Will
Similar Topics Statistics Last post
Responsive design header and menu problem
by Kate from Sparrows Point Sat Nov 12, 2016 5:51 pm
1 Replies
487 Views
by Laura from Chautauqua
Tue Nov 22, 2016 6:10 pm
How do I resize and upload a custom header background image (logo) and add a tag line?
by Linda from Hazen Sat Feb 25, 2017 5:31 am
9 Replies
792 Views
by Debs from barkinista.com
Sat Mar 04, 2017 5:06 pm
How to go responsive with header?
by Linda from wrinkle-free-skin-tips.com Wed Sep 07, 2016 9:54 pm
8 Replies
480 Views
by Scott from Clarence
Fri Sep 16, 2016 10:07 am
New Header image not displaying on Mobile phone device
by Marylyn from family-getaways-melbourne.com Wed Jun 28, 2017 5:47 am
4 Replies
197 Views
by Marylyn from family-getaways-melbourne.com
Fri Jul 14, 2017 8:43 pm
Responsive design header won't reveal when transparent
by Dr. Jason from Mahnomen Tue Jun 27, 2017 5:31 am
5 Replies
232 Views
by David from Oxfordshire
Sat Jul 01, 2017 1:17 pm

Users browsing this forum: No registered users and 5 guests