[uxer55]

Hi,

How do I align the portfolio page title?

For example, on larger screen sizes the “iVoluntutor” title here: http://imakestuff.online/#/portfolio/ivoluntutor/ is not centered. How can I make it centered?

Thanks

[serkan]

Hi, Actually, it is centered but title takes 8 column and close part takes 4 column.
You can use text align left for now. If I find a solution then I will let you know.
Thanks

[uxer55]

I am confused, how will text-align: left help center the portfolio title?

Thanks

[serkan]

Hi, Just choose the title and in the content editor, choose align left them.
Or you can use this custom css code;

.portfolio-title { text-align: left; }

Thanks

[uxer55]

Thanks – I did this but it is not really what I wanted. Even when the portfolio title is centered, it is still not aligned with centered paragraphs on the portfolio page below. It still sits to the left, off-center. For now, I put it left-aligned, because it looks slightly better, but I really really wish there was a way to make it truly centered. Is there a solution?

Example page: http://imakestuff.online/#/portfolio/in-the-scene/

[serkan]

Hi,
You can try to use these custom css codes;

@media screen and (min-width: 768px) {
.portfolio-nav { position: absolute; top: 0; right: 0; }
.portfolio-title { text-align: center; width: 100%; }
.portfolio-nav.bottom { position: relative; } }

Thanks

[uxer55]

Hi and thanks. This works pretty well for large screen size, but can you check it on mobile on the URL above? Seems still not centered on mobile. Also, the navigation button layout is a little strange (right and left arrow) on some smaller screen sizes. Any way to fix that? THANK YOU! =)

[serkan]

Hi,
You should remove this custom css code;

.portfolio-title { text-align: left; }

It is the best options for centering the title to use above custom css codes.
Thanks for your understanding.

[uxer55]

Thank you! Title is perfect now. One last question: When you resize to a smaller screen, the arrow buttons overlap with the title sometimes. Any way to fix that? Thanks

[serkan]

Hi dashneimark,
Changing the default structure can bring up other problems. The best way to prevent this is not to change the structure. But we still look at the best options to help you. The code below can partially solve the problem. Apart from that, nothing seems to be possible.

.portfolio-field p { margin-top: 3em; }
.portfolio-title { padding-bottom: 2em; }

Thanks