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

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.


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.

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

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?

#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.

Similar Topics Statistics Last post
Header Graphic size on Responsive Theme?
by Linda from Thu Jan 18, 2018 5:01 pm
8 Replies
by Debs from SiteSell
Fri Feb 02, 2018 9:27 pm
New Header image not displaying on Mobile phone device
by Marylyn from Wed Jun 28, 2017 5:47 am
4 Replies
by Marylyn from
Fri Jul 14, 2017 8:43 pm
Header image for mobile
by Smart Kid from Mýkonos Fri Aug 18, 2017 3:07 pm
3 Replies
by Smart Kid from Mýkonos
Sat Aug 19, 2017 10:33 pm
Responsive design header won't reveal when transparent
by Dr. Jason from Mahnomen Tue Jun 27, 2017 5:31 am
5 Replies
by David from Oxfordshire
Sat Jul 01, 2017 1:17 pm
Custom responsive template issue with header
by Claude from Sat Feb 17, 2018 5:08 pm
7 Replies
by Claude from
Sun Feb 18, 2018 12:12 am

Users browsing this forum: Cath, SiteSell Content Team and 1 guest