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
    Topic
  • #5766
    magicss
    Participant

    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

Viewing 1 replies (of 1 total)
  • Author
    Replies
  • #5781
    Jason Bobich
    Keymaster

    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

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