Archived topic
CSS padding for search field on desktop view
2 replies · Started by Matthew on May 18, 2020
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,
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;
}
}Impressive. Who thinks of this stuff.
Thanks for the explanation!
