Jump to content
  • 0
spiros

Change results snippet layout

Question

Currently the snippet is like this (MW 1.31)

com-pŏs: (conp-), pŏtis, adj. potis, I having the mastery, control, or power over a thing, master of, partaking of, possessing, participating or sharing
6 KB (891 words) - 12:19, 15 August 2017

How could it be changed in a two column table format (applying a style to the list items) and get rid of the date/size info line?

compos com-pŏs: (conp-), pŏtis, adj. potis, I having the mastery, control, or power over a thing, master of, partaking of, possessing, participating or sharing

I have tried some css changes, got rid of the unwanted metadata bit (size/date), but when page is resized, some text from the right "column" moves to the left one.

.mw-search-results li {
    columns: 2;
    border-bottom: 1px dotted #555;
    padding: 5px 0;
}

.mw-search-result-data {
    display: none;
}

.mw-search-results {
    /* max-width: 38em; */
}

 

Above, quoted only the part of the css I edited.

For example this is what I want to be maintained in different screen sizes: https://imgur.com/bGrtm1H but when it gets smaller; this is what I get now with some screen sizes/changes of zoom https://imgur.com/YQAzMNH

Edited by spiros (see edit history)

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0
.mw-search-result-data {
  display: none;
}

.mw-search-result {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}

.mw-search-result-heading {
  border: 1px solid black;
  padding: 0.5rem;
  width: 25%;
}

.searchresult {
  border: 1px solid black;
  padding: 0.5rem;
  width: 75%;
}

You may find the above to be useful as a starting point. This is still missing a couple of things, such as sizing on mobile screens (you'll need to add some @media queries to break on screen size and provide relevant CSS for smaller devices -- the flexbox layout will let you easily collapse it back into multiple rows with the heading on one row and the result underneath rather than side-by-side)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.