Mobile website with Gutenberg columns

  • flo2828

    (@flo2828)


    3 years, 8 months ago

    Hi,
    I am using the 30:70 column on my website and want to switch the sequence of the two on mobile.

    So I have for example a picture on the left and text on the right and now want to have the text first and then the picture (normally it is just the other way around).

    Thanks for your help`

    • This topic was modified 3 years, 8 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 3 replies - 1 through 3 (of 3 total)
  • George Appiah

    (@gappiah)

    3 years, 8 months ago

    The native column block doesn’t give you this sort of control.

    But you can easily achieve this with custom CSS code (flex-direction: column-reverse) targeting the appropriate column group on mobile devices.

    If you want me to provide the specific CSS code to use on your site, you need to provide the address of the page in question.

    Standing by.

    Thread Starter flo2828

    (@flo2828)

    3 years, 8 months ago

    With adding the code you suggested directly in the costum CSS of the columns it didn’t change anything.

    So I now tried this tutorial:
    https://generatepress.com/forums/topic/reverse-column-order-on-mobile-using-guternberg/
    but here the the column reverses without adding white space beneath.

    Here is my Website link (don’t look at the other pages – they are not finished jet xD)

    Website

    • This reply was modified 3 years, 8 months ago by flo2828.
    Thread Starter flo2828

    (@flo2828)

    3 years, 8 months ago

    I now have an idea how to create the requiered space:
    I added in the css class of the columns “padding-bottom” with the value of the height from the video.

    The problem now is how to get the value of the height from the video in the css file as a variable.
    I tried useing someething like this:

    var height = document.getElementById(‘element’).offsetHeiht;

    but first of all I would have to add an ID to the video and I also have no idea how to connect a Javascript comment to CSS

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Mobile website with Gutenberg columns’ is closed to new replies.