Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 30, 2013 at 1:00 am #12545
    maklbacon
    Participant

    Great theme & Support!

    http://www.columbiapregnancycenter.com/

    1) When using a smart phone, the social icons and search bar are stacked in the header, even though there is room for the social icons and search bar on one line. Is it possible to force them to the same line?

    2) I was previously limiting the page width to 950px (#page { max-width: 950px; }), but when I added the map to the contact page it always dropped to the bottom as if there was no room. Yet after I removed the 950px limit, the contact page with the map on the side was no wider that when limited to 950px. Is there a way to limit the page width without affecting its responsive ability?

    Thanks! Mike

    July 30, 2013 at 4:58 pm #12567
    Sakin
    Keymaster

    @maklbacon:
    1. About the header right social icons and search. It is designed that way. Can you send me screenshot of how you want to make it in your mobile devices and which device you use.

    2.You can add the following css in “Appearance => Theme Options => Custom CSS” box.

    @media     screen and (min-width: 1100px) {
    .site { width: 950px; }
    #primary { width: 550px; }
    }

    July 31, 2013 at 10:25 am #12609
    maklbacon
    Participant

    1) Not sure how best to send you the jpgs. Does that work?

    current view
    http://www.columbiapregnancycenter.com/?attachment_id=678

    potential change, i don’t care which is one is left or right.
    http://www.columbiapregnancycenter.com/?attachment_id=679

    2) The width change worked great, thanks!

    July 31, 2013 at 10:26 am #12610
    maklbacon
    Participant

    I have used iphone3 with safari and android 2.3.5 with Firefox. They both look similar.

    July 31, 2013 at 11:52 pm #12628
    Sakin
    Keymaster

    @maklbacon: You can add the following CSS in “Appearance => Theme Options => Custom CSS” box

    @media screen and (max-width: 767px) {
#header-right .widget { display: inline; float: left; }
#header-right .widget_search { clear: none; margin-left: 10px; }
.header-sidebar #s:focus { width: 72px; }
}
    August 1, 2013 at 12:07 am #12630
    maklbacon
    Participant

    Sweet, Thanks!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Responsive Header & Width’ is closed to new replies.