Mobile Grid

[Trishb]

Hello,

I was wondering if there is a way to hide/show projects based on device. I was hoping the theme would be more truly responsive and adjust size of item so it fits. I’m finding that its either showing narrow smaller images (1×1 grid items), or if I use the php file you offered to fix this– it now is cutting off larger images (2×4 for example). I was thinking that a solution might be to show/hide certain project items.

Any suggestions for a solution is appreciated.

Trish

[satori]

Hey Trish,

thank you for the suggestion! I am not sure though that selectively hiding part of the website’s content is a solution that would fit most projects, since mobile users would then experience a significantly different website than desktop users. There was an idea to shrink all tiles proportionally on smaller screens so that the layout of the original grid is preserved, but after extensive testing we’ve decided to go with fitting all tiles to screen width and making them uniform because when screen sizes shrink past a certain point (typically below tablet screens) the tiles in a grid become so small that their content becomes illegible or incomprehensible.

In case you do need to hide certain tiles on mobile screens, you can achieve this using some custom code (you can insert it into the “Style: Add Custom CSS” tab of the Theme Options panel:

@media only screen and (max-width: 728px) {
.iso-masonry #post-XX,
.iso-masonry #post-YY,
.iso-masonry #post-ZZ { 
display: none; } 
}

where “XX” and “YY” are the IDs of the posts to hide. You can get the ID for a post or a project by entering the editor mode for that item and looking at the URL in the browser’s address bar: the number after the “post=” bit is the ID.

Sincerely,
Andrii / Satori Studio

[Author]

Posts