This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Controlling Widgets Right of Logo for small media screens

  • Creator
  • #5766

    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 ( 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:

Viewing 1 replies (of 1 total)
  • Author
  • #5781
    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”. —

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

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.