Responsive Design Layout for Homepage

etidd · April 27, 2014, 1:39am

Ronpat,

Added e-mail box graphic.The graphic over-extends and looks terrible on a mobile device, but good on normal desktop. Do I need to chop the e-mail graphic into 3 pieces? That should be simple enough.

Wondering why the <h3> inside of .leftwing and .rightwing won’t take on the text shadow that I tried to apply.

Also, the drop down menus don’t unfold and show the child list. I will make a wild guess here, but is that because of the clearfix? Also, I tried changing the font-sizes for the main-level list items, and they are still extremely huge and wrap when viewed on a mobile device.

Thanks,
Ty :goof:

ronpat · April 27, 2014, 2:21am

I see the green text-shadow inside the wings just fine.

Regarding “clearfix”… think of it as a device that comes to your rescue when “overflow:hidden” won’t work, such as in some dropdown menus. “clearfix” is unlikely to be a problem.

etidd · April 29, 2014, 4:08pm

Ronpat,

Okay. I understand that there will be a little bit of JS involved, and I should be able to do that even by myself. It may only be one or two lines of code to do something like change the style sheet from dropdownmenus.css to dropdownsmobile.css, and that may be all it takes. I’ll get to that in a later post, but right now I’m focused on the e-mail submission box.

The graphics don’t want to display. I have used the following styles:


#singupbox:before{
	background:url("emailboxleft.gif") transparent no-repeat 0 0;
	width:110px;
	height:100px;
	border-radius:0 0 16px 16px;
}
#signupbox {
    /*border:8px solid #d44;
    background-color:rgba(255,160,160,.6);  /* TEST */
	background:url("emailboxcenter.gif") transparent repeat-x 0 0;
    width:70%;
    height:100px;   /* UNNECESSARY after content is added */
    text-align:center;   /* if needed */
    margin:0 auto;
}
#signupbox:after{
	background:url("emailboxright.gif") transparent no-repeat 0 0;
	width:114px;
	height:110px;
}

ronpat · April 30, 2014, 2:43am

I do not use IDs unless they are needed for JavaScript or form references or fragment identifiers for on-page anchors. Change the hash marks to dots and see if that makes a difference. I have not tried it.

Also, the green text-shadow needs a comma in the middle.


.leftwing h3, .rightwing h3 {
	text-shadow:1px 2px 1px #0C0[color=green],[/color] 2px 3px 4px #093;
}

etidd · April 30, 2014, 4:12am

Okay. Updated the files again. I’m seeing the middle piece of the sign up box, but not the :before or :after targets. There was a typo in the :before element in the first code, but fixing that didn’t make it display.

I’m also looking for some ideas for responsive nav menus. Here and [URL=“http://i11.photobucket.com/albums/a197/alienws88/menubg2test_zpsdee00090.png”]here are some screenshots with what we could do with the background graphics. There are vertical background bars there to change to using the background-position property using a media query at smaller viewport sizes, correct? I guess JS would be used to remove the child menu content at the smaller widths, and then just another media query in CSS could have the main items just stack vertically using the display property?

ronpat · May 1, 2014, 4:52am

For the signupbox…

Delete the :before and :after code.

Try this instead:


.signupbox {
    width:96%;
    height:100px;
    background-image:url("emailboxleft.gif"),url("emailboxright.gif"),url("emailboxcenter.gif");
    background-position:0 0,100% 0,50%, 0;
    background-repeat:no-repeat,no-repeat,repeat-x;
    border-radius:0 0 16px 16px;
    position:relative;
    text-align:center;
    padding:0 30px;
    margin:-12px auto 0;
}

Realize that this is not a very “fluid” design. The width can change but the height of your graphic is fixed. How would you need to construct the graphic so the signupbox could adapt to changes in the height of its contents, too? (that’s a challenge )

etidd · May 1, 2014, 11:03pm

Yes, this definitely puts the pieces together.

To adapt to the changing heights, the only thing I can think of would be to break the graphic up into more, smaller files (adding a middle section). I don’t know of any other ideas that don’t result in a fluid design.

ronpat · May 3, 2014, 4:36am

You’ve probably made the best choice already considering the irregular shape of the bottom line and the low likelihood that much vertical resizing will occur in this box.

But just in case some does…
I extended the height of the three graphics that you created and modified the CSS slightly. This will more than double the usable fluid height of that container.

https://www.dropbox.com/sh/rcq9yw46mgtsxnu/HKfyNAWNL9
In the “SignUpGraphics” folder.

Change the .signupbox CSS to this:


.signupbox {
    width:96%;
    background:
        url('emailboxleft1.gif') no-repeat 0 100%,
        url('emailboxright1.gif') no-repeat 100% 100%,
        url('emailboxcenter1.gif') repeat-x 50% 100%;
    border-radius:0 0 16px 16px;
    text-align:center;
    padding:1px 30px 24px;  /* top padding > 0 is required */
    margin:-12px auto 0;
}

etidd · May 4, 2014, 5:57pm

Yes, this definitely looks like the optimal solution for the sign up box, though the form element can afford a little padding. I see that there is no fixed height any longer.

I’ve updated the test site files.

I’m still trying to figure out a nav menu solution. They look terrible on mobile devices.