How to change layout at lower screen widths?

  • Resolved cag8f

    (@cag8f)


    6 years, 1 month ago

    Hello. I have used your plugin to display a square Instagram feed–3 columns wide, with 6 total images displayed. This layout is the same at all screen widths. Is there a way to ensure that, at a certain screen width, this layout changes (and the width of each image increases), so that there is a single column of large images, one on top of the other?

    Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter cag8f

    (@cag8f)

    Hello. Any update on this? I need to move forward with a solution to this. If I can’t do it with Photonic and/or a bit of custom code, I’ll have to switch to another option.

    Thanks.

    Plugin Author Sayontan Sinha

    (@sayontan)

    Please see the documentation on the layouts. The write-up is pretty extensive about which type of layout is suitable to variable screen sizes. Try resizing the screen to see what works for you.

    Thread Starter cag8f

    (@cag8f)

    OK. From the page you linked, it looks like the ‘mosaic’ layout is the only layout that can change image size/layout at lower screen width. Does that sound accurate?

    If so, is there any way to make a mosaic layout look more like a square layout (e.g. like this)?

    Thanks.

    • This reply was modified 6 years, 1 month ago by cag8f.
    Plugin Author Sayontan Sinha

    (@sayontan)

    Your safest bet might be Masonry, or the square layout with columns='auto'

    Thread Starter cag8f

    (@cag8f)

    >> or the square layout with columns=’auto’

    I tried that, but there was no change at low screen widths (screenshot). My shortcode is: [gallery type='instagram' columns='auto' count='6' thumb_size='350' layout='square']

    >> Your safest bet might be Masonry,

    That looks to do what I want for now. But this seems to require that all my images be the same native size–is that correct? If so, I’d still be interested in the square solution, if possible.

    Plugin Author Sayontan Sinha

    (@sayontan)

    I tried that, but there was no change at low screen widths (screenshot)

    Sorry, I cannot help troubleshoot CSS / layout issues without a link.

    But this seems to require that all my images be the same native size–is that correct?

    Didn’t follow you: what does “native size” mean?

    The reason Masonry works well for Instagram for this sort of scenario is because by default Instagram images are of the same size and square (you can control it so that the photos are not square, but mostly people don’t). In addition for the Masonry layout (and the Random Justified Grid and the Mosaic layout) there is an option to pick a tile size that is different from the actual image. This almost always guarantees a square photo.

    Thread Starter cag8f

    (@cag8f)

    >> Didn’t follow you: what does “native size” mean?

    By ‘native size,’ I meant the height and width of the image I upload to Instagram.

    >> The reason Masonry works well for Instagram for this sort of scenario is because by default Instagram images are of the same size and square (you can control it so that the photos are not square, but mostly people don’t). In addition for the Masonry layout (and the Random Justified Grid and the Mosaic layout) there is an option to pick a tile size that is different from the actual image. This almost always guarantees a square photo.

    OK. Based on this, and the results on my page, let me try to move forward with this solution. Thanks for the help. We can consider this resolved.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to change layout at lower screen widths?’ is closed to new replies.