Show 2 or 3 products in one line.

[ibrahim]

Help to show the Files Layout to show 2 or 3 products in one line.
I have tried many hours so its worked but still I get some layouts problems. See screenshot the difference between two pages!

Am using on Files: Standard Files Layout v3.2 (active), I edited to be as:

Code Select Expand


<div class="front-items">
<div class="{featured_class} jd_download_title">
<div class="jd_download_title">&nbsp;</div>
<div class="jd_title_block">{file_pic}{file_title}{release}{pic_is_new}{pic_is_hot}{pic_is_updated}</div>
<div class="tags" style="float: right; font-size: 14px;">{tags}</div>
<div class="jd_rating">{rating}</div>
<div class="jd_featured_pic">{featured_pic}</div>
</div>
<div class="jd_download_wrapper">
<div class="{featured_detail_class}  jd_description_wrapper">
<div class="jd_image_right">{screenshot_begin}
<a href="{screenshot}" rel="lightbox"><img src="{thumbnail}" alt="" /></a>{screenshot_end}</div>
<div class="jd_download_description">{description}</div>
{preview_player}{mp3_id3_tag}</div>
<div class="jd_minipic_wrapper">
<div class="jd_files_minipic">{author_text}</div>
<div class="jd_files_minipic">{created_date_value}</div>
<div class="jd_files_minipic">{language_text}</div>
<div class="jd_files_minipic">{hits_value}</div>
<div class="jd_files_minipic"><strong>{price_value} €</strong></div>
<div class="xtypo_button3" style="text-align: right;">{link_to_details}</div>
</div>
</div>
</div>


And on template CSS I added:

Code Select Expand


.front-items {
max-height: 353px;
    padding-right: 10px;
    padding-top: 10px;
    padding-left: 10px;
    float: left;
    background-color: #2a2b2c;
    clear: none;
    width: 50%;
    min-height: 310px;
    margin-bottom: 5px;
    border: 0.01em solid #111;
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 0;
    text-rendering: optimizespeed;

}

@media (max-width: 1200px) {
.front-items {
    width: 100% !important;
    min-height: 100px !important;
    height: auto !important;
    max-height: 100% !important;
}
}
@media (min-width: 1200px) {
.front-items {
    min-height: 440px !important;
    height: auto !important;
    max-height: 100% !important;
}
.jd_description_wrapper {
    min-height: 240px !important;
}
.jd_image_right {
    min-height: 100px !important;
}
}
@media (min-width: 1500px) {
.front-items {
    min-height: 440px !important;
    height: auto !important;
    max-height: 100% !important;
}
.jd_description_wrapper {
    min-height: 240px !important;
}
.jd_image_right {
    min-height: 100px !important;
}
}
.jd_sort_order {
    text-align: left !important;
    float: none !important;
}
.jd_password {
    background: #333333;
    width: 280px;
}
}


I Would Really Appreciate Your help! I need to solve this asap!

[gelöscht durch Administrator]