Responding to screen size

  • Hi, great plugin which I’ve used for ages.

    I have a layout problem which I would like advice on. I use adapted ‘manual = (possible values: blank or a comma seperated list eg: “d, g, t”)’ as part of the shortcode to manually create 4 columns – can be seen at https://skipology.com/iphoneography-app-index/

    My problem is that my web site is responsive to mobile devices. When the device screen will only fit say 2 columns they are ordered 1 and 2 next to each other then 3 sits under 2 and finally 4 sits under 1 but below the bottom of 3 so if this works you have…

    12
    3
    4

    Ideally you would want:

    13
    24

    to retain the alphabetic flow. I hope this makes sense – you can see the results by changing browser window size. Can you assist? It degrades beautifully to single column – just seems to be the stages in between.

    https://www.ads-software.com/plugins/multi-column-tag-map/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Paul Skip Brown

    (@paul-skip-brown)

    That should be:

    12
     3
    4

    Plugin Author tugbucket

    (@tugbucket)

    I am aware of the issue. The plugin was originally released before CSS3 columns (https://www.w3schools.com/css/css3_multiple_columns.asp) became widely adopted.

    Currently the plugin creates floated parent divs. When the page collapses, the float behave as floats do. To remedy this, an option to remove those holding divs and turn on { column-count: x }

    Alternatively, you could add rules to your media queries. When your site shrinks, make the columns thinner. When it gets to the point that they are to skinny to look good and/or start stacking wrong, make the 100% width.

    At some point I’mp planning on adding CSS columns option. But until then, you can add media queries to you CSS.

    Thread Starter Paul Skip Brown

    (@paul-skip-brown)

    Thank you, understood. I’ll have a play around with CSS / Media queries I think.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responding to screen size’ is closed to new replies.