• As it can be seen in the linked web address, the stories are displayed as one long column that is left aligned. It does not look great. I would like to change this from a column to a scrollable row of the same stories but I cannot see how. There is no column block tool on the self hosted editor that I can see. I can find the individual stories but I do not see a way to realign them outside of the list.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • The way to achieve a scrollable row would be to set them a defined width (min-width alongside the current max-width) and use a display:flex; property on your wrapper to align them as a row, then use overflow-y: scroll; rule to show a scroll bar. You can basically add this to your own styles:

    .page-client-stories .post_wrapper {
      display: flex;
      overflow-y: scroll;
    }
    .page-client-stories .post_container {
      min-width: 430px;
      margin-right: 50px;
    }
    .page-client-stories .post_container:last-child {
      margin-right: 0px;
    }

    Though, it may need to be adapted for mobile too. You can reduce the min and max-width for smaller breakpoints.
    Personal advice: in terms of UX, I don’t know think it is the best way to show up a content like this though. A carousel showing N-by-N items may create a better render.

    Thread Starter dperez40

    (@dperez40)

    @profnox Thank you so much for the quick and detailed response. I also appreciate the input on what would be a better idea.

    How would you go about doing the other option? I am struggling because I cannot see some of the options. When I go to the “Page” All i see are options for changing the title, the physical content in the middle is located somewhere else and I don’t even see it referenced on the “Page”. I apologize for the ignorance, I am trying to learn how to adjust these things as fast as possible.

    Moderator bcworkz

    (@bcworkz)

    The other option? As in the carousel suggestion? You could use a carousel plugin. Many are intended for photos, so may not be suitable for stories. What you want is one that accepts arbitrary HTML content. If you have some coding skills there are some JavaScript carousel libraries you could integrate into WP even though they are not actually WP plugins. Flexsilder 2 is one example. The linked example is an image gallery, but it’ll act similarly with any arbitrary HTML content.

    the physical content in the middle is located somewhere else and I don’t even see it referenced on the “Page”.

    That kind of content is likely managed by template or block code. The underlying code can query for other content from the DB and output it on a particular page. That kind of behavior is theme dependent. If you need better understanding of what’s going on I suggest asking through your theme’s dedicated support channel.

    Thread Starter dperez40

    (@dperez40)

    @bcworkz Thank you very much for the detailed response. I am at the beginning stages of getting familiar with Word Press and would like to understand how it works to better adjust these kinds of things.

    Thread Starter dperez40

    (@dperez40)

    @profnox Where would I add the script you laid out in your original response? I do not see where to add it to integrate with the page. It seems like the body of that page is located somewhere other than the “Pages” tab.

    Moderator bcworkz

    (@bcworkz)

    If you have a JS script you want loaded on a page (that’s not part of a formal plugin) you use PHP to “enqueue” the script file. There are some examples in the user contributed notes at the bottom of the linked page. If it’s only needed on a specific page, you can conditionally enqueue based on the return value from get_queried_object_id().

    This kind of PHP code can go in a theme’s functions.php file (preferably of a child theme) or your own custom plugin. Child themes or custom plugins help protect your code from periodic updates.

    The end result of doing this will place a script link reference in the head section of a page. One reason for going this route is you can specify other script dependencies when enqueuing to ensure dependencies (like jQuery) are referenced before your script.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing a column of paragraphs to a row’ is closed to new replies.