Search bar results alignment, mobile view

[Alliance]

Hi guys,

I would like to fix the following issues for the search bar results in mobile view:

1- allign price in the column.

2- add row border.

3- center images in the column.

4- backgroud color of the number of results: black, font color: White, cancel button"X": White

[Ujjaval]

@Alliance
put below css into your css file

.price--on-sale .price__sale {
    white-space: nowrap;
    flex-wrap: wrap !important;
}

.predictive-search {
    height: 100%;
    text-align: left;
    border: solid 1px;
}

[Alliance]

Mobile view?

[Ujjaval]

yeah

@media (max-width:481px) 
{
.price--on-sale .price__sale {
    white-space: nowrap;
    flex-wrap: wrap !important;
}

.predictive-search {
    height: 100%;
    text-align: left;
    border: solid 1px;
}
}

[Alliance]

Unfortunately, didn’t work. Please share screen shot if possible. Thank you

[Simonsron]

@media only screen and (max-width: 749px){
 .list-view-item{
    border-bottom:1px solid #000;
  }
.list-view-item__image-wrapper{
   margin-left:0;
   text-align:center;
}
.list-view-item__price-column{width:30%;}
dl.price.price--listing.price--on-sale{padding-right:0 !important;}
.price--on-sale .price__sale{
    white-space: normal;
    flex-wrap: wrap !important;
    justify-content: center;
}
.list-view-item__price-column .price{align-item:center;}
}

You can try this!

[Alliance]

This is the code given by one of the community, it affected the brands section. It created gap between brands logos.

.list-view-item__image-column {

border-right: 1px solid !important;
}

.page-width {

padding: 0 !important;

}

.predictive-search__column.predictive-search__column–content {

display: flex;

flex-direction: unset;

flex-wrap: unset !important;

}
dl.predictive-search-item__details.price.price–on-sale{
display: flex !important;

align-content: flex-end;

}

ul.page-width.list-view-items {

border-right: 1px solid;

border-top: 1px solid;

border-left: 1px solid;

border-bottom: 1px solid;

}

li.list-view-item {

padding: 0;
margin: 0;
}
.list-view-item__price-column {

border-left: 1px solid;
}

.list-view-item__title {

padding-left: 30px;

}
dl.price.price–listing.price–on-sale {

padding-right: 20px !important;
}

[Alliance]

This mine. I guess needs some adjustment

[Simonsron]

The first image is because it doesn’t override the original style, because as you say, I don’t know if this class name of yours will be used by any other dom elements, so I can’t tell you to go to eboost.css and delete the css style!

[EBOOST]

@Alliance

Update code below

@media screen and (max-width: 749px){
   
    #shopify-section-1580280662236 ul.logo-bar li.logo-bar__item {
      width: calc(50% - 15px);
      display: inline-block;
      margin-bottom: 10px;
      position: relative;
      margin-left: auto;
      max-width: none;
    }
    #shopify-section-1580280662236 ul.logo-bar li.logo-bar__item:nth-child(2n+1){
      margin-right: auto;
      margin-left: 0;
    }
    #shopify-section-1580280662236 .logo-bar__image {
      display: block;
      margin: 0 auto;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      padding-left: 5px;
      padding-right: 5px;
    }
}