Start a new topic
Solved

A formatting roblem with Services (Portfoliobox 4)

Hello there,


I ran into an issue with the Service section in the new Portfoliobox 4 version.

  • the formatting of the services does not allow to spread the services equally = it looks as if there was a 4th service (nonexistent) which fills up the space to the right:

image


I have 3 services/e-books, and I would like to spread them evenly on the website. On top of that:
  • the text formatting within the services section does not allow text formatting; so my spaces and bullet points and ENTER moments are ignored
  • this is my input text, and how it should look:

image


To give you a feeling of what I want to achieve, I made a screenshot from my previous section version, which is still available on my Portfoliobox 3 older version:


image



These 3 e-books (aka services), and nicely spaced, centered, and my text formatting is preserved. Plus my Imprima font is available :) You can also find the landing page here:

I hope you could help me with this, right now it doesn't look good at all.

Thanks!
Weronika


Hello Weronika,


1. To adjust the services and make it centered, please hover over at the top of your services section and click the "Edit Section" button. Select "Size, Margins & Positions" then adjust "Padding right"



2. The image description for your services is designed for a short introduction about the service that's why the line breaks are not working. However, we can do some workarounds with this. This may look complicated but really easy to understand. Here's what you can do:


- You will use these two simple codes to fix the problem <br></br> and <li></li>

- <br></br> is use for line break and <li></li> is use for bullets.
- You need to wrap the text inside the tags for bullets while you can add the line break tag as it is. 

        Example:
             Line break <br></br> (here, you can add the line break code at the end of the paragraph)
            <li> bullet paragraph</li> (here, you need to wrap the paragraph inside the bullet code)

- I have already added it in two of your services so you may check it as an example and do the third one so you can learn and do it on your own if needed in the future. 


Note: Once you are done on the 3rd service, you will have to add <br></br> at the bottom "only if it doesn't match the other two". This will push your text up to make sure that all 3 columns have the same starting point. 



I hope this helps Weronika! Have a good day!


Arvin (Forum Moderator)


Hey hey Arvin,


thanks so much for helping.


1. unfortunately padding right does not work - I tried this before; the view then is:


image


This deals with the padding of the section section, but NOT with the services sub-part. If you can do changes from your admin, would you mind trying for me please? It seems I am stuck here - the problem is, it seems it is looking at 4 services instead of 3, so it showes this empty "gap" to the right side where the 4th service should be :(


2. About the html solution, super, I will try it out, many thanks! Perhaps there is a way that I do this not as a section page, but as a normal TEXT page?


Is there a way for me to take a TEXT template and design it in a simialr way? I need a solution to show 3 columns, for my 3 ebooks. So basically, is there a recipe where I can split my page into 2-3 columns?


I very much appreciate your help! I think this question about the columns might be a popular one, so I would definitely vote for it for the next "knowledge post" on the blog!


Cheers,

Weronika

Hello Weronika, 


1. I'm sorry for not being very clear about it. I mean that you should play with both padding and balance it until you make it centered. 



2. As for the columns, the maximum columns that you may add for now is only 2. You may do this by creating a text page and use the "two column" template. Now here is the fun part, you mentioned about splitting your page in two. This is possible using the two column template of the text page. After you created this page, you can right click on one of the columns and then click the drop-down menu "Add Element below". All the elements that you will add will only occupy the space of that column. So here, you can do a workaround if you want 4 columns. You can add 2 columns below each columns that you created. Here's an example: 




I hope this helps Weronika! Just play around with the tools and you will surely create an amazing site :) Have a nice day! 



Cheers, Arvin (Forum Moderator)