As you can see on the attached screenshots, PenBlock37 vertically doesn't really respond well in responsive design during the transition from four tiles in a row to four tiles in 2x2 rows.
From aprox. 1170px to 1122px the four tiles show in one row.
From aprox. 1122px to 894px the four tiles split up to three images in one row and one in one row below. Here is where the Responsive Design is lacking programming.
Smaller than 860px, the design shows a nice 2x2 grid.
There are always four items on the tablet resp. screen.
It is about the arrangement with different sizes:
1) At the beginning there are four pictures in a row. If you start to shrink the page horizontally, the images shrink proportionally, but remain in a row. (screenshot_27)
2) Below a certain size, this row is interrupted. Instead of continuing to shrink to a certain size in a row, one of the images jumps into a new row.
This creates a 1x3 row. And another 1x1 row with a gap of two images (screenshot_24.jpg).
This step is the one that is incorrect. A correct transition of responsive design would be from step 1 direct to step 3.
3) When shrinking in further, a correct 2x2 composition is displayed, with no gaps. (screenshot_26)
I hope this has brought more light into the darkness.
Hello PenciDesign,
As you can see on the attached screenshots, PenBlock37 vertically doesn't really respond well in responsive design during the transition from four tiles in a row to four tiles in 2x2 rows.
From aprox. 1170px to 1122px the four tiles show in one row.
From aprox. 1122px to 894px the four tiles split up to three images in one row and one in one row below. Here is where the Responsive Design is lacking programming.
Smaller than 860px, the design shows a nice 2x2 grid.
Regards,
Alexander
Attached files: Screenshot_27.jpg
Screenshot_25.jpg
Screenshot_24.jpg
Screenshot_23.jpg
Hi,
Do you mean you want to show 4 items on the tablet?
Regards,
PenciDesign.
Hello PenciDesign,
Sorry, I didn't realize I was being cryptic.
There are always four items on the tablet resp. screen.
It is about the arrangement with different sizes:
1) At the beginning there are four pictures in a row. If you start to shrink the page horizontally, the images shrink proportionally, but remain in a row. (screenshot_27)
2) Below a certain size, this row is interrupted. Instead of continuing to shrink to a certain size in a row, one of the images jumps into a new row.
This creates a 1x3 row. And another 1x1 row with a gap of two images (screenshot_24.jpg).
This step is the one that is incorrect. A correct transition of responsive design would be from step 1 direct to step 3.
3) When shrinking in further, a correct 2x2 composition is displayed, with no gaps. (screenshot_26)
I hope this has brought more light into the darkness.
Regards,
Alexander
Attached files: Screenshot_26.jpg