Archived topic
Align text left and right
3 replies · Started by Matthias on May 24, 2022
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.
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. :)
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.
You’re welcome Matthias! Glad that worked! :)
