Build Your Own Business Website header image

Welcome to our Members Only Forum

You are welcome to view the content on our Forum, just scroll down to view this forum post.
If you like what you find and want to be able to post a question, please check out our subscription options.
Please feel free to search the forum using either the Google Site Search above or the forum search below.

Avatar
Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Feed sp_TopicIcon
Header responsiveness
Avatar
Deborah Savadra
Central Gulf Coast, AL, USA
Jedi
Members

Community Member
Forum Posts: 91
Member Since:
December 25, 2010
sp_UserOfflineSmall Offline
1
May 8, 2013 - 6:06 pm
sp_Permalink sp_Print

I've been creating my own skin at webdev.savadra.net following along with the course, but I'm having trouble figuring out how to make my header responsive. As it is now (as demonstrated on responsinator.com and on my own Android tablet), as the width shrinks, the menu collides (literally, overwrites) the bottom line of the header image on the left. Only once the width is below about 400px does the menu drop down beneath, and because the menu text is the same color as the page background and the blue header background doesn't expand vertically, it's invisible. Also, in some browsers/devices, the header image floats to the right instead of staying on the left like it's supposed to.

 

Any suggestions for reconfiguring this? I like the look of the menu in full screen, but responsively it's a mess.

 

(BTW, I was hoping to ask this question during the Wednesday night office hours session, but no one else ever came on. I hope everything's okay.)

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
2
May 9, 2013 - 7:55 am
sp_Permalink sp_Print

Actually, I was there and no-one showed up.  At least that's what GotoWebinar was telling me.  Very few folks had signed up and I figured they just decided not to attend.

I notice a couple of things about the "responsiveness"

1.  There is a syntax error in your code where you specify the left margin as 516 rather than 516px.

2.  You have set an absolute width for both elements that (including absolute width for the margin) that won't work properly below 1024px.

3.  You don't have media queries for less than 1024px, which means that everything that isn't set as a percentage is going to fail.

Avatar
Brian Tozer

Founding Member
Members

Community Member
Forum Posts: 1004
Member Since:
May 30, 2010
sp_UserOfflineSmall Offline
3
May 9, 2013 - 10:10 am
sp_Permalink sp_Print

Rick my Webinar got to the stage where it said that it was waiting for you, and never got any further.

I waited for 15 minutes but no change.

I hope that this will be helpfull in tracking down the problem.

Avatar
Deborah Savadra
Central Gulf Coast, AL, USA
Jedi
Members

Community Member
Forum Posts: 91
Member Since:
December 25, 2010
sp_UserOfflineSmall Offline
4
May 9, 2013 - 2:21 pm
sp_Permalink sp_Print

I'll take a look at the items you mentioned and see if I can fix them. If I can't quite figure it out, maybe we can touch on it next week?

 

(I had the same experience with GoToWebinar last night. I even logged out and logged back in from the reminder email to make sure I had clicked the right link.)

Avatar
Deborah Savadra
Central Gulf Coast, AL, USA
Jedi
Members

Community Member
Forum Posts: 91
Member Since:
December 25, 2010
sp_UserOfflineSmall Offline
5
May 25, 2013 - 6:29 pm
sp_Permalink sp_Print sp_EditHistory

Well, I fixed the 'px' problem noted above, went back through the lessons and added two additional media queries, and I'm still getting basically the same result.

 

Here's the media query code:

/* MEDIA QUERY - Tablet Landscape */
@media only screen and (max-width:1024px),
screen and (max-device-width:1024px) and (orientation:landscape)
{
    .page_wrapper
    {
        width:auto;
        padding:0 8px;
        margin:0;
    }
    .columns_321 .two_thirds_col
    {
        width:auto;
        margin-right:344px;
    }
    .columns_321 .one_third_col
    {
        float:left;
        width:344px;
        margin-left:-344px;
    }
    .columns_211 .one_half_col_left
    {
        width:auto;
        float:right;
        margin-left:516px;
    }
    .columns_211 .one_half_col_right
    {
        width:auto;
        float:left;
        margin-right:-100%;
    }
    .columns_311 .third_col_1, .columns_311 .third_col_2, .columns_311 .third_col_3
    {
    min-width:320px;
    }
}
/* MEDIA QUERY - Tablet Portrait */
@media only screen and (max-width:800px),
screen and (max-device-width:800px) and (orientation:portrait)
{
    #header_area .columns_211
       {
        float:none;
        width:100%;
        margin-right:0px;
    text-align:center;
        margin-top: 0px;
        margin-left: 0px;
    }
    .columns_321 .two_thirds_col
    {
    float:none;
        width:100%;
        margin-right:0px;
    text-align:center;
    }
    .columns_321 .one_third_col
    {
        float:none;
        width:100%;
        margin-left:0px;
    text-align:center;
    }
    .columns_311 .third_col_1, .columns_311 .third_col_2, .columns_311 .third_col_3
    {
    min-width:320px;
    }
}
/* MEDIA QUERY - Smartphone down to 320px*/
@media only screen and (max-width:500px),
screen and (max-device-width:500px)
{
    #header_area .columns_211
       {
    clear:both;
        width:100%;
        margin-right:0px;
    text-align:center;
        margin-top: 0px;
        margin-left: 0px;
    }
    .columns_321 .two_thirds_col, .columns_211 .one_half_col_right
    {
        width:100%;
        margin-right:0px;
    clear:both;
    }
    .columns_321 .one_third_col, .columns_211 .one_half_col_left
    {
        float:none;
        width:100%;
        margin-left:0px;
    clear:both;
    }
    .columns_311 .third_col_1, .columns_311 .third_col_2, .columns_311 .third_col_3
    {
    min-width:300px;
    width:100%;
        margin-left:0px;
    clear:both;
    }
}

 

My main problem remains, namely that the header image and menu collide, then menu drops down below the header area where it is unreadable.

 

Any ideas?

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
6
May 27, 2013 - 8:27 am
sp_Permalink sp_Print

So except for the margins around the menu it appears to be working correctly.  

Avatar
Deborah Savadra
Central Gulf Coast, AL, USA
Jedi
Members

Community Member
Forum Posts: 91
Member Since:
December 25, 2010
sp_UserOfflineSmall Offline
7
May 28, 2013 - 3:40 pm
sp_Permalink sp_Print

I got most of the responsiveness issues worked out thanks to @godhammer over at diythemes. Some issues remain, but they weren't serious enough to stop me from migrating to production on Memorial Day. I'm probably going to continue tweaking widget styling, etc., from there but test any bigger changes on webdev.

One issue remains: how to resize/substitute the header image in the <500px layout. Any ideas?

Avatar
Rick Anderson
Desert Hot Springs, CA
Admin
Forum Posts: 13637
Member Since:
November 8, 2009
sp_UserOfflineSmall Offline
8
May 29, 2013 - 4:34 pm
sp_Permalink sp_Print

Create a new css rule:

img{max-width:100%; height:auto;}

This will make all of your html images responsive

Forum Timezone: America/Los_Angeles

Most Users Ever Online: 228

Currently Online:
72 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

Keith W Jones: 1441

Brian Tozer: 1004

Carolin: 984

Heidi Hafner: 509

John Cunningham: 423

Reece Morrel: 353

Newest Members:

soundpilot

digitalaerolus

emma62755

sharonmarks

emma80233

Tijs de Jong

Forum Stats:

Groups: 8

Forums: 46

Topics: 7003

Posts: 34845

 

Member Stats:

Guest Posters: 6

Members: 6763

Moderators: 2

Admins: 2

Administrators: Rick Anderson, Rick Anderson

Moderators: Pierre Cote, Laura Nugent