First load Scrolling content in mobile viewport to show 1.5 items like desktop

Chi-K

Oh wow that actually worked! There is one other small thing. Is it possible to remove the left right padding (Right removed if its the first results onwards) and left padding when its scrolled.

This same behavior is also already on the desktop version as well. Its an awesome stuff though even at its current iteration.

A sample from booking.com

(1) has padding because no more content left. (2) no padding because more content right.

(3) no padding as has content left, (4) has padding as no more content right

Chi-K

It would be awesome if we could control the radius as well of the 4 edges

Chi-K

I found one more little improvement that could be made.. the line height at (1) on mobile is too much, while the height between the two content (2) is too little...

Chi-K

I have also tried to add this same module in section-3 and trying to do this following modifications. How should i add these mods such that it only affects the module in section-3 and wont affect the same module further below? Thanks!

dominic

Hi Chi-K,
I have helped you update the CSS code, you can check your site now. Also, I have added the following class to the module to fix the 1-2, 3-4 issues.

About the last issue, if the module does not enable the button, we need to hide this HTML tag and I have added the "hidden-btn-group" class to the module:

Also, to resolve the color issue, you can go to the Backend > site template styles > ja alpha - default > theme color > Palettes section and edit the color for the primary section.

And I have used the following CSS code to change the color of the title and content in the items:

.item-black-color .owl-item .article-content, .item-black-color .owl-item .article-content .title a {
    color: #2e2e2e !important;
}

Chi-K

Thanks. thats awesome.. this could actually be a module by itself for a future booking.com like template. Would love to see a template like that.

There is bit of issue still though.

1) In mobile, the category is off. In desktop its aligned with the text below

Chi-K

A side question, why do you not add a space here, when in some places need the space before the classname

dominic

Hi Chi-K,
You can add the following CSS code to your site:

@media (max-width: 480px) {
.mod-article-list .intro-image .category-name {
      left: 32px;
} 
}

About the class, we have improved this section. So, you don't need the space before the class name.

Chi-K

dominic referring back to this, may i know then why if i add a space, then the styling will break.

dominic

Hi Chi-K,
Could you let me know the position that you mentioned here? send me a screenshot for further checking.

If you add a space between class names in the class attribute of an HTML element, it shouldn't break styling by default. HTML parsers typically ignore extra white spaces, including multiple spaces, within attribute values. Therefore,
<div class="classname1 space space classname2"></div> is functionally equivalent to <div class="classname1 space classname2"></div>.

Chi-K

its this one

if there is a space .. this happens

dominic

Hi Chi-K,
I have checked and I was mistaken in this section, I have updated the following CSS code:

.section.mobile-mr-none {
    margin-left: -18px;
    margin-right: -18px;
}

.section.mobile-mr-none .top-articles-info,
.section.mobile-mr-none .section-title-wrap.spacer-small{
    padding: 0 18px;
}

NOTE: You should add a space before the class name.

Chi-K

Thanks so much for the clarification that was awesome. I think its all good .