horizontal CSS

  • r510757

    (@r510757)


    7 years, 4 months ago

    Hi there,

    Two Questions:

    1. Is it possible to get the search button inline with the year/make/model selection?
    Example Year Make Model Search

    2. Is it possible to make it responsive so on mobile they drop below each other?
    Example:
    Year
    Make
    Model
    Search

    • This topic was modified 7 years, 4 months ago by r510757.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Pektsekye

    (@pektsekye)

    7 years, 4 months ago

    Hello,

    Try to update the content of the file:
    wp-content/plugins/ymm-search/view/frontend/web/main.css

    with:

    

.ymm-selector.ymm-box .ymm-garage {margin-bottom:10px}
.ymm-selector.ymm-box .ymm-garage .ymm-garage-select {width:auto; margin:0; color: #575757;}
.ymm-selector.ymm-box select.ymm-select,
.ymm-selector.ymm-box select.ymm-category-select {width:100%; margin:0 0 8px 0; color: #575757; font-size: 16px;}
.ymm-selector.ymm-box select.disabled { border-color:#bbb !important; background:#bbb !important; }

.ymm-selector.ymm-box .ymm-extra.or-search select.ymm-category-select:last-child {margin-bottom:2px;}
.ymm-selector.ymm-box .ymm-extra .ymm-search {margin:0;}
.ymm-selector.ymm-box .ymm-extra .ymm-search .ymm-or-search{display:none;}
.ymm-selector.ymm-box .ymm-extra.or-search .ymm-search .ymm-or-search {display:block;}
.ymm-selector.ymm-box .ymm-extra .ymm-search table {width:100%;}
.ymm-selector.ymm-box .ymm-extra .ymm-search table td.ymm-td-input  {padding:0;}
.ymm-selector.ymm-box .ymm-extra .ymm-search table td.ymm-td-input input {width:100%; max-width:none;}
.ymm-selector.ymm-box .ymm-extra .ymm-search table td.ymm-td-button  {width:1px;white-space: nowrap;padding:0 0 0 9px;}
.ymm-selector.ymm-box .ymm-submit-any-selection {margin-top:0;}

.ymm-selector.ymm-horizontal {float:none !important; width:100% !important; padding:0 !important; margin:0 !important;}
.ymm-selector.ymm-horizontal .ymm-title  {float:left;}
.ymm-selector.ymm-horizontal .ymm-title .widget-title { padding:0 !important; margin:0 !important; border:none !important;}
.ymm-selector.ymm-horizontal .ymm-title-right {float:right; margin:3px 1.2% 0 0;}
.ymm-selector.ymm-horizontal .ymm-title-right .ymm-garage-select {width:auto; margin:0; color: #575757;} 
.ymm-selector.ymm-horizontal .block-content {display:table;}
.ymm-selector.ymm-horizontal .level {display:table-cell; vertical-align: middle; margin:0; width:33.3%;}
.ymm-selector.ymm-horizontal .level select.disabled { border-color:#bbb !important; background:#bbb !important; }
.ymm-selector.ymm-horizontal .level select.ymm-select,
.ymm-selector.ymm-horizontal .level select.ymm-category-select {width:97%; margin:0; color: #575757; font-size: 16px;}
.ymm-selector.ymm-horizontal .level select.ymm-category-select {margin-top:8px;}
.ymm-selector.ymm-horizontal .ymm-extra .ymm-search {margin:6px 1% 0 0;}
.ymm-selector.ymm-horizontal .ymm-extra .ymm-search .ymm-or-search{display:none;}
.ymm-selector.ymm-horizontal .ymm-extra .ymm-search.or-search {margin-top:2px;}
.ymm-selector.ymm-horizontal .ymm-extra .ymm-search.or-search .ymm-or-search{display:block;}
.ymm-selector.ymm-horizontal .ymm-extra .ymm-search form,
.ymm-selector.ymm-horizontal .ymm-extra .ymm-search table {margin:0;}
.ymm-selector.ymm-horizontal .ymm-extra .ymm-search table td.ymm-td-input  {padding:0;}
.ymm-selector.ymm-horizontal .ymm-extra .ymm-search table td.ymm-td-input input {width:100%; max-width:none;}
.ymm-selector.ymm-horizontal .ymm-extra .ymm-search table td.ymm-td-button  {width:1px;white-space: nowrap;padding:0 0 0 9px;}
.ymm-selector.ymm-horizontal .ymm-submit-any-selection {margin-top:0;}
.ymm-selector.ymm-horizontal .ymm-clear {clear:both;height:1px;}

@media only screen and (max-width: 640px) {
.ymm-selector.ymm-horizontal .block-content {display:block;}
.ymm-selector.ymm-horizontal .level {display:block; width:100%;}
.ymm-selector.ymm-horizontal .level select.ymm-select {margin:0 0 8px 0;}
}

    Disable category drop-downs and search text field in:
    WordPress dashboard -> YMM Search -> Configuration

    Stanislav

Viewing 1 replies (of 1 total)

The topic ‘horizontal CSS’ is closed to new replies.