Controlling Widgets Right of Logo for small media screens

[magicss]

I am having trouble Controlling the Widgets in the Widget Area I made using JumpStart (child theme) at the Header, to the right of the Logo.

First, I followed the directions you gave us in this forum (http://support.themeblvd.com/forums/topic/customizations-how-to-replace-header-social-icons-with-widget-area/). It worked. I learned how to control the placement of the widget area (to some extent) using CSS. Now when I make the Chrome Browser smaller, I end up with the widgets looking silly: the top text widget part of the widget area is centered and the lower part, the contact form widget part can be either to the left or right when I set the CSS to position static and float left or float right…. But they will not function together in the center.

I would like to learn how to keep them both centered when I go to the smaller screen size.

I would like to also learn how to make the sections side by side. I want the login (text area part) to be on one side and then the other one, the contact one, to be on the other side.

I do not know how to learn this! I have tried Firebug (in Chrome, built in), and I just keep chasing my tail.
Here is the site/page in dev: http://seattle-edmonds-realestate.com/
Thanks,
-SS

Topic

[Jason Bobich]

Try something like this within your responsive styles as the site scales down:

.widget-area-collapsible .tb-contact_widget {
	float: none;
	text-align: center;
}
.widget-area-collapsible .tb-contact_widget li {
	display: inline-block;
}

Some things I noticed:

1) If you ever float anything to the right or left, it can’t sit in the center.

2) “center” is not a value of the CSS property float. If you have something floated left/right, and then you want it to sit inline, you need to set float back to default value “none”. — http://www.w3schools.com/cssref/pr_class_float.asp

3) A list item <li> is a block-level element (which is what makes up this contact widget). So you cannot center it with text-align: center unless you change its display mode to “inline-block” or “inline” which is a common trick people do when working with list items. — http://www.w3schools.com/cssref/pr_class_display.asp

[Author]

Replies