3

When you search for "full stack engineer" (Keywords) and "San Francisco" (Location) along with two (or more) options such as "offer visa sponsorship" and "offer relocation", it breaks the job search result alignment. I would like to share the following screenshots to explain this better.

This is how it looks upon searching for "full stack engineer" (Keywords) and "San Francisco" (Location) without any other options from "Location" drop-down: (1st query link)

screen shot with search for keywords and location only

This is how it looks upon searching for "full stack engineer" (Keywords) and "San Francisco" (Location) along with one option i.e. "offer visa sponsorship": (2nd query link)

screen shot with search for keywords, location, and a single option

And finally, this is how it looks upon searching for "full stack engineer" (Keywords) and "San Francisco" (Location) along with two (or more) options such as "offer visa sponsorship" and "offer relocation": (3rd query link)

screen shot with search for keywords, location, and multiple options

Could this be fixed?

P.S. The query links given above will display the updated results as for # of jobs goes.

1

Thanks for pointing this out. We're fixing by changing the height property to a looser, more appropriate min-height. Should be visible shortly.

1

Here I would like to give the two possible solutions as I am not sure how exactly the original design was suppose to display the search results. There are:

A) Display the "search keywords and location options" to the left of the sort options tabs ('relevance' | 'most recent')

B) Display the "search keywords and location options" on it's own line leaving sort options tabs on the next line aligned right.

Please note that there could be possibly more better ways to achieve this result as CSS can do wonders to a design. Although my CSS code fixes the issue but it might have other drawing implications somewhere else. I didn't experiment much. I would leave this to SE's UI/UX team for further experiment.

A) To display the number of jobs available along with search keywords and location options to the left of the sort tabs ('relevance' | 'most recent') apply the following changes to the current CSS code:

#index-hed {
    clear: both;
    height: 42px; /* changed from 35px to 42px */
}

#index-hed h2 {
    border: 0;
    margin: 0;
    padding: 0;
    float: left;
    width: 75%; /* added width */
}

#index-hed .tabNav>.-tab>a {
    font-size: 12px;
    line-height: 20px; /* changed to 20px from 12px */
    padding: 10px;
}

will produce the search results as shown in the below screenshots:

Upon searching for "full stack engineer" (Keywords) and "San Francisco" (Location) along with one option i.e "offer visa sponsorship":

enter image description here

Upon searching for "full stack engineer" (Keywords) and "San Francisco" (Location) along with two (or multiple) options such as "offer visa sponsorship" and "offer relocation":

enter image description here

Note: The sort options tabs ('relevance' | 'most recent') got little taller to accommodate the multi-line options i.e. # of jobs available, search keywords and location options but it does produces a clean and tidy result.

Now lets move on to the second possible solution.

B) To display the number of jobs available along with search keywords and location options on it's own line apply the following changes to the current CSS code:

.list {
    margin: 0;
    padding: 0;
    clear: both; /* add this -- No floating elements on either side */
}

#index-hed h2 {
    border: 0;
    margin: 0;
    padding: 0px 0px 2px 0px;  /* added 2px bottom-padding so it doesn't touch the sort options tabs below */
    float: left;
}

will produce the search results as shown in the below screenshots:

Upon searching for "full stack engineer" (Keywords) and "San Francisco" (Location) along with one option i.e. "offer visa sponsorship":

enter image description here

Upon searching for "full stack engineer" (Keywords) and "San Francisco" (Location) along with two (or multiple) options such as "offer visa sponsorship" and "offer relocation":

enter image description here

Note: Of course, you lose some screen real estate when you do the above but does produces a clean result.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .