[Support request] Mobile Header Widget

Home Forums Support [Support request] Mobile Header Widget

Home Forums Support Mobile Header Widget

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #695911
    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

    GeneratePress 2.1.4
    #696015
    David
    Staff
    Customer Support

    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;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.