Fix advanced search button on large screens
Since we were using `position: absolute` to position the button to the right, we were assuming there was enough screen space on the left so other elements (mainly, order selector links) could be there. However, that wasn't always the case. In some languages, the texts appearing on the left of the button were much larger than in English, meaning their text and the button text could overlap. Even in English, users could experience the same issue depending on their font size preferences and the size of their screens. The easiest solution is to move the button to its own line, so its text doesn't overlap.
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
.advanced-search-form {
|
||||
@include grid-row-nest;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include breakpoint(large) {
|
||||
.filter {
|
||||
@@ -32,13 +33,12 @@
|
||||
cursor: pointer;
|
||||
margin-top: $line-height;
|
||||
margin-bottom: $line-height;
|
||||
max-width: max-content;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
float: right;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 0;
|
||||
margin-top: $line-height / 4;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
|
||||
Reference in New Issue
Block a user