[Resolved] Align text left and right

Home Forums Support [Resolved] Align text left and right

Home Forums Support Align text left and right

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2230385
    Matthias

    Hi there,

    i am trying to achieve the following – a list with 4 rows, underlined with an arrow at the end.

    List object 1 ->
    _______________________
    Longer List object 2 ->
    _______________________
    and so on

    Currently i solved this with a grid – one side the text, the other the arrow. Both with a frame at the bottom for the underline.
    I want the arrows to be inline and everthing underlined – but currently this breaks when the screen size is shrinked: the “longer list object” goes into 2 lines (which is fine) – but the arrow and with that the underline does not. So it looks like:
    Longer List ->
    object 2 __
    ____________

    How would you solve this? Maybe there is a way to have 2 alignments in one text? Or an underline just in between – not done by frame as i currently did.
    In general “all” i want is for the underline not to break.

    Also – how can i avoid the photo to shrink like that when the screen size is getting smaller (2nd, brownish part of the page). I found an example page here where the side distance shrinks. but couldnt get this to work myself so far.

    #2230435
    Fernando
    Customer Support

    Hi Matthias,

    For the bottom border, you can try adding a custom class like add-bottom-border to the Grid Blocks as such: https://share.getcloudapp.com/4gurAZAb

    Then, add this CSS in Appearance > Customize > Additional CSS:

    .gb-grid-wrapper.add-bottom-border {
        border-bottom: solid 1px #fff;
    }

    Alternatively, you may also place the Grid Blocks within a Container Block and set the Bottom border in the Container Block instead.

    For the photo, how specifically would you like it to behave on tablet and mobile view? There’s a responsive view button for GB which allows you to set the spacing settings of a Block on Desktop, Tablet, and Mobile independently. Using this functionality should allow you to modify the Grid Block size on different views, altering the image size as well.

    Kindly let us know. 🙂

    #2230572
    Matthias

    Alternatively, you may also place the Grid Blocks within a Container Block and set the Bottom border in the Container Block instead.

    Works. Thank you.

    #2231598
    Fernando
    Customer Support

    You’re welcome Matthias! Glad that worked! 🙂

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