Please refer this url: https://www.unnatisilks.com/

These guys are rendering one sets of Home page blocks on desktop and the same images with 2 row alignment on mobile

How can I achieve this?

I also want to know how to get blocks per row with complete width on mobile just like this page: https://www.unnatisilks.com/sarees-online.html

Please help I see that this site is built on Magento So is their a custom plugin which can help?

  • did my answer help you? – Jack Perry Nov 9 '18 at 4:37

This is done using CSS.

Specifically on their site they're using Media queries to define their grid widths.

@media only screen and (max-width: 767px)
.hpgrid_4:nth-of-type(2n+1) {
    float: left;
    width: 49%;

This means that on a screen size with a maximum width of 767px the div with this class will be 49% width.

@media only screen and (max-width: 767px)
.hpgrid_4:nth-of-type(2n) {
    float: right;
    width: 49%;

See nth of type css rules to understand what's happening here, every 2nd row will be assigned the value of float right.

Compare to their desktop styles

@media only screen and (min-width: 1281px)
.container_12 .hpgrid_4 {
    width: 307px;

The width is hardcoded to be 307 px, so that 3 items can fit on each row.

This topic is a bit too broad to explain in one reply, so I'll refer you to a Responsive Web Design guide.

I'd recommend using the Bootstrap library, as it's classes have responsive web design built in.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.