[Resolved] CSS padding for search field on desktop view

Home Forums Support CSS padding for search field on desktop view

  • This topic has 2 replies, 2 voices, and was last updated 4 months ago by Matthew.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1289608
    Matthew

    Used some CSS to modify the search widget adding a submit button and so the search field and submit button are next to each other and take up the width of the sidebar.

    Looks OK on desktop:

    https://drive.google.com/open?id=1xUuMNLqcL7a-2u8KI6n4VeREneIh3CgU

    But the left padding I set results in the search field butted right up against the left side of the screen on mobile.

    Can padding-left be done to apply it for desktop only?

    .sidebar .widget_search {
        background: transparent;
        padding-right: 0;
        padding-left: 0;
    }
    
    .widget .search-field {
        width: 69%;    
    }
    
    .widget_search .search-submit {
        display: inline-block;
        background: #cc2229;
        padding: 10px;
    }

    thanks,

    #1289749
    David
    Staff
    Customer Support

    Hi there,

    you can @media queries to wrap your CSS for responsive control:

    https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

    For example if you changed this which applies everywhere:

    .sidebar .widget_search {
        background: transparent;
        padding-right: 0;
        padding-left: 0;
    }

    to this – it would only apply to tablet and desktop:

    @media(min-width: 769px) {
        .sidebar .widget_search {
            background: transparent;
            padding-right: 0;
            padding-left: 0;
        }
    }
    #1289907
    Matthew

    Impressive. Who thinks of this stuff.

    Thanks for the explanation!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.