[Support request] Mobile Header Widget

[Niklas]

Hello Generatepress-Team,

i am happy with the layout of the Desktop header of my side.
If it comes to responsive Layout on mobile there are some problems i am not able to solve..

1. On displays smaller than 768px the search button is placed under the search field. I’d like to have in one line.
   
2. At a displays between 768px and 1030px the header overlap the widget
   
3. On mobile there are round corners at the searchfield. I’d like to have sharp cornes like it is on deskop.
   

I have been trying to solve these problems for many days and can’t get any further. I would be very grateful for help!

I’ve used the following custom css CSS:

@media (min-width: 768px) {

.header-widget .widget button{
  float:left
}

.site-logo {
    float: left;
    max-width: 70%;
  display: inline-block;
  }

.header-widget {
    float: none;
    width: 300px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    position: absolute;
    bottom: 30px;
  	right:40px;
  }

.inside-header {
        position: relative;
    }
  
  .header-widget .widget_search .search-submit {
  display: inline-block;
  margin-left:0px;
  }

.header-widget .widget {
padding: 0 0 6px;
margin-bottom: 0;
}

.header-widget .widget .search-field {
  max-width: 200px;
  display: inline-block;
  float:left;
  }
}

Best Regards
Niklas

[David]

Hi there,

try removing this CSS within the media query – this will stop the logo and widget from overlapping:

.header-widget {
    float: none;
    width: 300px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
    position: absolute;
    bottom: 30px;
    right: 40px;
}

.inside-header {
    position: relative;
}

and replacing it with:

.inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.header-widget {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    margin-left: 40px;
}

For the search bar / button to remain inline:

.woocommerce-product-search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

And to stop iOS from rounding the corners try this:

input[type="search"] {
    -webkit-appearance: none;
    border-radius: 0;
}

[Author]

Posts