Support » Theme: Reykjavik » Reverse Columns Order and Change Images alignment for Mobile View

  • Resolved kalayanis

    (@kalayanis)


    Hello,

    I am using a “Columns Block” with “Wide width” inside a Page with Default template.

    My content is on the left column and I have pictures on the right. Anyway, when stacked my pictures are displayed under the content, not above it.

    Is there a way to reverse the columns order for Mobile View?

    Also, I need to change my Image alignment (Image Block) for Mobile View too. They look good aligned Right in Desktop View, but I want to change the alignment to Centered in mobile view. Is that possible too?

    Thank you!
    Kala

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    Hi Kala,

    Please note that this is not a theme issue.

    The issue you experience is actually a normal behavior. Horizontal elements are stacked below each other on mobile screens. As far as I know, there is no way of controlling this in current version of WordPress columns implementation. Maybe try using “Media & Text” block instead, though I don’t think it contains the option either.

    There is a new WordPress version coming out next month I think, which should actually allow you to tweak such option as far as I know (but please don’t quote me on this ;)).

    Alternative solution would be to use a page builder which will allow you to set reversed order of columns on mobile screens.

    As for image alignment, I don’t think that is possible without some additional custom CSS code.

    Best regards,

    Oliver

    Hi Oliver,

    Thank you for the quick response!

    For now I have managed to achieve image alignment with the following CSS:

    @media (max-width: 671px) {
        .wp-block-image .alignright {
            float: none;
            margin-left: auto;
            margin-right: auto;
        }
    }

    Reversing columns by setting additional CSS class to columns block and then adding additional CSS:

    @media (max-width: 671px) {
    	.reverse-columns {
    		display: flex;
    		flex-direction: column-reverse;
    	}
    }

    I hope that there will not be any unwanted side effects 🙂

    Thank you!
    Kala

    Hi Kala,

    Very good solution! 🙂 Surely, I can’t guarantee you any future-proof as that also depends on changes introduced to future WordPress versions, but I’d say you should be fine with this CSS.

    Best regards,

    Oliver

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.