34Views3Replies

Author Options:

Stylish: How to get the picture thumbails on the same line Answered

Picture of

I've got my phase one/first cut of de-white-spacing the new instructables layout done using Stylish. See first image.

I have shrunk the picture sizes. However I have been unable to get the photo thumbnails to go across the page. As-is they are below each other.

The new instructables layout has one larger photo on the first line, then two smaller photos on the next lie, then three smaller again on the third line. (or something like that - I haven't worked out all permutations)

Any other arrangement I tried had small images equally spaced across the page with lots of white space. See second photo.

I'm, at best, a CSS hack, any tips on how to get them aligned horizontally. I've attached the first-cut Stylish code.

3 Replies

user
MichaelAtOz (author)2018-02-09

Ahhh display:flex is what you need to get the images flowing to the right...

Select as Best AnswerUndo Best Answer

user
MichaelAtOz (author)2018-02-09

One outstanding thing is to shrink the videos, next step.
Looks like the Stylish code didn't load. Here it is:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("instructables.com") {

.article-header,
.step {
width: auto;
}

.contest-entry p,
.contest-entry .btn,
.contest-entry
{
font-size: 18px;
line-height: 18px !important;
height: auto !important;
padding:0px !important;
margin: 0px 10px 0px !important ;
justify-content: flex-start!important;
align-self: auto !important;
}

.contest-entries
{
width: 33%;
max-width: none;
}

.contest-entries img
{
display:none;
}
h2.step-title
{
height:initial;
font-size:20px;
text-align:left;
}

.step-body p
{
margin: 0px 0px 5px 0px !important;
}

.step-body li,
.step-body
{
font-size:16px;
line-height:normal; /* initial? inherit? n? %? Xpx? */
margin: 0px !important;
}

.step-body ul
{
padding: 0px 0px 0px 20px !important;
}

ul,
section h2,
.step-title
{
margin: 3px 0px 5px !important;
margin-bottom: 5px;
-moz-padding-start: 0px !important;
}


.topic-body,
.topic-body p {
font-size:16px;
line-height:normal;
margin: 3px 0px 5px !important;
}

/*
h2
{
font-size: 18px !important;
}
*/
.photoset
{
margin: 0px 0px 0px 0px;
text-align: left;
-moz-margin-start: 5px !important;
-moz-margin-end: 5px !important;
}

.photoset img {
/*align-content: flex-start;*/
max-width: 100%;
height: auto;
border-radius: 4px;
width: 33%;
}

photoset-item,
.article-header .title {
font-weight: 700;
font-size: 20px !important;
text-align: left;
text-transform: uppercase;
}

.photoset-row.cols-2,
.photoset-item.photoset-image
{
height: auto !important;
}

.photoset-cell.image-cell
{
position: inherit;
display: inherit;
height: auto !important;
}

.article-header .crumbs {
text-align: left;
line-height: normal;
margin-bottom: 0px;
}

article-header .counts {
float: left;
line-height: normal;
margin: 0px;
}

.article-header .counts p {
background-position: 0px 0px;
}

.article-header .counts {
line-height: 150%;
margin-top: 0px;
display: block;
}

.article-header .meta {
float: right;
line-height: normal;
margin: 0px;
}
.article-header {
margin-left: initial !important;
}

section::after {
display:none;
}

section {
margin: 5px !important;
}
.step-discussion {
display:none;
margin: 0px;
}
.step-discussion .btn {
padding: 0px;
}

.imadeits .made-it-btn,
.btn
{
padding: 0px;
}

.imadeit,
.imadeits li,
.imadeits p,
.imadeits li.share:only-child .share-inner {
line-height: 18px;
height: auto;
margin: 0px 0px 0px !important;
border: 0px;
position: initial;
top: initial;
transform: none;
padding-bottom: 0px !important;
}

.discussion
{

}
.discuss .actions .btn
{
margin: 0px 0px 0px !important;
padding: 0px !important;
}

.recommendations li,
.recommendations .caption,
.recommendations,
#discuss,
.discuss,
.discuss .field,
.discuss .policy,
.discussion > button,
.post,
.post .text,
.post .toolbar .btn
{
margin: 0px 0px 0px !important;
padding: 0px !important;
min-height: auto;
line-height: initial;
}
}
/* last line */

Select as Best AnswerUndo Best Answer

user
iceng (author)2018-02-09