Amazon Links (allow 2 per row mobile and tablet)

Hello,

I have an amazon affiliate page with products that i would like to display two products per row on mobile and tablet. Could anyone provide me with the right custom css that could achieve this?

Thank you!

Can you share link to amz affiliate page?

https://orangeblossomlabradoodles.com/recommended-products

On 8/27/2020 at 7:51 AM, jezo said:

https://orangeblossomlabradoodles.com/recommended-products

All products on this page?

yes, on this page

On 8/31/2020 at 9:59 AM, jezo said:

yes, on this page

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* dog supplemnents */
div#block-yui_3_17_2_1_1598141717845_392243+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
/* Dog Foods */
div#block-yui_3_17_2_1_1525220674265_50443+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1525220674265_50443+.row .span-2:nth-child(4n+1) {
    clear: left;
}
div#block-yui_3_17_2_1_1598141717845_4784999+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1598141717845_4791171+.row .span-2 {
    width: 50% !important;
    float: left !important;
}
}

@tuanphanCan you explain how this code works? I'm looking to implement this on my own site but I’m not quite following what you were doing. 2 amazon products per row on mobile devices using the Amazon Blocks. 

site: littleemberslearning.co/amazon-supplies

12 hours ago, LittleEmbers said:

@tuanphanCan you explain how this code works? I'm looking to implement this on my own site but I’m not quite following what you were doing. 2 amazon products per row on mobile devices using the Amazon Blocks. 

site: littleemberslearning.co/amazon-supplies

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f8075dcf279da660cb02874>.row:nth-child(2)>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f80702036dcbe6d1761f3ee .span-12 .row .col {
    width: 50% !important;
    float: left !important;
}
}

7 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f8075dcf279da660cb02874>.row:nth-child(2)>.col {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f80702036dcbe6d1761f3ee .span-12 .row .col {
    width: 50% !important;
    float: left !important;
}
}

 

What if I combine all my products to be in one page-section, for example, I move all my products to be in "page-section-5f8075dcf279da660cb02874"?

16 hours ago, LittleEmbers said:

What if I combine all my products to be in one page-section, for example, I move all my products to be in "page-section-5f8075dcf279da660cb02874"?

@tuanphanI went ahead and added 12 products to "div#page-section-5f8075dcf279da660cb02874" this morning. How would I get this to be 2 products per row on mobile? Thanks for helping on this.

site: littleemberslearning.co/amazon-supplies